3. 上級編: 破線・点線の横線を作成する。

デザイン上、破線や点線の横線が欲しい場合があります。

この場合、破線や点線を描いた画像ファイル (GIF, JPEG) で対応することもできますが、実は欠点が一つあります。破線や点線を描いた画像ファイルでは、そのサイズが固定になってしまって、そのブラウザのウィンドウ・サイズに合わせて横幅一杯にならないんです。

横幅を固定してあるページのデザインなら問題はないんですが、横幅を自由に変えられることを前提にデザインするときには、ちょっと不便です。

それでは、自由に横幅が変わる破線や点線の横線は作成できないのか…。実は、そのテクニックがあります。このテクニックを使うと以下のような点線を作成することができます。しかも、ブラウザのサイズによってリサイズします。

以下がそのテクニックです。

用意するもの:

1 ピクセル x 1 ピクセルの透明な GIF。

こんな感じです-→ 1x1-t.gif
破線・点線のパーツ GIF。こんなカンジです。

ちょっと小さくて見にくいですね。拡大して周辺に境界線を 1 ドット付加すると、以下のようなカンジになります。

要するに、点線を切り出し、ドットと、ドットとドットの間のスペースだけの最小単位にした画像ファイルです。

まず、 1 x 1 セルのテーブルを作成し、その「背景画像」に、前述の破線・点線のパーツ GIF を指定します。

<table border="1" cellpadding="0" cellspacing="2"
 width="100" background="dot-h.gif">
 <tr>
  <td></td>
 </tr>
</table>

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

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

ここまでできたら、テーブルの枠線幅を 0、セル間隔を0、セル内のマージンを 0、テーブル幅を 100% に変更し、スペーサーの「高さ」を破線・点線のパーツ GIFの高さに指定して、できあがりです。

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

背景画像である破線・点線のパーツが、テーブル内のセルにあわせて「繰り返し」表示されるため、一本の破線・点線にみえるようになるわけです。

破線・点線のパーツを変更することで、さまざまな種類の破線・点線を作成することができます。

3. 上級編: 破線・点線の横線を作成する。

新着記事