シュウ

今回は「HTML【dl・dt・dd】タグの使用方法について」解説いたします。

• HTMLの基本タグを学習している方
  dl・dt・ddタグの意味や書き方を、基礎から理解したい方です。
• お知らせや会社概要を作成したい方
  日付とタイトルを横並びにしたリストや、項目と内容が対になった表を作りたい方です。
• CSSで定義リストをデザインしたい方
  dtとddを横並びにしたり、背景色やボーダー線で装飾したりする方法を知りたい方です。

dlタグ（定義リスト）とは

<dl>（definition list）は、用語とその説明をセットで表示する「定義リスト」を作成するタグです。
リスト項目は<dl>〜</dl>の間に、<dt>と<dd>を組み合わせて記述します。

お知らせの「日付とタイトル」や、会社概要の「項目と内容」など、対になる情報を表現したいときに使用します。

dt・ddタグとは

定義リストは、次の3つのタグで構成されます。

dtタグについて

dt要素は、定義する用語を表示します。
dl要素の中でのみ使用できます。

dtタグに入れられるタグ

div / dl / ul / ol / p / a / img / span / strong / em / table / iframe など

dtの中には、見出し（h1〜h6）やセクション系のタグは入れられません。

ddタグについて

dd要素は、定義する用語の説明を表示します。
dl要素の中でのみ使用でき、dt要素と組み合わせて定義リストを記述します。

ddタグに入れられるタグ

div / h1 / h2 / h3 / h4 / h5 / h6 / dl / ul / ol / li / p / a / img / span / strong / em / table / iframe など

dl・dt・ddの使用方法について

<dl>で全体を囲み、<dt>に「定義する用語」、<dd>に「用語の説明」を入れます。
シンプルでとても簡単ですね。書き方は以下のようになります。

<dl>
	<dt>定義する用語を入れます</dt>
	<dd>定義する用語の説明を入れます</dd>
</dl>

dtに対して複数のddを使用する方法

1つの用語に対して説明が複数ある場合は、dd要素を複数記述します。

<dl>
	<dt>ホームページ制作で使用される主な言語</dt>
	<dd>HTML</dd>
	<dd>CSS</dd>
	<dd>jQuery</dd>
</dl>

複数のdtに対して複数のddを使用する方法

dtに定義する用語が複数ある場合は、dtとddをセットで繰り返し記述します。

<dl>
	<dt>headタグについて</dt>
	<dd>head内には主に、タイトル、CSSファイル、JSファイルなどを記述します。</dd>

	<dt>metaタグについて</dt>
	<dd>言語の設定、ページの説明(description)を設定します。</dd>

	<dt>titleタグについて</dt>
	<dd>ブラウザのタブに表示されます。SEOにも大きな影響を与えます。</dd>
</dl>

See the Pen
wvaqEdW by shu (@shu0325)
on CodePen.

このように、dt要素とdd要素は初期状態では改行されて表示されます。
横並びにする場合は、CSSで調整します。

CSSで横並びにする

dtとddを横並びにする

まずは、日付と天気を横並びにするHTMLです。

<dl>
	<dt>2020.03.01</dt>
	<dd>今日の天気は晴れ</dd>

	<dt>2020.03.02</dt>
	<dd>今日の天気は雨</dd>

	<dt>2020.03.03</dt>
	<dd>今日の天気は曇り</dd>
</dl>

次に、CSSでdtとddを左寄せにして横並びにします。

dl {
	overflow: hidden;
}

dt {
	float: left;
	clear: left;
}

dd {
	float: left;
	margin-left: 1em;
}

See the Pen
WNvEmwW by shu (@shu0325)
on CodePen.

今回は、float: left;で左寄せし、clear: left;で後続の回り込みを解除しています。

dtとddを横並びにしボーダー線を引く

項目ごとにボーダー線を引く場合は、dtとddのセットをdivで囲みます。

