【実務・中級編】記述リスト(dl)のレイアウトパターン – HTML実践ガイド

しかし、`

` の厄介なところは「ブラウザによってデフォルトの余白がバラバラ」であり、「`dt` と `dd` を横並びにしたい」という要件が来た途端に、多くのエンジニアが沼にハマることです。今日は、FlexboxとGridを使い分け、実務で「これさえあれば困らない」という鉄板のレイアウトパターンを解説します。

—

なぜ今さら ` ` なのか？

ブラウザのレンダリングエンジンは、`

` を「用語（`dt`）と説明（`dd`）のペア」として意味的にグループ化しています。アクセシビリティの観点でも、スクリーンリーダーはこれらを明確な関連性を持って読み上げます。

重要なのは、「`dl` 直下には `div` で囲んでも良い」というHTML5の仕様です。かつては `dt` と `dd` を兄弟関係で並べるのが一般的でしたが、今の現場ではグループごとに `

` で括るのが、CSSでレイアウトを制御する上での「大人の嗜み」です。

—

パターン1：Flexboxで「左固定・右可変」のレイアウト

まずは最も汎用性の高い、左側に用語、右側に説明というオーソドックスなレイアウトです。

/ dlをflexコンテナにするのではなく、ラッパーのdivに指示を出すのがコツ /
.definition-list {
display: flex;
flex-direction: column;
gap: 16px; / 各行の隙間を確保 /
}

.definition-item {
display: flex;
align-items: flex-start; / 説明が長くなった時に先頭で揃える /
}

.dt {
flex: 0 0 120px; / 用語の幅を固定 /
font-weight: bold;
}

.dd {
flex: 1; / 残りのスペースを全て埋める /
margin: 0; / ブラウザ標準のmarginをリセット /
}

このアプローチの利点は、`align-items: flex-start` を使うことで、説明文が複数行になってもレイアウトが崩れない点です。初心者ほど `height` を指定して崩れがちですが、実務では「伸び縮みする」ことを前提に組むのがプロの仕事です。

—

パターン2：CSS Gridで「レスポンシブな折り返し」を実現する

画面幅が狭くなった時、`dt` と `dd` を縦並びに切り替えたいという要件は頻出です。これをメディアクエリだけで制御するのは骨が折れますが、CSS Gridの `auto-fit` や `minmax` を使うと非常にエレガントに解決できます。

.grid-dl {
display: grid;
/ 最小幅200pxを確保し、それ以上なら自動で横並びにする魔法の指定 /
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}

/ 複雑なレスポンシブ制御が必要な場合は、あえて単純に切り替える /
@media (max-width: 600px) {
.definition-item {
flex-direction: column; / スマホでは縦積み /
}
}

Gridを使うメリットは、「コンテンツが増えても行の高さが自動的に揃う」点です。Flexboxでこれをやろうとすると、行ごとにコンテナを分ける必要があり、HTMLが汚染されてしまいます。

—

実務で「失敗しない」ための3つのTips

1. ブラウザのデフォルトスタイルを疑え

`dl`, `dt`, `dd` にはブラウザごとに独自の `margin` や `padding` が付与されています。リセットCSSが読み込まれていても、念のため `margin: 0` は必ず明示的に打ち消す癖をつけてください。

2. 「`dt` が複数、`dd` が一つ」のケースを想定する

仕様上、`dt` が複数あっても構いません。例えば「住所」という項目に対して「郵便番号」と「住所詳細」を並べたい場合などです。コードを書く際は、Flexboxの子要素がどのような組み合わせになっても破綻しない構成（`div` でのラップ）を推奨します。

3. 意味論とデザインの分離

「見た目のためにHTMLタグを選ぶ」のはアンチパターンです。まずは「これは用語リストである」という事実をHTMLで定義し、CSSで「どう見せるか」を記述する。この分離ができていると、将来的なデザイン変更にもびくともしない堅牢なコードになります。

—

まとめ：道具を正しく使いこなす

HTMLは単なる「見た目を作るためのタグ」ではなく、ブラウザや検索エンジンへの「情報の伝達手段」です。`

` を使いこなし、FlexboxやGridで柔軟に制御する。これだけで、あなたのコードの品質は一段上のレベルに到達します。

明日からの実装では、ぜひ `

` を活用して、セマンティックかつ美しいレイアウトを追求してみてください。何かわからないことがあれば、またいつでも聞きに来てください。現場の最前線で戦うあなたのコードを楽しみにしています。