<dl> - 定義リスト
トップ >
HTMLリファレンス >
<dl>
■ 概要
■ 説明
dl は Definition List(定義リスト)の略です。<dl>〜</dl> の間に、<dt>(Definition Term)で定義する用語を、<dd>(Definition Description)で用語の説明を行います。
■ 属性
【固有属性】
属性 | 意味 |
compact | H2-H4t/e4/N2-N4。リストを極力コンパクトな形式で表示します。下記参照。 |
【一般属性】
属性 | 意味 |
class=class | H4s/e3/N4。クラスを指定します。 |
dir=dir | H4s/e5/N6。文字の表示方向を指定します。 |
id=id | H4s/e3/N4。ID を指定します。 |
lang=lang | H4s/e4/N6。言語を指定します。 |
style=style | H4s/e3/N4。スタイルシートを指定します。 |
title=title | H4s/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>
ううう
■ 関連項目
Copyright (C) 1996-2002 杜甫々
初版:2000年10月9日、最終更新:2002年7月27日
http://www.tohoho-web.com/html/dl.htm