定義リスト

更新日:2018.06.30
  1. HOME
  2. ホームページ作成講座
  3. 定義リスト

リスト編の3番目は、定義リストです。 定義リストは、用語解説などに使われます。 「語句」と「説明」と言った組み合わせで構成されます。

定義リストのHTMLタグ

では、定義ストを作るためのHTMLタグを見てみましょう。

<dl>~</dl>
この間に挟まれた部分が定義リストになります。
<dt>~</dt>
この間に、定義する語句を記述します。
<dd>~</dd>
この間に、語句の説明を記述します。

dtタグとddタグはセットで使います。dtタグ1つに対してddタグは複数になることもあります。 dtタグより前にddタグが来たり、dtタグだけでddタグが無いといった使い方は間違っています。

定義リストのサンプル

では、定義リストのサンプルを作ってみましょう。

temp.htmlを開いて、listフォルダに「lesson3.html」というファイル名で保存してください。 そしてbody内に以下のように記述してみましょう。

<h1>定義リストを構成するタグ</h1>

<dl>
<dt>dlタグ</dt>
<dd>この間に挟まれた部分が定義リストになります。</dd>

<dt>dtタグ</dt>
<dd>この間に、定義する語句を記述します。</dd>

<dt>ddタグ</dt>
<dd>この間に、語句の説明を記述します。</dd>
</dl>

ブラウザで確認すると、下のようになります。

上記のサンプルは、このページのどこかで見たような気がしませんか? そうです、その部分は定義リストを使っているのです。

NINJABUTTON