下にあるのは以前このコンテンツを置いていたHPで使用していたバナーです。

ただこの二つ、実はどこかが違います。
その違いはなんでしょう？

Another

Laboratory

表示環境の問題で見た目が違う、という事もあるかもしれませんが、
一般的な環境ではどちらもそっくり同じに見えるはずです。

実はこの二つ、上が普通に画像ファイルを呼び出して表示しているバナー、
下は、HTML内のHTML記述で直接描かれているバナーです。
下の画像に見えるものは画像ファイルではないのです。
（選択してみようとすればわかると思います。）

さて、この画像もどきはどのように作られているかですが、
このコンテンツの題名を読めばわかる通り（笑）、主にテーブルでできています。

tableタグで四角い小さなマスを作り、そのマスに背景色を指定することで、
ドット絵のような原理で画像のようなものを作ることができるのです。

その最も基本的な例を下に用意してみました。
この例は、テーブルで４つに区切られたマスに、
背景色で４種類の色を指定して作られています。
また、それぞれのセルに全角スペースを入れ、
それぞれのセルに、高さ30ピクセル幅30ピクセルの指定をしています。
（この全角スペースは自分の環境では入れなくても正常に表示できたのですが、
一部の人から表示がまともにされないとの報告を受けたので、
ここではこの方法を使うものとして説明していきます。）

また、この時テーブルにつける属性として、
cellpadding=0とcellspacing=0という設定をしておかないと、
指定したような正確な30ピクセルのマスにはなりません。
（この理由については、cellpadding、cellspacingと言う属性について
調べてもらえばわかると思います。）

次に、今度は少し小さいサイズでマスを作ってみましょう。
今度は高さ5ピクセル、幅5ピクセルと言う指定をして3×3のマスを作ってみました。
…変ですね。
確かに大きさは5ピクセル四方に指定したはずなのに、
マスが縦長になってしまっています。

これは、実はフォントサイズに問題があります。
セルの中に入れている全角スペース、
どうやらこれのフォントサイズが影響してしまうようです。
横方向はいくらでも小さくできるようですが、
縦方向は普通に指定したのでは一定の大きさ以下にする事は出来ないのです。

このHTML内では、テーブル内の文字のフォントを12ピクセルと指定してあるため、
セルの中に普通に全角スペースを入れたのでは、
縦12ピクセル以内のマスを作ることはできません。

ではどうすればいいのか？
…まあ結論から言ってしまえば簡単です。
全角スペースのフォントサイズを小さくしてやればいいわけです。
と言うわけで、上の図のセルの中の全角スペースのフォントサイズを
セル幅である５ピクセルより小さく（ここでは４ピクセル）にして、
改めて書き直ししてみました。
（このような小さなサイズのフォントは、
スタイルシートを使用することで作る事が出来ます。）


今度はしっかりと表示できていると思います。
このような小さなマスを作りたいときはスタイルシートが必須になるわけですね。

---

さて、上のマスを見て、これぐらいの小さなマスがテーブルで作れるとなれば、
なんかドット絵ぐらいなら物理的には作るのが可能な感じがしてきませんか？
（「そんな面倒なもん作れるか！」とか言われたら終わりですが（笑））

ここまでのテクニックが理解出来たならば、後は応用（と根性）次第で、
最初に表示したようなバナー画像ぐらいのものはなんとか出来ると思います。
ちなみに一番上で紹介したバナーは、縦20マス、横41マス、
最小サイズのセルは2ピクセルで作られています。
また、中心部には大き目のセルを用意し文字を入れています。

最後に、もしかしたら役に立つかもしれないテクニックとして、
上のバナー画像製作で使っているちょっとしたテクニックを簡単に紹介します。
詳しいことに関してはソースを見てみてください。

・スタイルシートで、フォントサイズと同時に背景色定義もしてしまう。
（これをやると明らかに記述の手間が省けます。また容量削減にもなります。）

・テーブルのセルの連結によるセル数の削減
（これをやると色を指定する回数が減ります。考えるのに多少時間がかかりますが、
容量削減にも繋がりますし、ソースの見た目もすっきりします。）