記述リストと聞いてもピンと来ない方もいらっしゃると思いますので、簡単に説明して実際に書いてみましょう。
記述リストとは項目とその項目に対する説明が1つになったリスト構造です。<dl></dl>で囲み、その中に項目を示す<dt></dt>と説明を示す<dd></dd>を記述します。dtとddは必ずセットになっており、どちらか一方だけ使用することはできません。
では下記コードを書いてみましょう。一部分だけ書きますので、皆様が書いているコードに付け加える形で記述していってください。
<h1>犬種人気ランキング</h1>
<p>犬の人気のある種類をランキング方式でお届けします。あなたの買っているペットは何位かな？</p>
<h2>犬の人気ランキング</h2>
<h3><strong>１位</strong>チワワ</h3>
<p><img src="images/076757.jpg" alt="チワワの写真" title="チワワ" style="width: 200px;"></p>
<p>昔CMでも話題になったチワワが第一位です。可愛いですもんね。人気の理由は割愛します。</p>
<dl>
<dt>特徴：</dt><dd>手足が細く、体高より体長がわずかに長い、立ち耳の超小型犬です。理想体重は1.5～3kgの間。</dd>
<dt>性格：</dt><dd>明るく陽気ですが勇敢な性格。非常に保守的で、家族と他人をはっきりと区別します。</dd>
</dl>表示して記述リストの部分を見てみましょう。
どうでしょう。dtがタイトルでddがその内容を表す記述になっていますね。このようにdl要素は２列の表で表現する場合に使用することが多いです。表を作る要素は他にもtable要素といったものや次に勉強するdiv要素があります。div要素は表を作る要素では無いのですが、デザインの関係上div要素で表を作る場合もあります。詳しくは次章で勉強しましょう。
まとめ
- 記述リストは項目と説明が組み合わせになったリスト構造
- dtのみやddだけでは使用できない
- ２列の表を表現する場合に使用する
コメント