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

最終更新日：2023-08-25
公開日：2018-07-07

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

この記事のポイント

定義リストはキーワードと説明文がセットになったリスト
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を使って調整します。

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

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%;
}

HTML コード例


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

記事一覧