dlで用語と説明を組にする：見た目より先に対応を決めよう

用語を太字にして、その下へ説明を書く。画面では区別できても、HTMLがすべて同じ段落だと、名前と説明の関係を要素で示してはいません。dlで用語と説明を組にする方法を使い、小さな用語集の構造を作ってみましょう。

題材は架空の製本体験ページです。練習用に「表紙」と「本文」の二語だけを扱います。専門的な製本工程の解説ではなく、ページ内で使う言葉の簡単な説明を載せる想定です。

箇条書きか、名前と説明の組かを考える

持ち物の「鉛筆、定規、消しゴム」のように、項目を列挙するだけなら箇条書きとして考えられます。一方、「表紙とは何か」「本文とは何か」という対応を並べるなら、用語と説明の組が内容に合います。

dlは説明リストを表す要素です。中に置くdtは用語や名前、ddはその説明を担当します。MDNのdlの説明では、用語集や名前と値の情報に使う例を確認できます。

二列に見せたいという理由だけで要素を選ばないようにします。曜日と部屋の交点に時刻を置くようなデータは、行と列の見出しを持つ表として整理する別の題材です。今回の完成物は、各用語をその説明と順に読めるリストです。

dtのすぐ後ろに、その説明を置く

次のHTMLはbody内へ置く断片です。文書全体のheadや主見出しは省略しています。ここでは二つの用語を、一つのdlの中にまとめます。

<dl class="book-terms">
  <dt>表紙</dt>
  <dd>この課題では、本の外側を覆う厚い紙を指します。</dd>
  <dt>本文</dt>
  <dd>この課題では、表紙の内側に綴じるページを指します。</dd>
</dl>

名前だけを先に二つ並べ、最後に説明を二つ置く書き方は、この二組を作りたい例には合いません。上から「表紙、その説明、本文、その説明」の順にし、項目を追加するときも組を崩さないようにします。

一つの用語に複数の説明を付けるなど、別の形もありますが、今回は一語につき説明一つへ限定します。単純な構成で対応を確認してから、必要に応じて広げてください。dlの中に何でも置ける箱として扱わないことが出発点です。

装飾を付けても、読む順番を変えない

まずCSSなしで、用語の直後に正しい説明が来るか読みます。次に必要なら、以下のCSSを練習ページへ加えます。用語を太字にし、説明の標準の余白を調整するだけの例です。

.book-terms { margin: 0; }
.book-terms dt { font-weight: 700; }
.book-terms dd { margin: 0.25rem 0 1rem; }

文字を太くする指定が、dtの役割を作るわけではありません。CSSを外しても要素の対応が残るように、構造を先に書きます。また、太字の用語をすべてページの見出しへ変える必要もありません。用語名と節の入口は、文章の役割が異なります。

見た目を横並びに変える課題は、今回は扱いません。説明が長くなっても、その次の用語の説明と混ざらないかを縦の構成で確認します。固定の高さを付けて説明を隠す修正はせず、内容が増えた状態で読み直しましょう。

説明を増やしても、どの名前の説明か分かるか

二組を作り、「本文」の説明に「今回は無地の紙を四枚使います。」という練習用の条件を一文足します。どこからどこまでが本文の説明か、HTMLと表示の両方で確かめてください。

その後、二組の順番を入れ替えます。dtだけを動かさず、対応するddも一緒に移すと、説明の取り違えを避けて確認できます。狭い画面でも説明の末尾が読めるか見て、試した幅を記録します。

読み上げ環境を使える場合は、用語と説明をどのように読めるか試してください。環境によって伝え方が異なるため、特定の読み上げ方を一律の合格条件にはしません。無料のHTMLレッスンの文章を使うときも、完成条件は「二組の対応を要素と読む順番で示せること」として残しましょう。