【dl・dt・dd】HTMLの説明リスト（定義リスト）の使い方と横並びCSSを初心者向けに解説

HTMLでWebページを作成する際、用語とその説明をセットで表示したい場面は多くあります。そんなときに活躍するのが、dl・dt・ddタグを使った説明リスト（定義リスト）です。この3つのタグを正しく組み合わせることで、用語集や仕様一覧、FAQ形式のコンテンツなどを意味的にも視覚的にも整った形で表現できます。しかし、初心者の方にとっては「どのタグをどう使えばいいのか」「CSSで横並びにするにはどうすればいいのか」といった疑問を抱きやすい部分でもあります。本記事では、dl・dt・ddタグの基本的な使い方から、実践的なCSSレイアウトまで、具体的なコード例を交えながら初心者の方にもわかりやすく解説していきます。

dl・dt・ddタグの基本

説明リストを作成するには、dl・dt・ddという3つのタグを組み合わせて使用します。それぞれのタグには明確な役割があり、正しく理解することで適切なマークアップができるようになります。

まずは各タグの意味と基本的な構造について確認していきましょう。これらを理解することが、説明リストを使いこなす第一歩となります。

dl・dt・ddの役割を理解する

dlタグは「description list」の略で、説明リスト全体を囲む親要素として機能します。dtタグは「description term」の略で、説明する用語や名前を記述します。ddタグは「description details」の略で、dtで指定した用語に対する説明文を記載します。

この3つのタグは必ずセットで使用し、dlタグの中にdtとddを配置するのが基本的なルールです。単独で使用することはできず、必ずdl要素の子要素として記述する必要があります。

以下の表で各タグの役割を整理しておきましょう。

タグ名	正式名称	役割
dl	description list	説明リスト全体を囲む親要素
dt	description term	用語・項目名を記述
dd	description details	用語の説明・詳細を記述

このように、それぞれのタグが明確な意味を持っているため、検索エンジンやスクリーンリーダーにも内容が正確に伝わります。

基本的な記述方法

dl・dt・ddタグを使った基本的なHTML構造は、非常にシンプルです。dlタグで全体を囲み、その中にdtとddをペアで配置していきます。

1つのdtに対して1つ以上のddを対応させることができ、複数の説明を関連付けることも可能です。逆に、複数のdtに対して1つのddを対応させるパターンも許容されています。

基本的な記述例としては、dlタグの開始タグと終了タグの間に、dtで用語を記述し、その直後にddで説明を記述するという流れになります。この順序を守ることで、意味的に正しいマークアップとなります。

ulやolとの違い

HTMLにはリストを作成するタグとして、ulタグ（順序なしリスト）やolタグ（順序付きリスト）もあります。これらとdlタグの違いを理解しておくことが重要です。

ulやolは単純な箇条書きに適しており、各項目に順序や階層関係がない場合や、番号付きで列挙したい場合に使用します。一方、dlタグは「用語と説明」という関係性を持つデータを表現するのに適しています。

用語集や仕様表のように、名前と値がペアになっている情報を記述する場合は、dlタグを選択するのが意味的に正しい選択となります。適切なタグを選ぶことで、HTMLの構造が明確になり、アクセシビリティの向上にもつながります。

あわせて読みたい

【2026年最新】HTML・CSSの独学に最適な本15選｜初心者から実務レベルまで徹底解説 この記事でわかること 初心者から上級者まで、レベル別に最適なHTML・CSS学習書籍15選 初心者には「いちばんよくわかるHTML5&CSS3デザインきちんと入門」などの基礎固め...

dl・dt・ddの具体的な使用例

基本を理解したところで、実際のWebサイトでdl・dt・ddタグがどのように活用されているかを見ていきましょう。具体的なシーンを知ることで、自分のプロジェクトでの活用イメージが湧きやすくなります。

説明リストは想像以上に多くの場面で役立ちます。ここでは代表的な3つの活用パターンを紹介します。

用語集としての活用

dl・dt・ddタグの最も典型的な使用例が、用語集やグロッサリーの作成です。専門用語とその定義を並べて表示する際に、非常に適した構造といえます。

dtタグに専門用語を、ddタグにその意味や解説を記述することで、読者にとって見やすく、検索エンジンにとっても理解しやすいマークアップになります。

技術ドキュメントや学術サイト、企業のヘルプページなどで頻繁に見かけるパターンです。用語と説明の関係性が明確になるため、ユーザーの理解を助ける効果があります。

FAQ形式のコンテンツ

よくある質問（FAQ）ページも、dl・dt・ddタグで効果的に表現できます。dtタグに質問文を、ddタグに回答文を配置することで、Q&A形式のコンテンツを意味的に正しくマークアップできます。

