1×1ピクセル

1-1. スペーサー

1×1ピクセルの透過 GIF 画像(スペーサー)を張りこむことで空白を作る.
便利になることは

  • 画像・テキストの配置が自由自在!
たとえばこんな・・・

Le Petit Prince

Je connais,moi,une fleur unique au monde...
© Antoine de Saint-Exupery


HTML Sample
<table border=0 cellpadding=10 bgcolor="#FFFFFF" width="100%">
<tr><td align=center>
<big><b>Le Petit Prince</b></big>
<p>Je connais,moi,une fleur unique au monde...<br>
<img src="../images/spacer.gif" width=1 height=1 hspace=80 vspace=0>
<small>&copy; Antoine de Saint-Exupery</small>
</td></tr>
</table>


スペーサーの大きさは1×1ピクセルにしてスペース(hspace 属性・vspace 属性)で空白を作る.
これは,スペーサーが表示できないとき見苦しくないための策.

画像はスペーサーを使わなくても,hspace , vspace 属性を使うことも出来る. (この方がいいかも)

1-2. hspace 属性 , vspace 属性

  • hspace は画像の左右(横)の空白を作る.単位はピクセル.
  • vspace は画像の上下(縦)の空白を作る.単位はピクセル.

2-1. ライン

好きな色の1×1ピクセルの画像を作る.
画像の保存形式はサイズが小さいので,GIF , PNG , BMP でも何でもよい.

というラインを引きたい場合,次のように書きこめば出来あがり.

<img src="../images/white.bmp" width=200 height=1 hspace=10 vapace=10>
images というディレクトリ内に white.bmp という画像が置いてある.

たったひとつの1×1ピクセル画像でいろんなラインが引ける.

2-2. ちょっと違ったライン集

幅・太さ

-->width=250 height=3 hspace=0 vspace=0


-->width=200 height=10 hspace=0 vspace=0

二つ並べて,2本線


-->width=200 height=2 hspace=0 vspace=2
-->width=200 height=3 hspace=0 vspace=0

おほほほほ

へへへへへへ
--> width=100 height=1hspace=0 vspace=0

縦線

-->width=2 height=100 hspace=20 vspace=0

ボタンにしてみても・・・
リンクを張ってみました.border 属性を使えば,枠のあるボタンに. しかも,大きさは自由.
[雑記帳]
-->width=10 height=10 hspace=0 vspace=0 border=2 align=top

[Web メモ]