今更感たっぷりですが最近はWebデザイナーの専門学校では教えていないのか
意外と知らない子が多くびっくりしたので書いてみようと思いました。
こんなの知っているという人は他のページをご覧ください
まだhtml5とCSS3にブラウザが対応できていない今、
htmlコーディングは<div>タグにcssでfloatをかけて左右に分けていくのが主流だと思いますが、
その昔<table>タグを使ったレイアウトが主流でした。
このテーブルでのレイアウトに欠かせなかったのがスペーサーGIF（ジフ）でした。
一般的に1px（ピクセル）×1px（ピクセル）でできた透明のGIF画像です。
※<img>タグにサイズを指定して大きさを可変で使用するので実際サイズはいくつでも
これを<tr><td>aaaa</td><td><img src=”spacer.gif></td><td>bbbb</td></tr>
なんていう風にaaaaとbbbbの間に意図した隙間を加えるのに利用されてきました。
<br>の改行でのスペースより小さくしたい時などにも使えます。
私が学校で教わったのは勿論CSSでのレイアウトでしたが、
テーブルで製作されたサイトのリニューアルや修正を行う仕事などがあった際に
対応できないとまずいのでしっかりと覚えておきましょうと習いましたｗ
もし知らなかったら古いレイアウトのコードに<img src=”spacer.gif”>なんてあった場合、
画像が格納されているフォルダ見てもなんのこっちゃとなるでしょうね。
実際に現場で幾度となくテーブルレイアウトを書き直してきました
最近はめっきりみませんが探せばまだまだ眠ってるでしょうね
まぁ今やるなら完全に作り替える仕事でしょうけど覚えていて損は無いです。
で、スペーサーgifですが作り方はフォトショップで背景を透明にし、
1px（ピクセル）×1px（ピクセル）でgif画像としてweb保存すればできます。
さらっとの説明でわからないかもしれないので
詳しく載せているサイトを念のため紹介しておきます
と思いましたが…
検索したらあまり参考になるサイトがないのでやはり載せておきます
スペーサーgif（ジフ）作り方【フォトショップ】
フォトショップを開いたら「ファイル」から「新規」でそして下記のように設定
幅、高さを１pxにしてカンバスカラーを「透明」に
そしてweb用にgifで保存すればできます
CSSでどうしても上手くmargin（マージン）が効かなくて困ってしまった場合などに
使ってみてはいかがでしょうか？
