HTMLの「dl・dt・dd」を攻略！用語と説明の複雑な関係を整理しよう
Web制作を始めたばかりの皆さん、こんにちは！
HTMLのリストタグといえば`
- `や`
- `
- ` (Definition List):
- `
- ` (Definition Term):
「用語」や「見出し」。 - `
- ` (Definition Description):
「説明」や「中身」。 - dt（りんご）： 商品名
- dd（150円）： 価格
- `に対して`
- `を複数並べればOKです。
- 青森県産りんご
- 価格：150円
- 産地：青森県弘前市
ポイント: ひとつの`
- `に対して、複数の`
- `が紐付いていると解釈されます。これだけで、「この用語にはこれだけの情報があるんだな」とブラウザやスクリーンリーダーが理解してくれます。
—
ケース2：複数の用語に、ひとつの説明があるとき
今度は逆です。「名称は違うけど、内容は同じ」というケース。例えば「PC」と「パソコン」のように、呼び方は違えど説明は一緒、という場合ですね。
- PC
- パソコン
- パーソナルコンピュータの略称。個人利用を目的としたコンピュータのこと。
ポイント: こう書くことで、「PCもパソコンも、この説明を指しているんだね」と伝わります。無理やりひとつの`
- `に詰め込む必要はありません。素直に並べてあげましょう。
—
なぜこれが「アクセシビリティ」に大事なの？
「見た目さえ整っていればいいじゃん！」と思うかもしれませんが、Webの世界には「目で見ている人」だけではありません。
視覚障害のある方が使うスクリーンリーダー（画面読み上げソフト）は、HTMLの構造を頼りに情報を伝えます。もし、`
`とCSSだけで無理やりリストっぽく作った場合、ソフトはそれが「用語」なのか「説明」なのか判断できません。でも、今回のように`dl・dt・dd`を正しく使うと、ソフトは「これは用語です。次に説明を読み上げます」と、文脈を汲み取って正確に伝えてくれるんです。これぞまさに、Webの優しさですね。
—
現場のちょっとしたコツ：CSSとの付き合い方
最後に、現場でよくある悩みをひとつ。
「dtとddを横並びにしたいんだけど、どうすればいい？」最近ではFlexboxやGridを使うのが主流です。あまり難しく考えず、まずはシンプルにこう試してみてください。
/ dl全体を横並びの土台にする /
dl {
display: grid;
grid-template-columns: 100px 1fr; / 左を固定幅、右を残り全部に /
gap: 10px;
}dt {
font-weight: bold; / 見出しらしく太字に /
}—
まとめ：難しく考えすぎなくて大丈夫！
- `
- `（用語）と`
- `（説明）は、お互いにいくつあってもいい。
- HTMLの構造は、人間が見たときの「関係性」をそのまま反映させるだけで正解になる。
「こう書いたら変かな？」と迷ったら、「これ、辞書で引いたときにどう書いてあるかな？」と想像してみてください。それが一番の近道です。
HTMLは、あなたの言葉を誰かに伝えるための大切な橋渡し役です。構造を大切にすることは、未来の読者やユーザーへの思いやりでもあります。ぜひ、今日のコードをあなたのサイトでも試してみてくださいね！
また次の記事でお会いしましょう。ハッピーコーディング！
- `
- `が有名ですが、少し特殊な立ち位置にあるのが`
- `タグ（定義リスト）
大丈夫ですよ。今日は、この`dl・dt・dd`の「人間味あふれる関係性」を、身近な例えを交えて紐解いていきましょう！
—
dl・dt・ddの役割を「お買い物」で例えると？
まず基本をおさらいしましょう。
例えば、スーパーで「りんご」を買うときのレシートをイメージしてみてください。
これが基本形ですが、現実の世界にはもっと複雑なパターンがありますよね。
—
ケース1：1つの用語に、複数の説明があるとき
「この商品、説明が長くて2行に分けたいな」とか「価格のほかに産地も書きたいな」というケースです。この場合、`
コメント