微妙なレイアウト表現に最適
スペーサーGIF【spacer.gif】とは、中身は何もない透明なGIF画像を、行間やテーブルの余白調整などに応用したものです。
通常は縦横1ピクセルの画像を「widthとheight」で指定し、自由に伸縮させて目的の場所に挿入します。
なぜGIF画像なのか
現在のブラウザが対応している画像の種類は基本的には2つ。
「GIF画像」と「JPEG画像」です。
このうち画像を透明化できる（背景を透過できる）のはGIF画像だけなのです。
背景の色と同色にすればJPEG画像を使うことも出来ますが、背景に依存してしまうので汎用性のあるGIF画像を使うのが一般的です。
なぜわざわざ画像を使うのか
行間の調節や余白調整は改行【br】を挿入してしまうのが一番楽な方法です。
もちろんこれでも問題はないのですが、改行で空くスペースはあらかじめ決まっています。
つまり、改行で微妙な余白の調整は出来ません。
この問題は本来スタイルシートを使えば解決できますが、構造や指定方法ががややこしくなるため、1ピクセル単位で自由に伸縮できる画像を使ってしまおうと考えられたのがこのスペーサーGIFです。
これを使うことにより微妙な調整が可能になります。
まだまだ現役…でもスタンダードではない
この画像を使うという手法はHTMLのバージョンが古かった頃、古いブラウザでも見られるように対策する手法の名残と言われています。
まだまだ企業系のWEBサイトなどにも使われていますが、CSSでデザインしたサイトが増えてきたという点やブラウザも進化したこともあり、スタンダードではなくなりつつあります。
基本的にテーブルで使用
スペーサーGIFの基本的な使い方は、テーブルのセル内で余白の調整に使うのが一般的です。
また、表と表のスペース調節などにも用いられます。
使い方は自由なので、いろいろと試してみましょう。
使い方は画像を扱うのと同じです。目的の場所にスペーサーGIFを挿入して、任意に縦横をピクセルで指定します。
以下が使用例です。
矢印の方向に画像が挿入されています。
画像は透明ですから、マウスで反転させると分かりやすいでしょう。
↓ |
→ |
タグ例と使うときの注意点
タグの記述例は以下のように書きます。
widthとheightの属性で縦横任意にピクセルで指定してください。
最後に改行<br>を入れ忘れないようにしましょう。
また、スペーサーGIFに限らず、説明文はなくとも「ALT属性」は必ず付けてください。
ダウンロード
スペーサーGIFは画像編集ソフトがあれば簡単に作ることが出来ますが、以下でも入手できます。
用途に合わせて使用してください。
配布データに著作権はありません。
【spacer.zip】 （157バイト） – ※要解凍
【spacer.gif】 （43バイト） – ※右クリックで「対象をファイルに保存」
微妙な行間や余白の調整は、スペーサーGIFを用いると便利です。
基本的にはテーブル（表）のセル内で使うのが一般的ですが、使い方次第でいろいろな使い方があります。
