| 3． 単ピクセル画像を使う |
任意の太さの線を表示する
次の 3 種類の画像はどのような方法で作ったと思いますか。
(1) は 600×138 ピクセル，(2) は 600×18 ピクセル，(3) は 50×200 ピクセルほどの画像に見えますが，実は 1×1 ピクセル（単ピクセル）の画像だけで作ったのです。
|
|
|
| (1) |
|
|
 |
| (2) |
|
|
|
| (3) |
|
|
|
|
|
解説
画像を表示させるための <img src="ファイル名"> という タグについては「少し実用的なページを作る」で学びました。そのとき画像の表示幅と高さを width と height という属性名で指定したことを思い出しましょう。そうです，たった 1×1 ピクセルの画像であっても，width と height の指定によって，任意の大きさに拡大できるのです。たとえば (1) では 1×1 ピクセルの青色画像（dot_bl.png）と透明画像（dot_cl.png）を交互に配置しました。
次は (1) のソースです。
|
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="dot_bl.png" width="600" height="1"></td></tr>
<tr><td><img src="dot_cl.png" width="600" height="2"></td></tr>
<tr><td><img src="dot_bl.png" width="600" height="2"></td></tr>
<tr><td><img src="dot_cl.png" width="600" height="2"></td></tr>
<tr><td><img src="dot_bl.png" width="600" height="3"></td></tr>
<tr><td><img src="dot_cl.png" width="600" height="2"></td></tr>
<tr><td><img src="dot_bl.png" width="600" height="6"></td></tr>
<tr><td><img src="dot_cl.png" width="600" height="2"></td></tr>
<tr><td><img src="dot_bl.png" width="600" height="10"></td></tr>
<tr><td><img src="dot_cl.png" width="600" height="2"></td></tr>
<tr><td><img src="dot_bl.png" width="600" height="15"></td></tr>
<tr><td><img src="dot_cl.png" width="600" height="2"></td></tr>
<tr><td><img src="dot_bl.png" width="600" height="21"></td></tr>
<tr><td><img src="dot_cl.png" width="600" height="2"></td></tr>
<tr><td><img src="dot_bl.png" width="600" height="28"></td></tr>
<tr><td><img src="dot_cl.png" width="600" height="2"></td></tr>
<tr><td><img src="dot_bl.png" width="600" height="36"></td></tr>
</table>
|
|
(2) と (3) についてのソースは省略しますが，ブラウザから見ることができます。
もう気が付いたと思いますが，このページでは単ピクセル画像を用いた罫線を使用しています。
|
単ピクセル画像とスタイルシートを組み合わせる
単ピクセル画像とスタイルシートを組み合わせると，ちょっと凝ったデザインのWebページを作ることができます。
ソースとWebページを見比べながら学びましょう。
「単ピクセル画像とスタイルシートを組み合わせる」のHTMLソース
「単ピクセル画像とスタイルシートを組み合わせる」のWevページ
|
解説
単ピクセル画像については特に変わった使用はしていませんが，スタイルシートを使って，表示させる位置を指定しています。ソースの中にも少しコメントを入れてありますが，最初の
<div style="position:absolute; left:50; top:80">
で，最上部の青線を表示させています。div はオブジェクトの表示位置を指定する普通のタグで，スタイルシートを使って画面の左から 50 ピクセル，上から 80 ピクセルの位置から表示させる設定をしています。画面の左上を原点にした座標を絶対座標といいます。
ソースの後半ではテキストを表示させています。座標を指定することによって，文字を重ねて表示させることができます。重なった部分では後から表示させた方が上になります。
「わかば」というテキストには陰（シャドウ）が付けてありますが，陰になる文字を右下に少しずらせて表示させた後に，本体のテキストを表示させれば出来上がります。
|
透明単ピクセル画像を使う
GIF や PNG 画像は，特定の色を透明化することができます。そこで画像ソフトで任意の色（たとえば白）による 1 × 1 ピクセルの画像を作り，その色を透明色に指定して保存します。この画像は透明ですから普通に表示させても見えませんが，テーブルのセルに背景色を指定し，その中で使用することによって特殊な効果を出すことができます。
次の例は直線でちょっと変ですが，虹です。
|
|
|
|
虹のソースを次に示します。
|
<table border="0" cellpadding="0" cellspacing="0">
<tr><td bgcolor="#ff0000"> <!-- red -->
<img src="dot_cl.png" width="400" height="5">
</td></tr>
<tr><td bgcolor="#ffa500"> <!-- orange -->
<img src="dot_cl.png" width="400" height="5">
</td></tr>
<tr><td bgcolor="#ffff00"> <!-- yellow -->
<img src="dot_cl.png" width="400" height="5">
</td></tr>
<tr><td bgcolor="#00ff00"> <!-- green -->
<img src="dot_cl.png" width="400" height="5">
</td></tr>
<tr><td bgcolor="#0000ff"> <!-- blue -->
<img src="dot_cl.png" width="400" height="5">
</td></tr>
<tr><td bgcolor="#4b0082"> <!-- indigo -->
<img src="dot_cl.png" width="400" height="5">
</td></tr>
<tr><td bgcolor="#800080"> <!-- purple -->
<img src="dot_cl.png" width="400" height="5">
</td></tr>
</table>
|
|
解説
各セルの背景色を虹の色で指定しながら，透明画像 dot_cl.png を横 400 ピクセル，縦 5 ピクセルで表示させています。
|
|
|
上のコラムの枠も透明単ピクセル画像を利用して作っています。
|
|
|
透明単ピクセル画像を使うと次のようなこともできます。
表
示
間
隔
を
調
節
す
る
|
解説
文字の間に透明単ピクセル画像によるつっかい棒
<img src="dot_cl.png" width="40" height="1">
などを入れてあります。width 属性で文字間隔を調節します。
|
