ページ構造
このサイトの各ページは，下図に示す構造となっています．
 |
|
CSS ファイル
| Filename | Description |
|---|---|
| csmain.txt | CSS file |
比較的よく用いるクラス
| リスト | |
|---|---|
| <ul class="doc"> | 通常の箇条書き（リンク無し） |
| <ul class="lilink"> | 箇条書きを用いたページ内リンク |
| テーブル | |
| <table><tbody> | 色無し・ボーダー無し，リンク無し |
| <table><tbody class="Ctbl"> | 青系色．文字を中央揃えにする |
| <table><tbody class="Ltbl"> | 青系色．文字を左揃えにする（文字列のみの表など） |
| <table><tbody class="Rtbl"> | 青系色．文字を右揃えにする（数表など） |
| <table><tbody class="tbllink"> | 緑系色．プログラムファイルやデータファイルにリンクする |
| <tr class="line"> | 表の最下段に実線を引く |
| <table><tfoot class="tblcom"> | (本文backgroundと同色) 表欄外に注釈・補助的解説を記述 |
| スクロール・バー | |
| <div class="scrcode"><pre> ..... </pre></div> |
スクリプトやプログラムの一部を表示する 黒背景に水色文字を採用 |
| グリッド表示 | |
| <div class="grid"> ...... </div> | 写真・画像などをグリッド表示する |
| <div class="unit"></div> | 一塊の表示後，floatをクリアするタグを忘れずに！ |
グリッド表示使用例
<div class="grid"> <img src="pic20140227/200-train_asama.JPG" alt="pic" width="200"><br> <a href="pic20140227/600-train_asama.JPG" target="_blank">長野新幹線あさま</a> </div> <div class="grid"> <img src="pic20140227/200-train_shinano.JPG" alt="pic" width="200"><br> <a href="pic20140227/600-train_shinano.JPG" target="_blank">特急ワイドビューしなの</a> </div> <div class="unit"></div>
限定的な使用クラス
ImageMagickの色見本のページでのテーブル
| ImageMagick 色見本用テーブル | |
|---|---|
| <table><tbody class="col1"> | 英字頭文字で色の名前の先頭にジャンプするリンクに用いてる |
| <table><tbody class="col2"> | 色短冊・色名等の表示部分に用いる |
左メニューでのページ間リンク
左メニュー中で，Home，Index，Aboutのページにジャンプするメニューに用いる． 左メニュー中では，以下のように使っている．
<ul class="navlink"> <li><a href="index.html">Home</a></li> <li><a href="j_n_contents.html">Index</a></li> <li><a href="j_n_about.html">About</a></li> </ul>
トップページ本文メニューでのページ間リンク
トップページ本文メニュー中で，Home，Index，Aboutのページにジャンプするメニューに用いる． リンク部の色は左メニューに合わせてある．メニュー中では，以下のように使っている．
<table><tbody class="index"> <tr><th>ページ名</th><th>説明</th></tr> <tr><td class="icol1"><a href="index.html" >Home </td><td class="icol2">このページです．</td></tr> <tr><td class="icol1"><a href="j_n_contents.html">Index</td><td class="icol2">掲載記事の目次です．</td></tr> <tr><td class="icol1"><a href="j_n_about.html" >About</td><td class="icol2">管理人の独り言，このサイトについて</td></tr> </tbody></table>
リストを利用した横メニュー
本文中で，Home，ページ先頭，ページ末尾にジャンプするメニューに用いる． 本文中では，以下のように使っている．
<ul class="menu-late"> <li><a href="index.html#top">▲ Home</a></li> <li><a href="#top">△ Top</a></li> <li><a href="#bottom" class="last">▽ Bottom</a></li> </ul>
