【入門編】dlにおける複数のdtとddの対応関係 – HTML実践ガイド

HTMLの「dl, dt, dd」をマスターしよう！複雑な関係性もこれで怖くない

Web制作を始めたばかりの皆さん、こんにちは！

HTMLのリストといえば、`

`（箇条書き）や `
`（番号付きリスト）はよく使いますよね。でも、ちょっと影が薄いけれど実はすごく賢いタグがあるんです。それが `

`、`

`、`

` です。

これらは「説明リスト」と呼ばれます。名前の通り、何かを説明するときに使うのですが、いざ書こうとすると「1つの用語に説明が2つある時はどうすればいいの？」「逆に、同じ説明を複数の単語で共有したいときは？」と悩んでしまうこと、ありますよね。

大丈夫です。実はこれ、身近な「辞書」や「お買い物リスト」をイメージするだけで、驚くほどスッキリ理解できるんですよ。一緒に紐解いていきましょう！

—

そもそも、dl・dt・ddって何者？

まずは役割を整理しましょう。

• `

  ` (Description List)：リスト全体を包む「箱」です。「これから説明リストを始めますよ！」という宣言ですね。

• `
  ` (Description Term)：「用語」です。辞書の見出し語をイメージしてください。
• `
  ` (Description Details)：「説明」です。その用語に対する詳しい解説ですね。

この3つでセットを作るのが基本です。

—

パターン1：1つの用語に、複数の説明をつけたい！

例えば、あるメニューを説明するときに「価格」と「アレルギー情報」の両方を書きたい場合です。こういう時は、1つの `

` に対して、複数の `

` を重ねればOKです。

特製ランチセット

価格：1,200円

アレルギー：卵、小麦、乳製品を含みます

「1つの見出しの下に、説明の段落が2つ並んでいる」という感覚ですね。これならHTMLも素直に構造を理解してくれます。

—

パターン2：複数の用語に、同じ説明を共有したい！

「カフェラテ」と「カフェオレ」、どちらも「ミルクを使ったコーヒー飲料です」と説明したい時、同じ文章を何度も書くのは面倒ですよね。そんな時は、`

` を複数並べてから、1つの `

` を置くことができます。

カフェラテ

カフェオレ

どちらもミルクを使ったコーヒー飲料ですが、ベースとなるコーヒーの抽出方法が異なります。

まるで「これらの言葉は、この説明で一括管理！」と言っているようなもの。コードも短くなりますし、修正する時も1箇所直すだけで済むので、メンテナンス性も抜群です。

—

つまずきポイント：見た目が崩れる時は？

ここが一番の悩みどころかもしれません。「`

` が右にズレすぎてレイアウトが崩れる！」という経験はありませんか？

実は、`

` にはデフォルトでブラウザが勝手につける「インデント（余白）」がある場合が多いんです。でも、大丈夫。CSSでこう指定すれば、自分の思い通りにコントロールできます。

dl {
margin: 0;
padding: 0;
}

dt {
font-weight: bold; / 用語を強調 /
}

dd {
margin-left: 20px; / 好きな幅に調整して、スッキリさせましょう！ /
}

「CSSで見た目を整える」というのは、HTMLの構造を壊すことではなく、HTMLという「骨組み」に「お化粧」をしてあげる作業です。だから、HTMLの構造（`

`を並べる、`

`を並べる）さえ正しければ、見た目は後からいくらでも綺麗にできますよ。

—

まとめ：難しく考えすぎないで！

`

`, `

`, `

` は、「言葉」と「その説明」のペアを作るための道具です。

1. 用語が1つで説明が複数なら：`

` 1つに対し、`

` を並べる。
2. 用語が複数で説明が同じなら：`

` を並べてから、`

` を置く。

このルールさえ覚えておけば、もう怖いものはありません。最初は少し不思議な形に見えるかもしれませんが、書いているうちに「あ、これって辞書と同じ構造だな」と手に馴染んでくるはずです。

Webの世界は広大ですが、こうした小さな積み重ねが、読みやすくて誰にとっても優しいWebサイトを作る近道になります。また明日から、ぜひ自信を持ってコードを書いてみてくださいね！応援しています！