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

定義リストとは

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

この場合、「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プロパティを指定しなかった場合は、次のような崩れたレイアウト表示になってしまいます。

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

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