dl要素

dl要素 定義リスト ブロック要素

dl要素は定義リストを作成するときに使います。内容にはdt要素（用語）とdd要素（用語の説明）とを入れて定義リストを作ります。使用目的が用語の解説以外にも小見出しと文章としても使いやすいです。
dl要素は単独では使いませんdt要素とdd要素を内容に入れていっしょに使います。ブラウザで表示するときは要素の前後で改行され上下に1行分の余白ができます。この余白はcssのmarginプロパティで調整できます。

内容にできる要素

dt要素 dd要素

<dl>
<dt>リスト</dt>
<dd>リスト</dd>
</dl>

実際の表示

リスト

リスト

cssでデザインを指定する場合

html

<dl class="a">
<dt>リスト</dt>
<dd>リスト</dd>
</dl>

css

リストの余白を調整

値には長さの単位marginは外側の余白、値が2つだと1つ目が上下、2つ目が左右を指定します。値を0にすると余白がなくなります。

dl.a { margin: 10px 20px; }

文字の大きさの指定

文字が大きすぎる場合や小さすぎる場合cssで文字の大きさを調整をします。

dl.a { font-size: 12px; }

文字の太さの指定

値には「bold」太字「normal」通常「bolder」やや太く「ligher」やや細く

dl.a { font-weight: normal; }

文字の斜体の指定

値には「italic」斜体（イタリック体）「normal」通常「oblique」斜体

dl.a { font-style: normal; }

文章の行間を広げる

値にはパーセンテージ「%」長さ「px」「em」など

dl.a { line-height: 150%; }

文字色の指定

値には色を指定する値が使えます

dl.a { color: red; }

共通属性

指定できる共通属性

id属性 class属性 style属性 title属性 lang属性 dir属性

イベント属性

イベント属性