Your Search Results

    dl 要素

    概要

    HTML の 説明リスト要素<dl>)は、用語とその説明のセットのリストを表します。 一般的な使用例として、用語集の作成やメタデータ (キーと値のペアのリスト) の表示が挙げられます。

    HTML5 より前では、<dl> は定義リスト (Definition List)として知られていました。

    属性

    他の全ての要素と同様に、この要素はグローバル属性を持ちます。

    compact
    定義語句と定義説明の同行表示を強制する。Internet Explorer のみで動作。

    一つの定義語に対する一つの定義説明

    <dl>
      <dt>Firefox</dt>
      <dd>A free, open source, cross-platform, graphical web browser
          developed by the Mozilla Corporation and hundreds of volunteers.</dd>
    
      <!-- other terms and definitions -->
    </dl>
    

    以下の様に出力されます。

    Image:HTML-dl1.png

    複数の定義語に対する一つの定義説明

    <dl>
      <dt>Firefox</dt>
      <dt>Mozilla Firefox</dt>
      <dt>Fx</dt>
      <dd>A free, open source, cross-platform, graphical web browser
          developed by the Mozilla Corporation and hundreds of volunteers.</dd>
    
      <!-- other terms and definitions -->
    </dl>
    

    以下の様に出力されます。

    Image:HTML-dl2.png

    一つの定義語に対し、複数の定義内容をあてる

    <dl>
      <dt>Firefox</dt>
      <dd>A free, open source, cross-platform, graphical web browser
          developed by the Mozilla Corporation and hundreds of volunteers.</dd>
      <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
          is a mostly herbivorous mammal, slightly larger than a domestic cat
          (60 cm long).</dd>
    
      <!-- other terms and definitions -->
    </dl>
    

    以下の様に出力されます。

    Image:HTML-dl3.png

    複数の定義語に対し、複数の定義内容をあてる

    これまでの例を組み合わせることで、複数の定義語に対し、複数の内容を定義することもできます。

    メタデータ

    説明リストは、キーと値のペアのリストであるメタデータの表示にも役立ちます。

    <dl>
        <dt>Name</dt>    
        <dd>Godzilla</dd>
        <dt>Born</dt>
        <dd>1952</dd>
        <dt>Birthplace</dt>
        <dd>Japan</dd>
        <dt>Color</dt>
        <dd>Green</dd>
    </dl>
    

    ヒント: CSS3 でキーとタイのセパレータを定義すると便利でしょう。例: dt:after {content: ": ";}

    注意

    この要素の子となる dd 要素は、殆どのブラウザで字下げ表示のデフォルトスタイルを持っていますが、意味を伴わない、単なる自下げの目的でこれを使用するのは誤りです。他の特徴的なスタイルを持つ要素に関しても同様です。HTML タグはあくまで、文書の各部位の意味を表すものです。

    また、デフォルトスタイルは全て CSS で変更可能です。例えば dd 要素のインデントを変更したい場合は、margin プロパティなどを使用すればよいでしょう。

    仕様

    仕様書 策定状況 コメント
    WHATWG HTML Living Standard Living Standard  
    HTML5 勧告候補  
    HTML 4.01 Specification 勧告  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート 1.0 (有) (有) (有) (有)
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート (有) (有) (有) (有) (有)

    関連情報

    添付ファイル

    ファイル サイズ 日時 添付者:
    HTML-dl1.png
    1767 バイト 2006-08-06 16:02:04 PablO
    HTML-dl2.png
    2207 バイト 2006-08-06 16:03:02 PablO
    HTML-dl3.png
    3430 バイト 2006-08-06 16:04:04 PablO
    Canvas_moon.png
    278 バイト 2005-11-15 21:24:45 KamielMartinet
    Canvas_picture_frame.png
    32212 バイト 2005-09-16 18:37:08 KamielMartinet
    Canvas_quadratic.png
    2924 バイト 2005-09-20 18:35:07 KamielMartinet

    Document Tags and Contributors

    Contributors to this page: ethertank, yyss
    最終更新者: yyss,