この形式は、カスタマーサポートページやサービス紹介ページでよく利用されています。質問と回答の対応関係が構造的に表現されるため、検索エンジンがFAQコンテンツとして認識しやすくなるメリットもあります。

FAQページを作成する際は、dl・dt・ddタグの使用を検討してみることをおすすめします。

商品仕様の表示

ECサイトや製品紹介ページでは、商品のスペック情報を表示する際にdl・dt・ddタグが活用されています。項目名（サイズ、重量、素材など）をdtに、その値をddに記述するパターンです。

以下のような項目が説明リストで表現されることが多いです。

このように名前と値のペアで情報を整理する場面では、説明リストが非常に有効です。

メタデータの表示

ブログ記事やニュースサイトでは、投稿日時、著者名、カテゴリーなどのメタデータをdl・dt・ddタグで表示することがあります。情報の種類とその値を対応させて表示するのに適した構造です。

「投稿日」「著者」「カテゴリー」といったラベルをdtに、具体的な値をddに配置することで、記事の付帯情報を整理して表示できます。

サイドバーやフッター、記事ヘッダーなど、様々な場所でこのパターンが活用されています。情報が整理されて表示されるため、ユーザビリティの向上にも貢献します。

あわせて読みたい

SEO内部対策｜優先施策15選をわかりやすく解説 SEO内部対策は、サイト内部の構造やコンテンツを最適化し、検索エンジンからの評価を高める重要な施策です。外部リンクの獲得が難しい中、内部対策は自社で完結できる確...

dl・dt・ddを横並びにするCSS

dl・dt・ddタグをデフォルトのまま使用すると、dtとddは縦に並んで表示されます。しかし、多くの場合は用語と説明を横並びにしたいというニーズがあります。

ここでは、CSSを使って説明リストを横並びにする方法を複数紹介します。プロジェクトの要件に合わせて最適な手法を選択してください。

Flexboxで横並びにする

最も一般的な方法が、Flexboxを使用したレイアウトです。dlタグに対してdisplay: flexとflex-wrap: wrapを指定し、dtとddにそれぞれ幅を設定します。

dtに固定幅（例：30%）を、ddに残りの幅（例：70%）を割り当てることで、きれいな横並びレイアウトが実現できます。

以下の表にFlexboxでの基本的なCSS設定をまとめました。

セレクタ	プロパティ	値の例
dl	display	flex
dl	flex-wrap	wrap
dt	width	30%
dd	width	70%

この方法はブラウザの対応状況も良好で、実装も比較的シンプルなため、多くの場面で推奨される手法です。

CSS Gridで横並びにする

CSS Gridを使用すると、より柔軟なレイアウト制御が可能になります。dlタグにdisplay: gridを指定し、grid-template-columnsで列の幅を定義します。

Gridの特徴は、行と列の両方を同時に制御できる点です。複雑なレイアウトや、複数のdt・ddペアを整然と配置したい場合に特に有効です。

grid-template-columns: 1fr 2frのように指定すれば、dtとddの幅比率を簡単に調整できます。レスポンシブ対応も柔軟に行えるため、モダンなWebサイト制作では重宝する手法といえます。

従来の方法との比較

以前はfloatプロパティを使って横並びを実現する方法が主流でした。しかし、floatはクリアフィックスが必要になるなど、管理が煩雑になりがちです。

現在ではFlexboxやGridが広くサポートされているため、これらを使用する方が効率的です。各手法の特徴を比較してみましょう。

手法	メリット	デメリット
Flexbox	シンプルで扱いやすい	複雑なグリッドには不向き
CSS Grid	柔軟なレイアウト制御	学習コストがやや高い
float	古いブラウザに対応	管理が煩雑になりがち

特別な理由がない限り、FlexboxまたはGridを使用することを推奨します。

レスポンシブ対応のポイント

横並びレイアウトを実装する際は、スマートフォンなど画面幅が狭いデバイスでの表示も考慮する必要があります。メディアクエリを使って、画面幅に応じてレイアウトを切り替えるのが一般的です。

たとえば、768px以上の画面では横並び、それ未満では縦並びに切り替えるといった対応が考えられます。Flexboxの場合はflex-direction、Gridの場合はgrid-template-columnsの値を変更することで実現できます。

モバイルファーストの考え方で、まず縦並びのスタイルを定義し、メディアクエリで横並びに変更する流れが推奨されます。

dl・dt・ddの注意点

dl・dt・ddタグを使用する際には、いくつかの注意点があります。正しい文法を守ることで、アクセシビリティの向上や検索エンジンへの適切な情報伝達が可能になります。

ここでは、よくある間違いや避けるべきパターンについて解説します。

正しい入れ子構造

dl・dt・ddタグには正しい入れ子構造のルールがあります。dlタグの直接の子要素として許可されているのは、dt、dd、div、script、templateタグのみです。

