2. 中級編: 色付きの横線を作成する。

Internet Exploer では横線に 自由に「色」を付けることができますが、 Netscape Navigtor や他のブラウザでは、それができません 。ブラウザによって表示が異なるのは困りますし、デザインによっては、他の色が欲しくなることがあります。そんなときに使えるテクニックです。

  • 用意するもの: 1 ピクセル x 1 ピクセルの透明な GIF。

    こんな感じです→ 1x1-t.gif

これは、ウェブ・デザイナーの間では簡単に「スペーサー」と呼ばれています。

まず、 1 x 1 セルのテーブルを作成して、そのセルの背景色を塗ります。この背景色が横線の色になります。

<table border="1" cellpadding="0"
 cellspacing="2" width="100" bgcolor="red">
 <tr>
  <td></td>
 </tr>
</table>

色を付けても、セルの中に何も入っていないと、Netscpe Navigator では背景色は表示されません (Internet Exploer では見える)。そこで、先ほどの「スペーサー」をそのセルの中に配置します。これで背景色が表示されます。

<table border="1" cellpadding="0"
 cellspacing="2" width="100" bgcolor="red">
 <tr>
  <td><img src="1x1-t.gif" width="1" height="1" border="0"/></td>
 </tr>
</table>

ここまでできたら、テーブルの枠線幅を 0、セル間隔を0、セル内のマージンを 0、テーブル幅を 100% に変更してできあがりです。

<table border="0" cellpadding="0"
 cellspacing="0" width="100%" bgcolor="red">
 <tr>
  <td><img src="1x1-t.gif" width="1" height="1" border="0"/></td>
 </tr>
</table>

後は、背景色を変更すれば、好きな色の横線が得られます。

「スペーサー」が「透明」であるのは、このように色を変えたときに背景色を透過させるためです。

横線を太くしたい場合は、スペーサーの高さを 1 ピクセルから、太さ分のピクセルに変更します。これは別の GIF を用意するのではなく、 img ... タグの height="1" を変更して拡大表示させることで対応します。

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="red">
 <tr>
  <td><img src="1x1-t.gif" width="1" height="4" border="0"/></td>
 </tr>
</table>

新着記事