リンク領域の作り方（１）

リンク領域を table 関係のタグとスタイルシートを使って作ると、このページのような体裁になります。

スタイルシートで border-style を指定しなければ、たとえ枠線の太さや色を指定していても枠線は表示されなくなります（あえて「border-width: 0px;」と記述する必要はない）ので、これを利用して表の外枠は表示させず、セルの枠だけを表示させることができます。すなわち、table セレクタに関しては border-style、border-width、border-color プロパティは全て記述せず、それらのプロパティは th や td だけに記述します。

このページのリンク領域に関する記述は、具体的には次のようになっています。

table.b { font: 10.5pt; }
th.b { border-style: solid; border-width: 2px; border-color: pink; background: honeydew; }

[備考]
各セルの中に入れる文字は、標準の大きさより小さく設定しました。なお、ページの閲覧者が表示文字を小さく設定した場合に見えにくくなるのを防止するため、文字サイズの単位には「pt」を用い、大きさが変化しないようにしました。
クラス名は、既に「a」が使われているという前提で「b」にしました。

<table cellspacing="3" class="b">
<tr>
　<th width="110" height="28" class="b"><a href="../../index.html">ＨＯＭＥ</a></th>
　<th width="110" class="b"><a href="btn_syst.html">ボタンで</a></th>
　<th width="110" class="b"><a href="map_syst.html">マップで</a></th>
　<th width="110" class="b"><a href="../../k_gensei/genseirn.html">函南原生林</a></th>
　<th width="110" class="b"><a href="../../ta_danso/ta_danso.html">丹那断層</a></th>
　<th width="110" class="b"><a href="../../hakuho_k/hakuho_k.html">白鳳の秘湯</a></th>
</tr>
</table>

[備考]
セルとセルの間の間隔は、table タグの cellspacing 属性で調整できます。現在の間隔は３ピクセルです。なお、セルの枠の太さは、スタイルシートの border-width プロパティで調整します。

リンク領域を表のセルを並べて作る