HTML dl要素攻略！1から100まで徹底解説

はじめに
【HTML dl要素とは】
- ○dl要素の基本構造
【dl要素の作り方】
- ○基本的なdl要素の作成
【dl要素の使い方】
- ○用語の定義リスト作成
- ○画像と説明を組み合わせる
【注意点】
【dl要素のカスタマイズ】
- ○CSSを使ったスタイル変更
【応用例とサンプルコード】
- ○FAQページの作成
- ○プロフィールページの作成
まとめ

はじめに

この記事を読めば、HTML dl要素の作り方や使い方、注意点、カスタマイズ方法を習得できるようになります。

初心者向けに詳しく徹底解説していきますので、安心してください。

【HTML dl要素とは】

dl要素は、HTMLで用語とその説明をペアで表示するために使われる要素です。

主に定義リストやキーワードとその説明を表示する際に用いられます。

○dl要素の基本構造

dl要素は、dt要素（用語）とdd要素（説明）の組み合わせで構成されます。

下記のような構造になります。

<dl>
  <dt>用語1</dt>
  <dd>用語1の説明</dd>
  <dt>用語2</dt>
  <dd>用語2の説明</dd>
  ...
</dl>

【dl要素の作り方】

○基本的なdl要素の作成

dl要素を作成するには、まずdl要素の中にdt要素とdd要素を追加していきます。

下記のサンプルコードは、用語とその説明をペアで表示するdl要素の基本的な例です。

<dl>
  <dt>HTML</dt>
  <dd>ハイパーテキストマークアップ言語のことで、ウェブページの構造を表現するために用いられる言語です。</dd>
  <dt>CSS</dt>
  <dd>カスケーディングスタイルシートのことで、ウェブページのデザインやレイアウトを制御するために用いられる言語です。</dd>
</dl>

【dl要素の使い方】

dl要素は様々な場面で活用できます。

ここでは、一般的な用途として、用語の定義リスト作成や画像と説明を組み合わせる方法を紹介します。

○用語の定義リスト作成

dl要素を使って、用語とその説明をリスト形式で表示することができます。

下記のサンプルコードは、プログラミング言語の用語とその説明を表示する例です。

<dl>
  <dt>Python</dt>
  <dd>汎用性の高いプログラミング言語で、シンプルな文法が特徴です。</dd>
  <dt>Java</dt>
  <dd>オブジェクト指向のプログラミング言語で、ウェブアプリケーションやAndroidアプリの開発に広く使われています。</dd>
  <dt>JavaScript</dt>
  <dd>ウェブページの動的な振る舞いを制御するために用いられるプログラミング言語です。</dd>
</dl>

○画像と説明を組み合わせる

dl要素を使って、画像とその説明を組み合わせて表示することもできます。

下記のサンプルコードは、画像とその説明を組み合わせた例です。

<dl>
  <dt><img src="image1.jpg" alt="画像1"></dt>
  <dd>画像1の説明文です。</dd>
  <dt><img src="image2.jpg" alt="画像2"></dt>
  <dd>画像2の説明文です。</dd>
</dl>

【注意点】

dl要素を使用する際の注意点は、dt要素とdd要素の組み合わせを正しく行うことです。

dt要素だけ、またはdd要素だけが連続して並んでいる場合、正しく表示されないことがあります。

用語とその説明が1対1で対応するように、適切な組み合わせで記述しましょう。

【dl要素のカスタマイズ】

○CSSを使ったスタイル変更

dl要素の見た目をカスタマイズするには、CSSを使ってスタイルを変更します。

下記のサンプルコードは、dl要素のスタイルを変更する例です。

<style>
  dl {
    font-family: Arial, sans-serif;
    border: 1px solid #ccc;
    padding: 10px;
  }
  dt {
    font-weight: bold;
    margin-top: 10px;
  }
  dd {
    margin-left: 20px;
  }
</style>
<dl>
  <dt>用語1</dt>
  <dd>用語1の説明</dd>
  <dt>用語2</dt>
  <dd>用語2の説明</dd>
</dl>

【応用例とサンプルコード】

dl要素は様々なシーンで活用できます。

ここでは、FAQページの作成やプロフィールページの作成について紹介します。

○FAQページの作成

dl要素を用いて、よくある質問とその回答を表示するFAQページを作成することができます。

下記のサンプルコードは、FAQページの一例です。

<dl>
  <dt>Q1. 送料はいくらですか？</dt>
  <dd>A1. 送料は一律500円です。5,000円以上のお買い上げで送料が無料になります。</dd>
  <dt>Q2. 返品・交換はできますか？</dt>
  <dd>A2. 商品到着後7日以内であれば、未使用品に限り返品・交換が可能です。</dd>
</dl>

○プロフィールページの作成

dl要素を用いて、プロフィールページに自己紹介や経歴などの情報を表示することができます。

下記のサンプルコードは、プロフィールページの一例です。

<dl>
  <dt>名前</dt>
  <dd>山田太郎</dd>
  <dt>出身地</dt>
  <dd>東京都</dd>
  <dt>趣味</dt>
  <dd>旅行、読書、写真撮影</dd>
  <dt>経歴</dt>
  <dd>
    <ul>
      <li>2000年 - 東京大学入学</li>
      <li>2004年 - 東京大学卒業</li>
      <li>2004年 - 株式会社A入社</li>
      <li>2010年 - 株式会社B入社</li>
    </ul>
  </dd>
</dl>