<dl> - 定義リスト

トップ > HTMLリファレンス > <dl>

■ 概要

項目説明
形式<dl>〜</dl>
サポートH2〜H4s〜 / e2〜 / N2〜 / i1〜
タグの省略開始タグ:必須、終了タグ:必須
包含可能要素dt / dd

■ 説明

dl は Definition List(定義リスト)の略です。<dl>〜</dl> の間に、<dt>(Definition Term)で定義する用語を、<dd>(Definition Description)で用語の説明を行います。

■ 属性

【固有属性】
属性意味
compactH2-H4t/e4/N2-N4。リストを極力コンパクトな形式で表示します。下記参照。

【一般属性】
属性意味
class=classH4s/e3/N4。クラスを指定します。
dir=dirH4s/e5/N6。文字の表示方向を指定します。
id=idH4s/e3/N4。ID を指定します。
lang=langH4s/e4/N6。言語を指定します。
style=styleH4s/e3/N4。スタイルシートを指定します。
title=titleH4s/e4/N6。タイトルを指定します。
IE拡張属性他にもIEで拡張された属性が指定可能です。

■ 使用例

HTMLソース
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language の略で・・・</dd>
<dt>WWW</dt>
<dd>World Wide Web の略で・・・</dd>
</dl>

ブラウザ表示例
HTML
HyperText Markup Language の略で・・・
WWW
World Wide Web の略で・・・

■ コンパクト表示

compact 属性を指定すると、項目名が短い場合、説明が自動的に項目名と同じ行に表示されるようになります。

ブラウザ表示例
DC
DreamCast の略で・・・
Dynamic HTML
HTML や JavaScript などの技術を用いて・・・

■ スタイルシートとのくみ合わせ

項目名を目立たせたい場合は、スタイルシートを用いると便利です。例えば、<head>〜</head> の間に次のように指定することにより、すべての項目名を太字で、前の行と 1行スペースを空けて表示することができます。

<style type="text/css">
<!--
DT { margin-top: 1em; font-weight: bold; }
-->
</style>
ブラウザ表示例
HTML
HyperText Markup Language の略で・・・
WWW
World Wide Web の略で・・・

■ 注意

</dt> や </dd> は省略可能ですが、Netscape Communicator 4.0 などでスタイルシートを使用する場合は問題が生じるようです。例えば、下記の例では「ううう」の部分まで赤くなってしまいます。</dt> や</dd> を省略しなければ回避できます。

<dl style="color:red">
<dt>あああ
<dd>いいい
</dl>
ううう

■ 関連項目

<dt><dd>

Copyright (C) 1996-2002 杜甫々
初版:2000年10月9日、最終更新:2002年7月27日
http://www.tohoho-web.com/html/dl.htm