リンク領域を複数のボタンで作る
リンク領域を複数のボタンとスタイルシートを使って作ると、このページのような体裁になります。リンク領域に関する記述は、具体的には次のようになっています。
スタイルシート
img.btn { margin-right: 3px; }
[備考]
ボタンとボタンの間の間隔は、margin-right プロパティの値で調整します。
[備考]
ボタンとボタンの間の間隔は、margin-right プロパティの値で調整します。
HTML の記述
<a href="../../index.html"><img src="../../cmn_img/btn_home.gif" alt="トップページ" border="0" class="btn"></a><a href="cel_syst.html"><img src="btn_c-de.gif" alt="表のセルで" border="0" class="btn"></a><a href="map_syst.html"><img src="btn_m-de.gif" alt="マップで" border="0" class="btn"></a><a href="../../k_gensei/genseirn.html"><img src="btn_gens.gif" alt="函南原生林" border="0" class="btn"></a><a href="../../ta_danso/ta_danso.html"><img src="btn_dans.gif" alt="丹那断層" border="0" class="btn"></a><a href="../../hakuho_k/hakuho_k.html"><img src="btn_haku.gif" alt="白鳳の秘湯" border="0"></a>
[備考]
各 img タグには、alt 属性を必ず付けます。
最右端のボタンの右側にマージンは不要ですから、当該 img タグには class 属性を付けません。
また、すべての a タグと img タグは連続して記述し、途中で改行しないこと。もし、例えば
<a href="../../index.html"><img src="../../cmn_img/btn_home.gif" alt="トップページ border="0" class="btn"></a>
<a href="cel_syst.html"><img src=・・・
のように途中で改行する（この例では </a> の後で改行している）と、ボタンとボタンの間に隙間ができ、それがmargin-right プロパティの値に加算されてしまいます。（原因は IE6 のバグか？）
[備考]
各 img タグには、alt 属性を必ず付けます。
最右端のボタンの右側にマージンは不要ですから、当該 img タグには class 属性を付けません。
また、すべての a タグと img タグは連続して記述し、途中で改行しないこと。もし、例えば
<a href="../../index.html"><img src="../../cmn_img/btn_home.gif" alt="トップページ border="0" class="btn"></a>
<a href="cel_syst.html"><img src=・・・
のように途中で改行する（この例では </a> の後で改行している）と、ボタンとボタンの間に隙間ができ、それがmargin-right プロパティの値に加算されてしまいます。（原因は IE6 のバグか？）