アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:ライブラリー

2007年10月 9日

定義リスト(dl、dt、dd)を使用してコーディングするときのための備忘録。

夢実現のアファメーションを実践する起業家にもっとも読まれているブログは?

定義リストの使い方。

最近コーディングするときに良く使う

dl=Definition List(定義リスト)。

内側に入る要素は

dt(Definition Term)
dd(Definition Description)

のふたつ。

一般的には用語とその説明文…とか、日付と内容…みたいなときに使うらしい。

んが。

でも…いまいち用途があいまいだったり。(汗)
(いまさらですんません。w)

ってことで、教えてもらったことや調べたことの備忘録でっす!

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

通常、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)を使うときは、その辺を気にしながら使うようにしよう。

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

押忍っ!!

この記事に関連する(かもしれない)書籍

 

投稿者 kuro : 2007年10月 9日 15:16 | ID:318

ページトップ△

トラックバック

このエントリーのトラックバックURL:
http://www.dokuritsu-kigyo.net/cgi-bin/mt/mt-tb.cgi/318

このリストは、次のエントリーを参照しています: 定義リスト(dl、dt、dd)を使用してコーディングするときのための備忘録。:

» HTML 定義リスト dl dt dd 要素 from GSTYLE Blog
ul li要素と共によく使用するリストです。 dl dt dd要素は、イメージとして辞書のような表現をするために使われます。 dl要素は、De... [続きを読む]

トラックバック時刻: 2008年6月27日 12:48

コメント

ページトップ△