dlタグの中に直接pタグやspanタグを配置することはHTML仕様違反となるため、必ずdtまたはddの中に記述する必要があります。

また、dtとddは常にdl要素の中でのみ使用でき、単独で使用することはできません。この基本ルールを守ることが、正しいマークアップの第一歩です。

アクセシビリティへの配慮

説明リストはスクリーンリーダーによって「説明リスト」として読み上げられます。そのため、実際に用語と説明の関係性がある場合にのみ使用することが重要です。

単なるレイアウト目的でdl・dt・ddタグを使用すると、視覚障害のあるユーザーに混乱を与える可能性があります。スタイリングのためだけに使用するのは避けるべきです。

内容の意味に合ったタグを選択することが、アクセシブルなWebサイト制作の基本となります。

divタグでグループ化する

HTML5以降では、dlタグの中でdt・ddのペアをdivタグでグループ化することが可能になりました。これにより、スタイリングがしやすくなるメリットがあります。

特にFlexboxやGridでレイアウトする際、dt・ddペアをdivで囲むことで、より柔軟な制御が可能になります。ただし、divは必ずdt・ddのペア全体を囲む形で使用する必要があります。

以下のチェックリストで、正しいマークアップができているか確認してみましょう。

これらのポイントを押さえておくことで、正しく意味のあるHTML構造を維持できます。

あわせて読みたい

HTMLを無料で練習できる人気サイトをまとめて紹介 この記事でわかること 無料でHTML練習できる人気オンラインサイト5選とそれぞれの特徴 CodePen、JSFiddle、W3Schools、MDN、Codecademyの5つのサイトを詳しく紹介。それ...

dl・dt・ddの実践テクニック

基本的な使い方と注意点を理解したところで、さらに実践的なテクニックを紹介します。これらを活用することで、より見やすく使いやすいコンテンツを作成できます。

実務でよく使われるスタイリング手法や、複数のdt・ddを扱う方法について見ていきましょう。

複数のdtやddを使う

1つのdtに対して複数のddを対応させたり、複数のdtに対して1つのddを対応させることができます。これはHTML仕様で明確に許可されている記述方法です。

たとえば、同義語を複数のdtで列挙し、1つのddで説明するパターンや、1つの用語に対して複数の観点から説明を加えるパターンなどが考えられます。

用途に応じて柔軟に構造を組み立てることで、より適切な情報表現が可能になります。

スタイリングのコツ

dl・dt・ddタグのデフォルトスタイルはブラウザによって若干異なります。そのため、リセットCSSを使用するか、独自にマージンやパディングをリセットしてから装飾することをおすすめします。

特にddタグにはデフォルトで左マージンが設定されていることが多いため、横並びレイアウトを実装する際はmargin-left: 0を明示的に指定すると良いでしょう。

dtに背景色を付けたり、ddに罫線を引くなどの装飾を加えることで、視認性の高いデザインに仕上げることができます。

実装時のチェックリスト

dl・dt・ddタグを使用した実装が完了したら、以下の項目を確認しておきましょう。これらをチェックすることで、品質の高いコードを維持できます。

これらの確認を習慣化することで、ユーザーにとって使いやすいWebページを提供できます。

よくある質問

dl・dt・ddタグは古い技術ですか？

いいえ、dl・dt・ddタグは現在のHTML5でも正式に仕様として定義されている現役のタグです。説明リストを作成する際の標準的な方法として、引き続き使用が推奨されています。

dtとddの順序は自由に入れ替えられますか？

HTML仕様上、dtはddよりも前に配置する必要があります。ただし、CSSのFlexboxを使用してorder属性を指定することで、視覚的な表示順序を変更することは可能です。

dlタグの中にdivを入れても問題ありませんか？

はい、HTML5以降ではdlタグの子要素としてdivを使用することが認められています。dt・ddのペアをdivで囲むことで、スタイリングがしやすくなるメリットがあります。

まとめ

dl・dt・ddタグは、用語と説明をセットで表示するための説明リスト（定義リスト）を作成するHTMLタグです。dlが全体を囲む親要素、dtが用語、ddが説明という役割を持ち、必ず3つセットで使用します。

横並びレイアウトを実現するには、FlexboxやCSS Gridを活用するのが現在の主流です。dlタグにdisplay: flexを指定し、dtとddにそれぞれ幅を設定することで、きれいな横並び表示が実現できます。レスポンシブ対応も忘れずに行いましょう。

用語集やFAQ、商品仕様など、名前と値がペアになる情報を表示する際には、ぜひdl・dt・ddタグの活用を検討してみてください。正しいマークアップを心がけることで、アクセシビリティの向上とSEO効果の両方が期待できます。