LINEで現役エンジニアに直接質問してみよう!登録無料

HTML dl、dt、ddタグで説明書きリスト(記述リスト)を作成する方法

この記事のまとめ

HTMLで説明リストを作る方法を解説します。
「リスト」と聞くとulやolを使うリストを思い浮かべるかと思いますが、そのリストとは使い方が異なります。
dl・dt・ddの意味や役割と記述方法から解説し、ulやtableとの使い分け方やデザイン方法までを解説します
この記事で、dl・dt・ddタグをマスターしましょう!

そもそも説明リストとは?

「説明リスト」なんて言われても、どういうものかイメージできないですよね。

簡単に言うと、「〇〇」という単語に対して「△△」と答えるようなリストをイメージしてください。ちょうど、名前と内容がセットになっている辞書のような形(構造)になっているのが説明リストです。

どのような場面で説明リストを使う?

説明リストはどのような場面で使われているのでしょうか?説明リストは名前と内容をセットで書かないといけないので、正直使い勝手はよくありません。しかし、以外と下記のような場面でよく使われています

  • 用語解説(辞書の名前と説明のような感じ)
  • 人物紹介(登場人物と役者の関係など)
  • FAQ(質問に対して解答など)
  • 新着情報の一覧表示
  • 会社で取り扱っているサービス名と内容

この記事の後半で解説しますが、説明リスト(<dl>)は名前が1つに対して複数の説明を設定することができます。<ul><table>でも代用できますが、説明リストの方がより適切でに表現できます。

そのような部分をイメージして探すと見つかりやすいですよ!

dl、dt、ddでの説明リストの作り方

説明リストを使うには3つのHTMLタグを使います。

  • <dl>(description list): 説明リスト
  • <dt>(description term): 説明する名前
  • <dd>(definition / description): 説明する内容/説明文

dlの中にdtとddを入れて入れ子にする

これらを使って、下記のように<dl>の中に<dt><dd>を入れ子にした構造になるように作りましょう!

ソースコード

<dl>
<dt>メロン</dt>
<dd>私が好きな果物の1つでもあります</dd>
<dt>りんご</dt>
<dd>栄養満点なので、疲れた時に食べるのがオススメです</dd>
<dt>バナナ</dt>
<dd>食物繊維が豊富なので腸内環境を整えるのに最適です</dd>
</dl>

ブラウザ表示

メロン
私が好きな果物の1つでもあります
りんご
栄養満点なので、疲れた時に食べるのがオススメです
バナナ
食物繊維が豊富なので腸内環境を整えるのに最適です

dtの内容をddが解説している関係にする

入れ子にした時、<dt>の下に配置された<dd>が内容を説明している構造になっているか注意しましょう!順番が大切です。

また、次章から解説しますが、<dt><dd>が連続で複数回続いていても大丈夫です。

dtが1つでddが複数

1つの用語に関する説明が複数になって場合もOKです!構造上は全く問題ありません。dtが1つに対してddは1つでなければいけないというルールはありません。

ソースコード

<dl>
<dt>メロン</dt>
<dd>私が好きな果物の1つでもあります</dd>
<dd>メロンは園芸分野では果菜になるんだよ</dd>
</dl>
メロン
私が好きな果物の1つでもあります
メロンは園芸分野では果菜になるんだよ

dtが複数でddが1つ

逆にdtが複数でddが1つの場合でも問題ありません。「dtの内容をddが説明する」という構造になっている限り、まとめて書くことができます。

ソースコード

<dl>
<dt>メロン</dt>
<dt>りんご</dt>
<dt>バナナ</dt>
<dd>日本のスーパーならどこでも置いてある果物の代表</dd>
</dl>
メロン
りんご
バナナ
日本のスーパーならどこでも置いてある果物の代表

dtが複数でddも複数

さらに、dtが複数でddも複数の場合もOKです。

ソースコード