<dl>
  <div>
    <dt>2020.03.01</dt>
    <dd>今日の天気は晴れ</dd>
  </div>

  <div>
    <dt>2020.03.02</dt>
    <dd>今日の天気は雨</dd>
  </div>

  <div>
    <dt>2020.03.03</dt>
    <dd>今日の天気は曇り</dd>
  </div>
</dl>

See the Pen
poJrBWr by shu (@shu0325)
on CodePen.

結果として、ボーダー線を引く場合はdivで囲む方法がおすすめです。

dtとddを横並びにし背景色を入れる

See the Pen
MWwvMXe by shu (@shu0325)
on CodePen.

今回は、dt要素とdd要素にwidthを指定し、その後background-colorなどで装飾しています。

dlを横並びにする

See the Pen
mdJMNKJ by shu (@shu0325)
on CodePen.

今回は、dl要素にwidthを指定し、その後background-colorなどで装飾しています。

dl・dt・ddをよく使用する場所

dl・dt・ddの基本的な使用方法を説明してきました。
では、実際にどのような場所で定義リストが使われているのか、いくつか紹介します。

最新情報やお知らせで使用する

dt要素に日付、dd要素に最新情報やお知らせのタイトルを入れています。

See the Pen
qBdPBam by shu (@shu0325)
on CodePen.

dl div{
  border-bottom: solid 1px #f1f1f1;
  overflow: hidden;
  font-size: 14px;
}

dt {
	float: left;
	clear: left;
	padding: 15px 20px;
	background-color: #f1f1f1;
}

dd {
	float: left;
	margin-left: 1em;
	padding: 15px 20px;
	line-height: 2.0em;
}

a {
	color: #5c87a6;
	text-decoration: underline;
}

a:hover {
	color: #4bacb7;
	text-decoration: underline;
}

会社概要で使用する

dt要素に項目、dd要素に詳細内容を入れています。

See the Pen
GRJMjMR by shu (@shu0325)
on CodePen.

.company {
	padding: 30px;
	box-sizing: border-box;
	background-color: #a4d1f3;
}

.company_inner {
	padding: 30px;
	box-sizing: border-box;
	background-color: #ffffff;
}

dl {
	overflow: hidden;
	font-size: 14px;
	margin: 0;
}

dt {
	width: 10%;
	float: left;
	clear: left;
	padding: 15px 20px;
	border-bottom: 3px solid #5c87a6;
	box-sizing: border-box;
}

dd {
	width: 90%;
	float: left;
	margin-left: 0em;
	padding: 15px 20px;
	border-bottom: 3px solid #cccccc;
	box-sizing: border-box;
}

dl dt.first_dt {
	border-top: 3px solid #5c87a6;
}

dl dd.first_dd {
	border-top: 3px solid #cccccc;
}

よくある質問で使用する

dt要素に質問、dd要素に回答を入れています。

See the Pen
xxGXEMM by shu (@shu0325)
on CodePen.

.company {
	padding: 30px;
	box-sizing: border-box;
}

dl {
	overflow: hidden;
	font-size: 14px;
	margin-bottom: 20px;
}

dt {
	padding: 15px 20px;
	box-sizing: border-box;
	background-color: #f1f1f1;
}

dd {
	margin-left: 0em;
	padding: 15px 20px;
	box-sizing: border-box;
	border: solid 2px #f1f1f1;
}

dt:before {
	content: "Q.";
	font-weight: bold;
	margin-right: 10px;
}

dd:before {
	content: "A.";
	font-weight: bold;
	margin-right: 10px;
	color: #c00c00;
}

まとめ

今回は、HTMLのdl・dt・ddタグの使い方について解説しました。
dtに用語、ddに説明を入れるというシンプルな構造で、CSSを組み合わせることで、お知らせ・会社概要・よくある質問など、さまざまなデザインに活用できます。
定義リストは現場でもよく使用されるタグです。ここでしっかりマスターしましょう。

テンプレートを見る

Web・デザインの本棚を見る

< 前の記事

【jQuery】Vegas2で背景画像のスライドショーを実装する

次の記事 >

【Photoshop】 ミニチュア風の写真に加工する方法