HTML & CSS

最終更新日:
公開日:

レシピ

マークアップ

定義リストを使って、キーワードと説明をマークアップする

定義リストであるdl要素、dt要素、dd要素のマークアップ例をご紹介します。

この記事のポイント

  • 定義リストの基本的な使い方が分かる
  • 定義リストのレイアウトを横並びにする

目次

定義リストとは

定義リストとは、キーワードと説明文がセットになったリストです。

定義リストの例
定義リストの例

この場合、「HTML」や「CSS」がキーワードとなり、「Webサイトを構成する〜」と続くテキストが説明文です。

定義リストは親となるdl要素と、キーワードをマークアップするdt要素、説明文をマークアップするdd要素の3点セットが基本的な形です。

マークアップ例

定義リストの具体的なマークアップ例を解説します。

定義リストのマークアップ例

<section>
	<dl>
		<dt>HTML</dt>
		<dd>Webサイトを構成するマークアップ言語。</dd>
		<dt>CSS</dt>
		<dd>HTMLを装飾するためのテキストファイル。</dd>
		<dt>JavaScript</dt>
		<dd>HTMLを動的に表現するために使うプログラミング言語。</dd>
	</dl>
</section>

キーワードとなる「HTML」や「CSS」をdt要素、キーワードに対する説明文をdd要素に記述します。

キーワードと説明文が横並びになるようにレイアウトする

定義リストの表示を、CSSを使って調整します。

キーワードと説明文を横並びにレイアウトした例
キーワードと説明文を横並びにレイアウトした例

定義リストのレイアウト調整

<style>
dl {
	overflow: hidden;
}
dt {
	clear: both;
	float: left;
	margin-bottom: 15px;
	width: 22%;
	font-weight: bold;
	color: #2992e3;
}
dd {
	float: left;
	margin: 0;
	width: 78%;
}
</style>
<section>
	<dl>
		<dt>HTML</dt>
		<dd>Webサイトを構成するマークアップ言語。</dd>
		<dt>CSS</dt>
		<dd>HTMLを装飾するためのテキストファイル。</dd>
		<dt>JavaScript</dt>
		<dd>HTMLを動的に表現するために使うプログラミング言語。</dd>
	</dl>
</section>

dt要素dd要素widthプロパティで横幅を指定しつつ、「float: left;」をかけて横並びにしています。

dt要素の「clear: both;」を指定して、dd要素に続くdt要素の回り込みを解除しているところがポイントです。
もしclearプロパティを指定しなかった場合は、次のような崩れたレイアウト表示になってしまいます。

dt要素にclearプロパティを指定しなかったときの表示例
dt要素にclearプロパティを指定しなかったときの表示例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。