<dl>
<dt>メロン</dt>
<dt>りんご</dt>
<dt>バナナ</dt>
<dd>日本のスーパーならどこでも置いてある果物の代表</dd>
<dd>置いてない方が珍しい</dd>
</dl>
メロン
りんご
バナナ
日本のスーパーならどこでも置いてある果物の代表
置いてない方が珍しい

もっと辞書的な意味での説明リストとして使うには?

先程からdlで解説しているのは辞書用語とその解説という意味合いが強く出ている使い方です。このような場面では、Google検索エンジンに対して「この<dl>は辞書的な使い方をしていますよー」と伝えることができます。

この辞書的な意味合いで作るリストを「定義リスト」と言います。逆に辞書的にも使うしそれ以外の形でも使うリストを「説明リスト」と言います。

<dl>
<dt><dfn>メロン</dfn></dt>
<dd>果実を食用にするウリ科の一年生草本植物の果実のこと</dd>
</dl>

定義リストを作成するには<dfn>というタグを使います。

MEMO
<p>実を食用にするウリ科の一年生草本植物の果実のことを<dfn>メロン</dfn>といいます。</p>

<dfn><dl>内部だけでしか使えないタグではありません。普通に<p><div>の中で使うことができます。

<dfn>で囲った部分は「定義句や文の文脈の中で定義している用語を示す」という意味合いに変化します。

参考: <dfn>: 定義要素

現場で使うdl、dt、dd実際の使用例サンプル

使う場面と使い方がわかったら、実際のHTMLではどんな内容を書いてあるのか学びましょう!

  • 用語解説(辞書の名前と説明のような感じ)
  • 人物紹介(登場人物と役者の関係など)
  • FAQ(質問に対して解答など)
  • 新着情報の一覧表示
  • 会社で取り扱っているサービス名と内容

の5種類に渡って実例紹介をします。

用語解説

<dl>
<dt>メロン</dt>
<dd>果実を食用にするウリ科の一年生草本植物</dd>
</dl>

先程からずっと解説してきたように、1つの説明する用語を<dt>で囲み、説明分を<dd>で囲んでいます。<dd>は複数個設定することができます。

人物紹介

<p>ハリーポッターの登場人物</p>
<dl>
<dt>ハリー・ポッター</dt>
<dd>ダニエル・ラドクリフ</dd>
<dt>ロン・ウィーズリー </dt>
<dd>ルパート・グリント</dd>
<dt>ハーマイオニー・グレンジャー</dt>
<dd>エマ・ワトソン</dd>
</dl>

キャラクター名を<dt>で囲み、俳優者名を<dd>で囲っています。

FAQ

<dl>
<dt>任天堂のHPにhタグが使用されていないのは何故でしょうか?</dt>
<dd>任天堂の場合、自社のハード(3DS とか Switch とか)からアクセスされた場合を考慮すると、HTML5が使えません。</dd>
<dd>同様に Sony も、PlayStation3 の Webブラウザが HTML5 に対応していません。</dd>
</dl>

引用: teratail.com

質問名を<dt>で囲み、それに対する解答を<dd>で囲っています。例のごとく<dd>は複数個設置OKです!

新着情報

<dl>
<dt>2020/3/18</dt>
<dd>5Gを体験できるスペースが追加されました。</dd>
<dt>2020/3/18</dt>
<dd>docomo 5Gサービス提供開始</dd>
</dl>

日付を<dt>で囲み、その日新着した記事を<dd>で囲っています。

会社で取り扱っているサービス名と内容

<dl>
<dt>HTML/</dt>
<dd>我社では高品質でお客様のニーズに合ったWebサイトを制作いたします</dd>
<dt>WordPress</dt>
<dd>WordPress案件も取り扱っています。まずはあなたのお話をお聞かせください。</dd>
</dl>

会社で取り扱っているサービス名とその内容を<dt> <dd>で囲っています。

他のタグとの使い分け方

<dl>を使わなくても<ul><table>でも代用可能な場面はたくさんあります。ですので、「これはどのタグで表現するのが適切なの?」という感じに迷ってしまう場面があるでしょう。

