第19回　サムネール画像をCSSで整然と並べる

ある日、ふと碁盤の目のごとくサムネール画像をCSSで整然と並べたいと思った。悩むくらいならいっそテーブルでレイアウトしてしまいたいと考えがちだ。しかし、そう結論づけるのは早計だ。もっと簡単で管理しやすいレイアウトがCSSなら実現できるのだから。

余白を余り設けずに一気にサムネイルを並べる場合、余白とは別に画像の縁に対して白か、白に近いグレーなどの明度の高い無彩色を与える。サムネイルがカラフルだと、画像同士が近づいたとき色の対比効果で思った以上に画面全体が派手になってしまう。白い縁取りはこうした色の衝突を和らげる効果がある。

CSSとしてはあまりにも簡単で、説明する必要もないほどなのだが「テーブルの変わりにリストタグを使う」というタグ選びの発想転換が慣れていないと難しいかもしれない。
早速作例のHTMLをみてみよう。

単なるリストタグに、インラインイメージが含まれているだけの構成だ。このまま表示すると【図１】のように、ただ画像がリストとして縦方向にずらりとならぶだけなのは想像に難くない。そこで、CSSを使ってliの位置関係を制御する。

まずはliの親であるulに対し、リスト全体のブロック幅を定義する。この幅で横方向に並ぶ画像、つまりここではliの数が決まってくる。横方向に3つ、幅100ピクセルの画像を並べるとすれば、必要な幅は、各画像の間に設ける10ピクセルのマージンを足して330ピクセルだ。当然リストの行頭に付くビュレットも消しておこう。【ソース1】を参考にしてもらいたい。

さて、リストの配置だが、表示可能領域内で常に左側に配置されるよう、float:leftを指定した。次に各画像は左と下に余白10ピクセルを与える。これで画像が並んだとき、一見テーブルに配置したかのように理路整然と見える。各サイズ設定の関係は【図2】の通りで、ソースは【ソース2】のようになる。

サムネイルを増やしたければリストタグを追加するだけでレイアウトが可能だ。テーブルのようにセルを作らなくて良いので簡単。ちなみに画像周囲の枠線を付けないでレイアウトすると、【図3】のように、かなり印象が煩雑になるので注意しよう。

CSSと合わせて使うXHTMLは、制作時に使用する文字コードをUTF-8あるいはUTF-16にすることが推奨されている。しかしCSSはどうかというと、特に決められた文字コードはない。では何を使っても良いかというと、そうでもないようだ。もしXHTMLでUTFを使用しているのなら、CSSも合わせてUTFでコーディングしたほうがよい。そうしないと一部のブラウザでCSSが正しく認識されないこともある。HTMLとCSSの文字コードは揃えることが原則だ。

次回をお楽しみに!!