JavaScript | HTML / CSS 連携：リスト・表組み－ ddタグ

JavaScript

2026.06.02

dd 要素は「ラベルに対する“中身・説明側”を表すタグ」
dl・dt・dd の関係をもう一度整理する
1. 「ラベル：値」の“値側”が dd
プロフィールでの dd の役割
1. 「項目名：値」の“値”を全部 dd にする
商品スペックや設定画面での dd
1. スペック表の「値」側を dd にする
2. 入力内容の確認画面にも使える
1 つの dt に複数の dd をぶら下げるときの dd の意味
1. 「同じラベルに対する説明がいくつもある」パターン
FAQ での dd：答え側を担当する
1. Q を dt、A を dd にする
JavaScript と dd：オブジェクトの「値側」として扱う
1. オブジェクトのキー：値 → dt：dd にマッピング
dd を使うか迷ったときの判断基準
1. 「これは“ラベルの中身”か？」と自分に聞く
初心者として「dd タグ」で絶対に掴んでほしいこと

dd 要素は「ラベルに対する“中身・説明側”を表すタグ」

<dd> は
「これは“ラベルの中身・説明・値”ですよ」
と示すためのタグです。

単体では使わず、必ず <dl> の中で
「ラベル（dt）」「その中身（dd）」
というペアの“中身側”を担当します。

ざっくり言うと、

dl … ラベルと中身のペアの“一覧の箱”
dt … ラベル・項目名・用語
dd … その説明・値・内容（＝今話しているやつ）

という役割分担です。

dl・dt・dd の関係をもう一度整理する

「ラベル：値」の“値側”が dd

全体像はこうでした。

<dl>
  <dt>名前</dt>
  <dd>山田太郎</dd>

  <dt>職業</dt>
  <dd>Web エンジニア</dd>
</dl>

ここでの意味は、

「名前」というラベル（dt） → 「山田太郎」という中身（dd）
「職業」というラベル（dt） → 「Web エンジニア」という中身（dd）

<dd> は、
「dt で示されたラベルに対する“答え・中身・説明”」
を表す要素です。

<dl> 全体が「ラベルと中身の一覧」
その中で、dt が「ラベル」、dd が「ラベルに対応する中身」
という構造になっています。

プロフィールでの dd の役割

「項目名：値」の“値”を全部 dd にする

プロフィール情報は、
dd の典型的な使いどころです。

<dl>
  <dt>名前</dt>
  <dd>山田太郎</dd>

  <dt>職業</dt>
  <dd>Web エンジニア</dd>

  <dt>趣味</dt>
  <dd>コーヒー、読書、散歩</dd>
</dl>

ここで dd はすべて「値・中身」です。

名前 → 山田太郎
職業 → Web エンジニア
趣味 → コーヒー、読書、散歩

CSS で「左に dt、右に dd」というレイアウトにすると、
よくある“項目名：内容”のプロフィール表になります。

dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  row-gap: 4px;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0;
}

dd を「中身専用タグ」として使うことで、
HTML の意味も、見た目の構造も、きれいに揃います。

商品スペックや設定画面での dd

スペック表の「値」側を dd にする

<dl>
  <dt>サイズ</dt>
  <dd>幅 120cm × 奥行き 60cm × 高さ 70cm</dd>

  <dt>素材</dt>
  <dd>オーク無垢材</dd>

  <dt>耐荷重</dt>
  <dd>80kg</dd>
</dl>

ここでも dd は
「サイズの中身」「素材の中身」「耐荷重の中身」
という“値側”を担当しています。

入力内容の確認画面にも使える

フォーム送信前の確認画面などでも、
「ラベル：入力内容」の形で dd が活躍します。

<dl>
  <dt>お名前</dt>
  <dd>山田太郎</dd>

  <dt>メールアドレス</dt>
  <dd>taro@example.com</dd>

  <dt>お問い合わせ内容</dt>
  <dd>サービスについて質問があります。</dd>
</dl>

ここで dd は、
ユーザーが入力した“実際の値”を表示する場所です。

1 つの dt に複数の dd をぶら下げるときの dd の意味

「同じラベルに対する説明がいくつもある」パターン

<dl> では、
1 つの dt に対して複数の dd を書けます。

<dl>
  <dt>JavaScript</dt>
  <dd>ブラウザ上で動くプログラミング言語。</dd>
  <dd>サーバーサイドでも使われることがある。</dd>
</dl>

ここで dd は 2 つありますが、
どちらも「JavaScript」というラベルに対する説明です。

このとき dd は、
「同じラベルに対する“複数の説明・補足”」
を表しています。

用語集や FAQ で、
「1 つの用語に対して説明をいくつか並べたい」
というときに便利な構造です。

FAQ での dd：答え側を担当する

Q を dt、A を dd にする

FAQ も「ラベル：内容」の関係なので、
dd は「答え側」を担当します。

<dl>
  <dt>Q. 送料はいくらですか？</dt>
  <dd>A. 全国一律 500 円です。</dd>

  <dt>Q. 支払い方法は何がありますか？</dt>
  <dd>A. クレジットカード、銀行振込、コンビニ払いに対応しています。</dd>
</dl>

ここで dd は、
「質問（dt）に対する答え」
という役割です。

CSS で Q と A の見た目を変えれば、
よくある FAQ セクションになります。

dt {
  font-weight: bold;
  margin-top: 1rem;
}

dd {
  margin: 0 0 0.5rem 0;
}

JavaScript と dd：オブジェクトの「値側」として扱う

オブジェクトのキー：値 → dt：dd にマッピング

JavaScript のオブジェクトを
「ラベル：内容」の一覧として表示したいとき、
キーを dt、値を dd に対応させるのが自然です。

const profile = {
  名前: "山田太郎",
  職業: "Web エンジニア",
  趣味: "コーヒー、読書、散歩",
};

const dl = document.querySelector("#profile");

Object.entries(profile).forEach(([key, value]) => {
  const dt = document.createElement("dt");
  const dd = document.createElement("dd");

  dt.textContent = key;    // ラベル側
  dd.textContent = value;  // 中身側（dd）

  dl.appendChild(dt);
  dl.appendChild(dd);
});

const profile = {
  名前: "山田太郎",
  職業: "Web エンジニア",
  趣味: "コーヒー、読書、散歩",
};

const dl = document.querySelector("#profile");

Object.entries(profile).forEach(([key, value]) => {
  const dt = document.createElement("dt");
  const dd = document.createElement("dd");

  dt.textContent = key;    // ラベル側
  dd.textContent = value;  // 中身側（dd）

  dl.appendChild(dt);
  dl.appendChild(dd);
});