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>

新着記事

#1707. 自家製麺「凌世麺」 -- 蝦仁湯麺 (えびそば) @東林.横浜中華街:
2026-01-03 横浜中華街・福建路の東林(とうりん)にてランチ。あまりの寒さに、スープたっぷりの麺料理が恋しくなり、蝦仁湯麺(えびそば)を大盛りでオーダー。東林のラーメンは自家製麺を使っているのが特徴で、その麺は「凌世麺(りょうせいめん)」と名付けられてい...
#1706. 新年明けましておめでとうございます -- 2026年横浜ポンパドウル元町本店十二支パン「午」:
2026-01-03 新年明けましておめでとうございます。旧年中はお世話になりました。本年もよろしくお願いします。写真は、ポンパドウル元町本店の十二支パン(干支パン)、2026年は「午」🐎。カスタードクリーム入り菓子パン。
#1705. 上海炒麺 (上海焼きそば) @萬来亭.横浜中華街:
2026-01-03 1月3日。例年のように元町厳島神社へ初詣。その帰り道、横浜中華街の萬来亭(ばんらいてい)にてランチ。食べたい料理はいろいろ思い浮かぶが、年明け最初の訪問となれば、やはりこの店の名物上海炒麺(上海焼きそば)を外すわけにはいかない迷わずオーダ...
#1704. 涼拌乾絲 (干し豆腐の細切り和え) + 沙茶嫩雞 (ニンニクの芽と鶏むね肉の沙茶醤炒め) @台湾美食.横浜中華街:
2026-01-01 2026年元旦。横浜中華街・長安道の台湾美食にて晩餐。台湾美食は、その名のとおり台湾料理の店。現在の店舗は、以前は伊豆のアンテナショップだった場所をほぼ居抜きで使っており、外装にやや和風の名残がある。そのため、中華風の外観が並ぶ中華街の中で...
#1703. 春を感じるご馳走 - 春竹の子と干し椎茸の醤油煮込み + 桜海老と春野菜の土鍋ご飯山椒風味 @一楽.横浜中華街:
2018-03-26 横浜中華街・中華街大通りの一楽にて晩飯。一品目は、春メニューから春竹の子と干し椎茸の醤油煮込み。これは・・・素食(スゥシー,精進料理)の紅焼烩双冬かな? 紅焼(ホンシャオ)ともちょっと違うような、甘い香りのする焼付け具合が肉厚の干し椎茸とよ...