TAG index
ホームページ作成ガイド

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / スペーサーGIF
スペーサーGIF


スペーサーGIFとは、1×1ピクセルの透明なGIF画像のことです。主にテーブルレイアウトで使用します。

セルの幅や高さを固定する場合や、マージンや最小表示幅の確保など、様々な用途に使えます。


 作り方
画像編集ソフトで1×1ピクセルの画像を作成し、透過を指定します。それをGIF形式で保存するだけです。

画像を透明にしておくことで、どの背景色でも使用できるようになります。


作るのが面倒な方は、次のサンプルをダウンロードしてお使いください。

←これ

ダウンロード方法
Windowsの場合:画像の上で右クリック → 名前を付けて保存


※クリックしやすくするために、タグで拡大して枠線を付けています。実際は1×1pxの小さな透過GIF画像です。
※画像には直接リンクせずに、必ずダウンロードしてから使ってください。


 指定方法
スペーサーGIFをIMGタグで読み込み、WIDTH=""HEIGHT=""サイズを指定します。


例えば次のような感じで指定します。

※以下の使用例では、わかりやすくするためにスペーサーGIFを赤くしています。
TDタグIMGタグの部分は、改行を入れずに1行で記述します。

■セルの高さを指定した例

<TABLE BORDER="1" WIDTH="300" CELLSPACING="1" CELLPADDING="0">
<TR>
<TD BGCOLOR="#E8E8FF"><IMG SRC="image/spacer.gif" ALT="" WIDTH="1" HEIGHT="10"></TD>
</TR>
<TR>
<TD BGCOLOR="#BDE9BA"><IMG SRC="image/spacer.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
</TR>
<TR>
<TD BGCOLOR="#FDEDC4"><IMG SRC="image/spacer.gif" ALT="" WIDTH="1" HEIGHT="40"></TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます


↓スペーサーGIFを透過にすると



■セルの幅を指定した例

<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="0">
<TR>
<TD BGCOLOR="#E8E8FF"><IMG SRC="image/spacer.gif" ALT="" WIDTH="50" HEIGHT="20"></TD>
<TD BGCOLOR="#BDE9BA"><IMG SRC="image/spacer.gif" ALT="" WIDTH="100" HEIGHT="1"></TD>
<TD BGCOLOR="#FDEDC4"><IMG SRC="image/spacer.gif" ALT="" WIDTH="200" HEIGHT="1"></TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます


↓スペーサーGIFを透過にすると



■最小表示幅を確保した例

<TABLE BORDER="1" WIDTH="100%" CELLSPACING="1" CELLPADDING="0">
<TR>
<TD BGCOLOR="#BDE9BA"><IMG SRC="image/spacer.gif" ALT="" WIDTH="500" HEIGHT="20"></TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます


↓スペーサーGIFを透過にすると


テーブルの幅を100%にして、最小表示幅を 500 に指定しています。

指定方法は以上のような感じになりますが、色々な使い方が考えられますので、ご自分で工夫しながら使ってください。


ホームページ作成ガイドTOP


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