「dl・dt・dd」って実はすごい！CSS Gridでスマートなリストを作ろう
Web制作を始めたばかりの頃、`
- `や`
- `はよく使うけれど、「`dl`とか`dt`、`dd`って何に使えばいいの？」と迷うことはありませんか？
実はこの3つのタグ、「見出し」と「中身」というペア関係を表現するのにめちゃくちゃ優秀なんです。例えるなら、メニュー表の「料理名」と「お値段」、あるいはプロフィールページの「項目」と「回答」のようなものですね。
今回は、この「dl・dt・dd」という少し影の薄い（でも実は主役級の）タグを使って、CSS Gridという魔法の杖で、見栄えの良いグリッドレイアウトを作る方法を解説します。難しいコードは最小限に、一緒にステップを踏んでいきましょう！
—
1. まずは「dl・dt・dd」の役割を整理しよう
これらは「記述リスト（Definition List）」と呼ばれます。
- `
- `
- `
- `
: 「見出し」や「項目名」（Term）。 - `
- `
: 「中身」や「解説」（Description）。
HTMLを書くときは、こんなイメージです。
- 名前
- 田中 太郎
- 職業
- フロントエンド・エンジニア
これだけだと、ブラウザではただ縦に並ぶだけですよね。「これを横並びにして、スッキリ整列させたい！」という時に、CSS Gridの出番です。
—
2. CSS Gridで一瞬にして整列させる
CSS Gridを使うと、親要素（`
- `）に対して「あなたはグリッドですよ」と伝えるだけで、子要素たちが整列してくれます。
- `と`
- `を交互に書いているか？
- 基本は「dt・dd・dt・dd…」のペアです。もし`
- `だけが連続していても壊れることはありませんが、構造が崩れやすくなるので注意しましょう。
2. ブラウザのデフォルトスタイルに注意
- `
- `には、ブラウザによって最初から余白（マージン）がついていることがあります。もし「配置がズレるな？」と思ったら、CSSの最初で `dl { margin: 0; }` とリセットしてあげるとスッキリしますよ。
—
最後に：Web制作を楽しもう！
「dl・dt・dd」と「CSS Grid」の組み合わせは、プロフィールやスペック表、FAQ（よくある質問）など、日常のあらゆる場面で活躍する「鉄板の組み合わせ」です。
最初から完璧に書こうとしなくて大丈夫です。まずは今回のコードをコピーして、色を変えたり、幅を変えたりして遊んでみてください。「おっ、変わった！」という小さな成功体験が、一番の近道ですからね。
もし分からないことがあっても、それはあなたが一つレベルアップする前触れです。またいつでも聞きに来てくださいね！応援しています！
- 基本は「dt・dd・dt・dd…」のペアです。もし`
dl {
display: grid;
/ 左側（dt）を100px、右側（dd）を残り全部の幅にする設定 /
grid-template-columns: 100px 1fr;
gap: 10px 20px; / 縦の隙間を10px、横の隙間を20pxに /
}dt {
font-weight: bold; / 見出しを太字に /
}これだけで、左に「項目名」、右に「中身」が綺麗に並びます。`1fr`というのは「残りのスペースを全部埋めてね」という便利な単位です。これを知っているだけで、レイアウトの苦労が半分以下になりますよ！
—
3. スマホで見たら「縦並び」にしたい！
PCでは横並びがいいけれど、スマホの狭い画面では縦に並べたい……そんな時もCSS Gridなら簡単です。メディアクエリを使って、画面幅が狭いときだけ設定を上書きしてあげましょう。
/ PC用（画面幅が600px以上） /
@media (min-width: 600px) {
dl {
display: grid;
grid-template-columns: 150px 1fr;
}
}/ スマホ用（画面幅が600px未満） /
@media (max-width: 599px) {
dt {
margin-top: 15px; / 項目同士の間隔を少し空ける /
}
}スマホの時は`grid-template-columns`の設定を外すだけで、ブラウザは自動的に元の「縦並び」に戻ってくれます。余計なコードを書かなくていいのが、Gridの本当に素敵なところなんです。
—
4. つまずきやすいポイント：ここだけ気をつけて！
「あれ、思った通りに動かないな？」と思ったときは、以下の2点をチェックしてみてください。
1. `
- `
コメント