トップページ  > HTML5  > <dl>

★HTML5タグリファレンス

<dl> …… 定義・説明リストを表す
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5 Opera6Opera7Opera8Opera9Opera10

<dl>タグは、定義・説明リストを表す際に使用します。 <dl>~</dl>の中に、 <dt>タグで定義・説明される言葉を、 <dd>タグでそれに対応する説明を配置してリストを作成します。 例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用します。

■HTML4.01からHTML5へのバージョンアップによる変更点

<dl>タグのdlの由来ですが、HTML4.01ではdefinition list(定義リスト)の意味であることが示されていました。 HTML5でははっきりとは示されていませんが、description list(説明リスト)という程度の意味のようです。 また、 <dt>タグはdefinition term(定義される言葉)からdescription term(説明される言葉)へ、 <dd>タグはdefinition description(定義の説明)からdescription, definition(説明や定義)へと、微妙にニュアンスが変更されているようです。

これは、おそらく、dl要素は用語の定義に対してだけではなく、箇条書きに並べて何かを説明する際などにも使用できるという意図があるのではないかと思われます。 定義語リストを作成する場合には、<dt>~</dt>の中に配置する言葉を <dfn>~<dfn>で囲むことで、その言葉が定義語であることが明確になります。

HTML5では、<dl>~</dl>の中の<dt>と<dd>は、必ずしも一対一である必要はありません。 以下の使用例では、 一つの定義(dt)に対して複数の説明(dd)をしたり、 複数の定義(dt)に対して一つの説明(dd)をしています。

■使用例

HTMLソース

<dl>
<dt>作者</dt>
<dd>ジョン</dd>
<dd>ポール</dd>
<dd>ジョージ</dd>
<dd>リンゴ</dd>
</dl>

<dl>
<dt lang="ja"><dfn>色</dfn></dt>
<dt lang="en-US"><dfn>color</dfn></dt>
<dt lang="en-GB"><dfn>colour</dfn></dt>
<dd>可視光線の波長の長短によって人が視覚で感じ分けられる色覚・色刺激のこと。</dd>
</dl>
↓↓↓

ブラウザ上の表示

作者
ジョン
ポール
ジョージ
リンゴ
color
colour
可視光線の波長の長短によって人が視覚で感じ分けられる色覚・色刺激のこと。

<dl>~</dl>の中に複数のリストがある場合、 リストの配置順序が問われない場合もありますが、その順序が意味を持つ場合もあります。

HTMLソース

<p>ゲームの得点は以下の順序で計算されます。</p>
<dl>
<dt>金貨を獲得している場合</dt>
<dd>金貨一枚につき10ポイント加算されます。</dd>
<dt>銀貨を獲得している場合</dt>
<dd>銀貨一枚につき1ポイント加算されます。</dd>
<dt>枚数に関わらず、金貨と銀貨の両方を獲得してる場合</dt>
<dd>ボーナスポイントとして20ポイント加算されます。 </dd>
<dt>それ例外の場合</dt>
<dd>ポイントは加算されません。</dd>
</dl>
↓↓↓

ブラウザ上の表示

ゲームの得点は以下の順序で計算されます。

金貨を獲得している場合
金貨一枚につき10ポイント加算されます。
銀貨を獲得している場合
銀貨一枚につき1ポイント加算されます。
枚数に関わらず、金貨と銀貨の両方を獲得してる場合
ボーナスポイントとして20ポイント加算されます。
それ例外の場合
ポイントは加算されません。
▲ページ先頭へ
トップページ  > HTML5  > <dl>
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