結論なら言ってしまうと、下記のような判断基準を参考にすればOKです。

タグ選びに迷った時に質問フロー

  • 単なる文章のリストで作られている?
    • はい: <ul>を使いましょう
    • いいえ: 次の質問へ
  • 表現方法を「表」にしたほうがわかりやすい?
    • はい: <tanle>を使いましょう
    • いいえ: 次の質問へ
  • 「リストの名前 + 説明文」でかける?
    • はい: <dl>を使いましょう
    • いいえ: 他のタグも検討しましょう

HTMLに正解はありません。ユーザーが実際にみてわかりやすければそれでOKなんです。

<table>だって、セルの結合を行えば<dl>と同じような見た目に出来ます。迷った時は<table>を使うようにすれば間違いありません。

dl、dt、ddのデザインを変える!

メロン
私が好きな果物の1つでもあります
りんご
栄養満点なので、疲れた時に食べるのがオススメです
バナナ
食物繊維が豊富なので腸内環境を整えるのに最適です

<dl><dt><dd>は、このような見た目で少しわかりにくいです。なので、CSSでわかりやすいようにデザインを整える方法を紹介します。

dtとddを横並びにする

メロン
私が好きな果物の1つでもあります
りんご
栄養満点なので、疲れた時に食べるのがオススメです
バナナ
食物繊維が豊富なので腸内環境を整えるのに最適です
dt {
  float: left;
  padding-right: 10px;
  font-weight: bold;
}
<dl>
<dt>メロン</dt>
<dd>私が好きな果物の1つでもあります</dd>
<dt>りんご</dt>
<dd>栄養満点なので、疲れた時に食べるのがオススメです</dd>
<dt>バナナ</dt>
<dd>食物繊維が豊富なので腸内環境を整えるのに最適です</dd>
</dl>

このように<dt><dd>が横並びになるようにしました。表形式に似ているので馴染み深く読みやすいですね!

dlとddを枠線で囲む

メロン
私が好きな果物の1つでもあります
りんご
栄養満点なので、疲れた時に食べるのがオススメです
バナナ
食物繊維が豊富なので腸内環境を整えるのに最適です
dt {
  float: left;
  padding: 4px 9px;
}
dd {
  margin: 0;
  padding: 4px 9px;
}
div {
  margin-bottom: 1.5em;
  border: 1px solid #999; 
  margin-bottom: 8px;
}
/*clearfix*/
div::after { 
   content: "";
   display: block;
   clear: both;
}
<dl>
  <div>
    <dt>メロン</dt>
    <dd>私が好きな果物の1つでもあります</dd>
  </div>
  <div>
    <dt>りんご</dt>
    <dd>栄養満点なので、疲れた時に食べるのがオススメです</dd>
  </div>
  <div>
    <dt>バナナ</dt>
    <dd>食物繊維が豊富なので腸内環境を整えるのに最適です</dd>
  </div>
</dl>

更に、グループ感を出すために、<dt><dd>のセットごとに枠線で囲みました。

<ul>など単純なリストの場合はその中に<li>しかいれることは出来ませんでした。しかし、<dl>の場合はその中に<div>などの別の要素も入れることが出来ます

このデザインのポイントは2つあります。

  1. グループ化のための<div>に対してborder: 1px solid #999;を設定し、枠線を設定しています。
  2. floatでのデザイン崩れを防ぐためにclearfixを使っています。

まとめ!

  • dl、dt、ddは説明リストを定義するタグ
  • 説明リストとは、名前と内容がセットになっている辞書のような形のリスト
  • 説明リストは用語解説、人物紹介、FAQ、新着情報、会社で取り扱っているサービス名と内容などで使われる
  • <dl>の中に<dt><dd>を入れて使う
  • <dt>に対する説明が<dd>になる構造をしている
  • <dt><dd>はいくつでも設定可能。だたし、順番には注意しよう
  • 辞書的な意味で使うなら<dfn>を使う方法もアリ
  • floatを使うと、表のようなデザインへの変更も可能!
この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。