定義リストの挿入

定義リストの挿入方法について説明したページです。定義リストの概要から単純なhtmlタグでの挿入方法、CSSを用いたスタイルの変更例等を説明しています。

定義リストの概要

 定義リストは以下のように定義する用語と説明が一体になったリストです。

定義する用語1
用語の説明1
定義する用語2
用語の説明2

単純な定義リストの挿入

 単純に定義を挿入する場合はhtmlタグで以下のように記述します。

<dl>
<dt>定義する用語1</dt>
<dd>用語の説明1</dd>
<dt>定義する用語2</dt>
<dd>用語の説明2</dd>
</dl>

 <dl>タグで始まりを示し、<dt>タグが用語、<dd>タグが用語の説明になります。 <dl>タグの中には<dt>タグと<dd>タグを複数羅列して説明を記述出来ます。

定義リストのスタイル変更

 定義リストは用語も説明も見栄えが殆ど同じであるため、羅列すると見にくい場合があります。そのような時は例えばスタイルシートで用語部分を太字にします。

dt {font-weight:bold;}

定義する用語1
用語の説明1
定義する用語2
用語の説明2

 以下のように<em>タグで強調する事でも見えやすく出来ます。

【emタグで用語を強調する例】
<dl>
<dt><em>定義する用語1</em></dt>
<dd>用語の説明1</dd>
<dt><em>定義する用語2</em></dt>
<dd>用語の説明2</dd>
</dl>

 又、定義する用語と説明を横に並べて表示する事も出来ます。

【定義する用語と説明を並べるスタイルシート例】
.linedt {
float:left;
width:17%;
font-weight:bold;
}

.linedd {
float:left;
width:73%;
}

 クラス指定で左に回り込むようにしています。htmlは以下です。

【定義する用語と説明を並べるhtml例】
<dl>
<dt class="linedt">テント</dt>
<dd class="linedd">定義する用語1と説明1を並べて表示します。</dd>
<dt class="linedt">タープ</dt>
<dd class="linedd">定義する用語2と説明2を並べて表示します。</dd>
<dt class="linedt">ランタン</dt>
<dd class="linedd">定義する用語3と説明3を並べて表示します。</dd>
<dt class="linedt">グランドシート</dt>
<dd class="linedd">定義する用語4と説明4を並べて表示します。</dd>
<dt class="linedt">寝袋</dt>
<dd class="linedd">定義する用語5と説明5を並べて表示します。</dd>
</dl>

 上記では用語の定義でクラスを適用して左に回り込み、用語の説明を右に表示するようにしています。この場合、以下のように表示されます。

テント
テントという用語と説明を並べて表示します。
タープ
タープという用語と説明を並べて表示します。
ランタン
ランタンという用語と説明を並べて表示します。
グランドシート
グランドシートという用語と説明を並べて表示します。
寝袋
寝袋という用語と説明を並べて表示します。

 このように用語と説明を沢山用いる場合に説明を右側に揃える事が出来ます。

 尚、説明部分が複数行になる場合は以下のように表示されます。

ペグ
ペグという用語とペグの説明を複数行で表示する際も用語の説明から後の部分で折り返すため、見た目が崩れません。
テーブル
テーブルという用語とテーブルの説明を複数行で表示する際も用語の説明から後の部分で折り返すため、見た目が崩れません。
バーベキューコンロ
バーベキューコンロという用語とバーベキューコンロの説明を複数行で表示する際も用語の説明から後の部分で折り返すため、見た目が崩れません。
チェア
チェアという用語とチェアの説明を複数行で表示する際も用語の説明から後の部分で折り返すため、見た目が崩れません。

 このように用語の説明の2行目以降が1行目と同じ個所から始まり見た目が崩れないため、複数行になる事を気にせずに使えます。

  • このエントリーをはてなブックマークに追加