• 
• 
• 
• 
• 

• 画面サイズ
• 文字色
• 文字の大きさ
• 使用フォント
• 行間の調節
• ページ構成と段組の種類
• 背景色
• 静的・動的コンテンツの選択
• スペーサーGIFの使用

スペーサーGIF【spacer.gif】とは、中身は何もない透明なGIF画像を、行間やテーブルの余白調整などに応用したものです。通常は縦横1ピクセルの画像を「widthとheight」で指定し、自由に伸縮させて目的の場所に挿入します。

現在のブラウザが対応している画像の種類は基本的には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を用いると便利です。基本的にはテーブル（表）のセル内で使うのが一般的ですが、使い方次第でいろいろな使い方があります。

• 画像を挿入する（制作ソフト編） - ゼロから始めるホームページ作成講座
• 画像を挿入する（HTMLタグ編） - ゼロから始めるホームページ作成講座
• 画像（イメージ）タグ：HTMLタグ辞典
• 背景の設定：スタイルシート（CSS）辞典