“定義リスト（dl、dt、dd）を使用してコーディングするときのための備忘録。”という、夢実現のためのアファメーション。

定義リストのいくつかのサンプル。

通常、dtとddって一対一↓になってることが多いけど、そうじゃないといけないんすかね？
（サンプルのソースとかはけっこうそういう感じだよね。）

<dl>
<dt＞あああ</dt>
<dd＞あああの説明文</dd>
<dt＞いいい</dt>
<dd＞いいいの説明文</dd>
<dt＞ううう</dt>
<dd＞うううの説明文</dd>
</dl>

んで。

とりあえず疑問だったのが、ひとつのdtに対して複数のddってアリなのか？

たとえばこんな感じ。

<dl>
<dt>あああ</dt>
<dd>あああの説明文1</dd>
<dd>あああの説明文2</dd>
<dd>あああの説明文3</dd>
<dt>いいい<dt>
<dd>いいいの説明文1</dd>
<dd>いいいの説明文2</dd>
<dt>ううう<dt>
<dd>うううの説明文1</dd>
<dd>うううの説明文2</dd>
<dd>うううの説明文3</dd>
</dl>

また、ddの中になんかの要素…例えばul、liなんかを入れて良いのか…？

たとえばこんな↓感じ。

<dl>
<dt>はなもげら</dt>
<dd>
<ul>
<li>はなもげらに関連するテキスト1</li>
<li>はなもげらに関連するテキスト2</li>
<li>はなもげらに関連するテキスト3</li>
</ul>
</dd>
<dt>こまんたれぶー</dt>
<dd>
<ul>
<li>こまんたれぶーに関連するテキスト1</li>
<li>こまんたれぶーに関連するテキスト2</li>
</ul>
</dd>
<dt>ボンバヘッ！</dt>
<dd>
<ul>
<li>ボンバヘッ！に関連するテキスト1</li>
<li>ボンバヘッ！に関連するテキスト2</li>
<li>ボンバヘッ！に関連するテキスト3</li>
</ul>
</dd>
</dl>

結論としては…全部アリ！

んで。

いろんな人に聞いたり、さらに仕様書をチェックしたら…っつか、聞く前にチェックしろよって話ですが（汗）、上記のパターンは全部アリのようです。

W3Cの仕様によると、

W3C勧告私的日本語訳：10.3 定義リスト: DL、 DT、及びDD要素

となってました。

ちょっと注意が必要なのが、dt、dd各要素に含むことのできる要素について。

神崎さんのサイト

The web Kanzaki：リスト要素はブロックレベル

によると

「dtに含むことのできる要素はインライン要素に限られる。」
（つまり、単語やフレーズのみ。）

とあります。

逆に、ddにはインライン要素・ブロックレベル要素のどちらも含むことができるようなので、定義リスト（dl、dt、dd）を使うときは、その辺を気にしながら使うようにしよう。

まぁ、うんちくたれるほど知ってるわけじゃないので、あくまでも個人的な備忘録。
日々勉強っす。

押忍っ！！

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！