HTMLの記述(定義)リスト dl・dt・ddタグの基本的な使い方を理解しよう!
  • facebookページ
  • twitterページ
  • 2020.02.28

    HTMLの記述(定義)リスト dl・dt・ddタグの基本的な使い方を理解しよう!

    HTML4以前では「定義リスト」と呼ばれており、HTML5からは「記述リスト」と呼ばれる「dl」「dt」「dd」タグの使い方について、HTML初心者の方にはあまり馴染みがないのではないでしょうか。

    本記事では、プログラマーとして上手く活用したいHTML5での「dl」「dt」「dd」タグの使い方についてご紹介していきたいと思います。

    HTML5の記述リスト dl・dt・ddタグって何?


    HTML5では「記述リスト」と定義されたタグの組み合わせがあり、「dl」「dt」「dd」タグを使用して言葉や文章の「定義」または「説明」を記述することが可能です。

    それぞれのタグの定義について確認しておきましょう。

    dlタグ

    HTML5では、dlタグを使用して「記述リスト」を作成します。

    これから説明する言葉や文章の枠組みを作るためのタグです。

    dlタグの中に1つ以上のdtタグとddタグを組み合わせて、記述リストを作成していきます。

    dtタグ

    dtタグの役割として「ddタグで説明する対象の”文言”または”文章”」を記します。

    dlタグで作成した「記述リスト」の中で説明する「言葉」または「文章」を宣言する意味合いです。

    dtタグの言葉に対して後述するddタグで具体的な内容を説明していきます。

    ddタグ

    ddタグの役割として「dtタグで宣言した言葉や文章の意味を定義(説明)する」役目を果たします。

    dtタグで宣言した言葉に対して2つ以上の説明がある場合、ddタグを複数定義することも可能です。

    また反対に、ddタグ1つで複数のdtタグの説明を一括して行うことも可能です。

    HTML5でのdl・dt・ddタグの使い方をサンプルコードで確認しよう


    では実際にサンプルコードを掲載しながらdl・dt・ddタグの使い方について解説していきたいと思います。

    HTML5記述リストの基本構成

    HTML5で記述リストを作成する最も基本的な構成としてdl・dt・ddタグを1つずつ記述したサンプルコードが下記となります。

    「iPhone」という言葉を「スマートフォンです。」と説明しているシンプルな記述リストです。

    サンプルコードをブラウザで表示した結果は下記のようになります。

    1つのdtタグに対して複数のddタグを設定する

    次に1つのdtタグで定義した言葉に対し、複数の説明をddタグで記述してみましょう。

    iPadという言葉に対し、ddタグで2種類の説明を記述しています。

    2つ以上のdtタグに対して1つのddタグで説明する

    2つ以上のdtタグで定義した言葉に対し、1つのddタグで説明出来るケースでは下記のように記載します。

    サンプルでは「マニラ」「セブ」をまとめて、「フィリピンの都市です。」と説明している記述リストです。

    複数のdt・ddタグを組み合わせたパターンを確認しよう

    次に複数のdt・ddタグを組み合わせたパターンを確認してみましょう。

    サンプルでは人物のプロフィールのような形で記述リストを作成してみました。

    dt・ddタグはいくつでも記述することが可能で、サンプルのように言葉や文章を組み合わせた記述リストの作成も可能です。

    HTML5の記述リストdl・dt・ddタグの見た目を整えよう


    HTMLで記述リストはデフォルトではサンプルで添付してきた画像のように言葉や文章と説明文が改行した状態で表示されています。

    ポテパンダの一言メモ

    HTML4では「compact属性」を利用することで、dtタグとddタグを横並びにすることが出来たのですが、HTML5では「compact属性」が廃止されたため、CSSで横並びを定義する必要があります。

    CSSでの横並び定義サンプルコード

    実際にサンプルコードでCSSでの横並び定義を確認してみましょう。

    index.html

    style.css

    サンプルコードを実際にブラウザに表示すると下記のようになります。

    まず要素を横並びに設定するため、dtタグに対して「float:left」を指定しています。

    「width:50px」に関してはddタグの頭を揃えるためで、dtタグで定義された文字列の長さに関わらず同じ幅を確保するように設定しています。

    ddタグに関しても頭文字を揃えるために、「margin-left」でdtタグに指定した横幅と同じ値を設定する必要があります。

    「dt::after」に関しては、言葉と説明文の境目を分かりやすくするために、dtタグの後ろに「:」を必ず設定するよう記述しました。

    さいごに: HTML5の記述リストdl・dt・ddタグの使い方を覚えて他のプログラマーに差を付けよう


    本記事では、HTML5から記述リストと定義されたdl・dt・ddタグの使い方についてご紹介してきました。

    記述リストに関しては、現場で働くプログラマーの方でも機会が少なく、使い方を知らなかったという方も多くいらっしゃいます。

    ulタグを使用して無理やり記述リストのように記載している方や、なんでもtableタグで作成してしまう方もいらっしゃいますが、より適切なHTMLコーティングが出来るように、dl・dt・ddタグを使用した記述リストの使い方を理解しておきましょう。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE