ブログの写真の一覧ページをリニューアルしてみた。ブログを始めた頃（４年前）に、<table> レイアウトで作ったものだったので、遅ればせながらCSSを使ったレイアウトに。画像とキャプション付きできれいにレイアウトするために、いつも忘れがちなポイントがいくつかあるのでまとめておく。リニューアル後の、ページはこんな感じになりました。Mac Safari, FireFox、windows IE6 で確認したところOKそう。
サンプルページ : 海・波・ビーチ・夕日の写真
まず、画像のサムネイルとタイトル（キャプション）は、以下のようなHTML構造に。
<div class="grid">
<div class="section">
<a href=""><img width="120" height="120" src="/icon/IMG_5962.jpg" alt="2007/09/01" /></a>
<div class="title">
<h3><a href="">台風８号の伊豆サーフィン</a></h3>
</div>
</div>
// 写真の数だけ上記の div の繰り返し
</div>
<div class="grid">の内側に、画像とキャプションを<div class="section">でくくって、繰り返し記述します。そのdivをfloatで横に並べて、サムネイルを一覧表示します。最終的なCSSはこんな感じになりました。
以下に気をつけたポイント。
画像を横に敷き詰めて並べる
これは単純に、float で流し込んであげればよいだけ。
div.grid
{
clear: both;
}
div.grid div.section
{
float:left;
height: 160px;
width: 150px;
padding:6px 0px 0px 0;
text-align: left;
}
キャプションの幅を画像にそろえて、余分な文字を表示しない
画像のタイトルの長さは、ブログの記事によって様々なので、そのまま表示すると以下のように統一感がなくなってしまう。
そこでまずは、改行をしないようにして、さらに、はみ出した部分を隠す。
overflow: hidden; white-space: nowrap;
また、画像の幅に合わせてタイトル文字のwidthを指定しつつ、文字は適度な余白をpadding であけて読みやすくしたい。ただし、IE6ではボックスモデルにおけるwidthの解釈が異なるケースがあるので、<h3>の外側に、<div class="title">というdivをもう一つ用意して、そちらでwidthなどを指定するようにする。ついでにopacityとalphaで背景を透明にしてみた。
キャプション部分のCSSはこんな感じに。
div.grid div.section div.title
{
margin: 0;
padding: 0;
width: 122px;
height: 1.5em;
background-color: #ffffff;
overflow: hidden;
white-space: nowrap;
opacity: 0.5;
filter: alpha(opacity = 50);
}
div.grid div.section div.title h3
{
margin: 0 3px 0 3px;
color: #777777;
font-size: 0.9em;
text-align:left;
font-weight: normal;
}
画像とキャプションとの間に隙間ができるのを防ぐ
画像とキャプションのボックスにmargin=0などを指定して、FireFox やSafari だと隙間がなくみえるが、IEだと微妙に隙間ができてしまう。こんな感じ。
これは、img タグにvertical-align を指定してあげればOK。
div.grid div.section img
{
margin: 0;
padding: 0;
vertical-align: bottom;
border: 1px solid #ffffff;
}
ひとまず、これぐらいを気をつけつつCSSが書き終わりました。
このHTML、CSSにあわせて写真記事の一覧ページをリニューアルしてみた。次のステップとしては、長いタイトルを onmouse したらツールチップで表示するとかをやってみようかな。
ブックマーク & Twitter & はてなスター
コメント