このブログは、40才を過ぎた妻子あるオヤジが、無謀にもこの歳からWebデザイナーを目指し独学でWebを学習する奮闘記、そしてここまで歩んできた備忘録です。ウェブのウの字も知らないド素人が手探り状態で始めたのが2010年11月のこと。果たして挫折はいつ訪れるのか・・・

まずは定義リストのおさらい。こうマークアップした定義リストの場合・・・こう表示されます。(スタイルシートでdtとddに色を付けています)

ワンワン=イヌというようにお互いを関連づけたりするときに使用します。

定義する対象に<dt>
その説明が<dd>
それを定義リスト<dl>でマークアップします。

 

 

では、このような画像にその説明がテキストで表示されている場合はどうでしょう。

この場合もワンワン=イヌと同じように画像とテキストが関連づいているものなので、定義リストでマークアップしてみてはいかがでしょうか。
<p>タグでただ並べるよりは意味を持たせられると思います。

ただし、定義リストでマークアップをすると、通常下のようにdd要素がインデント(字下げ)されてしまい画像とテキストが変にズレてしまいます。その解消にはスタイルシートで margin-left を適用させます。
0pxまたは0emで左揃えになります。

今回の例では

dd {margin-top:5px; margin-left:10px}

としてあります。

 

応用して「写真とキャプション」「バナーとテキスト」などでも使用できますね。

 

Comments (0)