html－定義型リスト

定義型リストを作る

定義型リストって何！？

定義型と言っても何の事だか・・・・
最初に用語があって、それを説明する項目を列挙する便利なタグ
と考えると簡単です。
この定義型リストは、用語と定義がセットになっています。
<dl><dt><dd>の３つのタグは必ずセットで使用します。

タグ	詳細
<dl>～</dl>	定義リストであるということを示す
<dt>～</dt>	定義語・用語
<dd>～</dd>	dtで囲った用語を説明する文章

デフォルトでは、dd要素は、dt（用語）に対して、３文字程度インデントされて表示されます。
定義型リストの特性を生かして、リンク集、メニュー、お知らせ、日記などに利用できますネ

html ↓

<dl>
　<dt>富士山</dt>
　　　<dd>2013年に世界文化遺産に登録された日本一高い山です。</dd>
　<dt>琵琶湖</dt>
　　　<dd>滋賀県に位置する日本一大きい湖です。</dd>
　<dt>霞ケ浦</dt>
　　　<dd>茨城県にある日本で2番目に大きい湖です。</dd>
</dl>

ウェブ上での見え方　↓↓

富士山: 2013年に世界文化遺産に登録された日本一高い山です。
琵琶湖: 滋賀県に位置する日本一大きい湖です。
霞ケ浦: 茨城県にある日本で2番目に大きい湖です。

定義型リストのインデント幅を変える

◆<head>と</head>の間に下記のタグを入れます。
スタイルシートで<dd>要素の左マージンの調整をします。
1em は、全角文字１文字分に相当します。インデントが要らないという場合は、margin-left: 0;　にします。

html ↓

<dl class="sample1">
　<dt>富士山</dt>
　　　<dd>2013年に世界文化遺産に登録された日本一高い山です。</dd>
　<dt>琵琶湖</dt>
　　　<dd>滋賀県に位置する日本一大きい湖です。</dd>
　<dt>霞ケ浦</dt>
　　　<dd>茨城県にある日本で2番目に大きい湖です。</dd>
</dl>

ウェブ上での見え方　↓↓　インデント幅が狭くなっています。

富士山: 2013年に世界文化遺産に登録された日本一高い山です。
琵琶湖: 滋賀県に位置する日本一大きい湖です。
霞ケ浦: 茨城県にある日本で2番目に大きい湖です。

定義型リストをスタイルシートでデザインする

スタイルシートに記述することで、用語の文字、インデントの幅などを変更して、見栄えの良い定義型リストが作れます。

富士山: 2013年に世界文化遺産に登録された日本一高い山です。登録と同時に登山客が増え、色々な問題が生じています。（長い文章は自動改行されます。）
琵琶湖: 滋賀県に位置する日本一大きい湖です。; 滋賀県庁は琵琶湖を別称としてMother Lakeと呼んでいます
霞ケ浦: 茨城県にある日本で2番目に大きい湖です。

上記サンプルのスタイルシート
◆<head>と</head>の間に下記のタグを入れます。

html　↓↓

<dl class="sample2">
<dt>富士山</dt>
<dd>2013年に世界文化遺産に登録された日本一高い山です。登録と同時に登山客が増え、色々な問題が生じています。（長い文章は自動改行されます。）</dd>
<dt>琵琶湖</dt>
<dd>滋賀県に位置する日本一大きい湖です。</dd>
<dd>滋賀県庁は琵琶湖を別称としてMother Lakeと呼んでいます</dd>
<dt>霞ケ浦</dt>
<dd>茨城県にある日本で2番目に大きい湖です。</dd>
</dl>

入れ子

定義型リストでは、マーク付きリスト、番号付きリストを入れ子にすることができます。
<dd></dd>の間にリストを入れます。

◆マーク付きリストを入れ子にする

<dl>
<dt>夏に売り上げが伸びるもの</dt>
　<dd>
　　<ul>
　　<li>エアコン</li>
　　<li>扇風機</li>
　　<li>冷蔵庫</li>
　　</ul>
　</dd>
</dl>

ウェブ上での見え方　↓↓

夏に売り上げが伸びるもの

エアコン
扇風機
冷蔵庫

◆番号付きリストを入れ子にする

<dl>
<dt>夏に売り上げが伸びるもの</dt>
　<dd>
　　<ol>
　　<li>エアコン</li>
　　<li>扇風機</li>
　　<li>冷蔵庫</li>
　　</ol>
　</dd>
</dl>

ウェブ上での見え方　↓↓

夏に売り上げが伸びるもの

エアコン
扇風機
冷蔵庫

リスト作成

css
java
home