## <dl> - 定義リスト

トップ > HTMLリファレンス > <dl>

#### ■ 概要

項目 | 説明
--- | ---
形式 | <dl>〜</dl>
サポート | H2〜H4s〜 / e2〜 / N2〜 / i1〜
タグの省略 | 開始タグ：必須、終了タグ：必須
包含可能要素 | dt / dd

#### ■ 説明

dl は Definition List（定義リスト）の略です。<dl>〜</dl> の間に、<dt>（Definition Term）で定義する用語を、<dd>（Definition Description）で用語の説明を行います。

#### ■ 属性

【固有属性】

属性 | 意味
--- | ---
| compact | H2-H4t/e4/N2-N4。リストを極力コンパクトな形式で表示します。下記参照。

【一般属性】

属性 | 意味
--- | ---
class=class | H4s/e3/N4。クラスを指定します。
dir=dir | H4s/e5/N6。文字の表示方向を指定します。
id=id | H4s/e3/N4。ID を指定します。
lang=lang | H4s/e4/N6。言語を指定します。
style=style | H4s/e3/N4。スタイルシートを指定します。
title=title | H4s/e4/N6。タイトルを指定します。
IE拡張属性 | 他にもIEで拡張された属性が指定可能です。

#### ■ 使用例

HTMLソース
    <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language の略で・・・</dd>
    <dt>WWW</dt>
    <dd>World Wide Web の略で・・・</dd>
    </dl>

ブラウザ表示例
HTML HyperText Markup Language の略で・・・ WWW World Wide Web の略で・・・

#### ■ コンパクト表示

compact 属性を指定すると、項目名が短い場合、説明が自動的に項目名と同じ行に表示されるようになります。

ブラウザ表示例
DC DreamCast の略で・・・ Dynamic HTML HTML や JavaScript などの技術を用いて・・・

#### ■ スタイルシートとのくみ合わせ

項目名を目立たせたい場合は、スタイルシートを用いると便利です。例えば、<head>〜</head> の間に次のように指定することにより、すべての項目名を太字で、前の行と 1行スペースを空けて表示することができます。

    <style type="text/css">
    <!--
    DT { margin-top: 1em; font-weight: bold; }
    -->
    </style>

ブラウザ表示例
HTML HyperText Markup Language の略で・・・ WWW World Wide Web の略で・・・

#### ■ 注意

</dt> や </dd> は省略可能ですが、Netscape Communicator 4.0 などでスタイルシートを使用する場合は問題が生じるようです。例えば、下記の例では「ううう」の部分まで赤くなってしまいます。</dt> や</dd> を省略しなければ回避できます。

    <dl style="color:red">
    <dt>あああ
    <dd>いいい
    </dl>
    ううう

#### ■ 関連項目

<dt>、 <dd>

Copyright (C) 1996-2002 杜甫々
初版：2000年10月9日、最終更新：2002年7月27日
http://www.tohoho-web.com/html/dl.htm