HTML 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

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system