dlタグでつくるフォトギャラリー

フォトギャラリーといえば、テーブルで作るものというイメージを持つ人が多いのでは無いでしょうか？ でもね、CSSを使えば他の方法でもできるんですよ。しかもこっちの方が管理が楽ときたもんだ。

テクニック使用後

HTMLはこんな感じになります。

<div id="gallery">
<dl>
<dt><img src="略" alt="0" width="160" height="120"></dt>
<dd class="name">Annie Earle</dd>
<dd class="comment">昨年の猛暑の生き残り</dd>
<dd class="date">4月26日</dd>
</dl>

<dl>
<dt><img src="略" alt="1" width="160" height="120"></dt>
<dd class="name">Swanley Yelow</dd>
<dd class="comment">暑さに強い、大きく垂れ下がり、形を整えにくい</dd>
<dd class="date">4月26日</dd>
</dl>

<dl>
<dt><img src="略" alt="2" width="160" height="120"></dt>
<dd class="name">ｳｲﾝﾁｬｲﾑ・ﾎﾜｲﾄ＆ﾎﾜｲﾄ</dd>
<dd class="comment">サカタ新品種</dd>
<dd class="date">5月4日</dd>
</dl>

以下並べたい枚数の分だけDLが続く

</div>

dlタグを使ってフォトギャラリーを作っていきます。dtタグに写真を、ddタグに写真のタイトルや、コメントをつけていきます。ddの数を増やせば、それだけ多くの情報を付加できるようになります。

dlタグを使うことで、写真とコメントをワンセットで扱うことができ、テーブルよりも構造の把握がしやすくなっています。

あらかじめddタグにclassを設定しておくことで、タイトルやコメントごとにスタイルを設定することができます。

galleryボックスは横に並べる写真の枚数を調整するために必要になります。削除はできません。

CSSとも絡んできますが、タイトルやコメントの文字数はあらかじめ10字以内、50字以内と設定しておく必要があります。 そうしないと、文字数が多くなったとき上手く段組ができないことがあります。

原寸大の写真を見せたい場合はAタグでリンクを張ってください。

スタイルシートはこんな感じになります。

/*widthは並べたい枚数にあわせて調整*/
#gallery{
    width:495px;
    background-color:#ffffff;
}
/*widthは写真の大きさにあわせて調整
font-sizeは固定した方が良い*/
dl{
    margin:0px;
    margin-right:3px;
    margin-bottom:1em;
    padding:0px;
    float:left;
    width:160px;
    font-size:14px;
    border-width:1px 1px 0px;
    border-style:solid;
    border-color:#7F2D00;
}
dt{
    margin:0px;
    padding:0px;
}
dd{
    margin:0px;
    padding:4px 0.5em;
    border-color::#7F2D00;
    border-bottom:1px solid;
}
/*heightは行数＋αにしておく。
コメントの文字数はあらかじめ決めておきましょう。*/
dd.name{
    height:2.2em;
}
dd.comment{
    height:3.4em;
    background-color:#f6eec9;
}
dd.date{
    height:1.2em;
}

スタイルシートのポイントはdlに設定したfloat:left;です。 これによって横並びを実現し、フォトギャラリーにように見せることができます。

#galleryのwidthは横に並ぶ枚数に絡んできます。値が大きければ5枚、6枚と並べることができます。

floatを使っているため、レイアウトが崩れやすくなっています。 崩れるのを最小限にするためfont-sizeはpxで固定します。

ddの各classに設定するheightの値は、行数によって調整します。1行なら1em、5行なら5emといった感じです。 ただ、それだけだとレイアウトが崩れてしまうことがあるので、0.2〜0.6程度の値をプラスして余裕をもたせてやります。

floatを使っているので、これの後に来る要素にはclear:both;を設定するのを忘れないでください。

---

使いこなすための＋α

今回のテクニックの売りはなんと言っても、写真とコメントをワンセットで扱えるところ。

新作ができたら、dlを追加するだけで勝手にギャラリーが充実していきます。

装飾用のスタイル設定にこだわって”魅せる”ギャラリーを作ってくださいな。

今回のテクニックを書くにあたり、きっかけと写真を提供してくださったKU様、ありがとうございました。

---