バナー画像

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つずつ記述したサンプルコードが下記となります。

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>dd Sample</title>
</head>
<body>
  <dl>
    <dt>iPhone</dt>
    <dd>スマートフォンです。</dd>
  </dl>
</body>
</html>

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

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

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

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

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>dd Sample</title>
</head>
<body>
  <dl>
    <dt>iPad</dt>
    <dd>タブレットです。</dd>
    <dd>Apple社の製品です。</dd>
  </dl>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>dd Sample</title>
</head>
<body>
  <dl>
    <dt>マニラ</dt>
    <dt>セブ</dt>
    <dd>フィリピンの都市です。</dd>
  </dl>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>dd Sample</title>
</head>
<body>
  <dl>
    <dt>名前</dt>
    <dd>山田 太郎</dd>
    <dt>職業</dt>
    <dd>プログラマー</dd>
    <dd>Webデザイナー</dd>
    <dt>休日何をして過ごしていますか?</dt>
    <dd>一日中ゲームをしています。</dd>
  </dl>
</body>
</html>

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

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

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


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

ポテパンダの一言メモ

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

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

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

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>dd Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <dl>
    <dt>名前</dt>
    <dd>山田 太郎</dd>
    <dt>職業</dt>
    <dd>プログラマー</dd>
    <dd>Webデザイナー</dd>
  </dl>
</body>
</html>

style.css

dt {
  float: left;
  width: 50px;
}

dt::after {
  content: ":";
}

dd {
  margin-left: 50px;
}

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

まず要素を横並びに設定するため、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タグを使用した記述リストの使い方を理解しておきましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。