回答編集履歴
5
dl要素について追記
answer
CHANGED
|
@@ -28,6 +28,9 @@
|
|
|
28
28
|
見出しを付けてひとつのセクションとして扱うには少々大袈裟な内容をまとめる時に使う事が多い。
|
|
29
29
|
つまり、**細目とそれに言及した文章**を列挙する時に最適なのが記述リストであると考えられる。
|
|
30
30
|
|
|
31
|
+
※
|
|
32
|
+
HTML4.01やXHTMLなどでは**定義リスト**(Definition List)となっていましたが、HTML5では定義である必要が無くなり**記述リスト**(Description List)になりました。定義リストの使い方を迷う事はないと思うので、ここでは記述リストについて説明しています。
|
|
33
|
+
|
|
31
34
|
例
|
|
32
35
|
- 用語と定義(説明)
|
|
33
36
|
- 質問と回答
|
4
より分かりやすく内容を変更
answer
CHANGED
|
@@ -1,47 +1,91 @@
|
|
|
1
|
+
改めて編集し直しました。
|
|
2
|
+
これまでの内容より分かりやすくなっていると思います。
|
|
3
|
+
###各リスト要素の説明と主な用途
|
|
4
|
+
`<ul>` **順不同リスト**(Unordered List)
|
|
5
|
+
箇条書きで項目を列挙したい時に使うリスト要素。
|
|
1
|
-
|
|
6
|
+
項目の順序が入れ替わっても不都合の無いリストは順不同リストを使う。
|
|
2
7
|
|
|
8
|
+
例
|
|
9
|
+
- 目録
|
|
3
|
-
|
|
10
|
+
- 一覧表
|
|
4
|
-
|
|
11
|
+
等々
|
|
5
|
-
**項目について、補足や説明などの何らかの文章が必要**な場合は定義リスト(dl)を使用。
|
|
6
|
-
|
|
12
|
+
---
|
|
7
13
|
|
|
14
|
+
`<ol>` **順序付きリスト**(Ordered List)
|
|
8
|
-
|
|
15
|
+
順序が重要な項目を列挙したい時に使うリスト要素。
|
|
9
|
-
|
|
16
|
+
項目の順序が入れ替わると都合が悪いリストは順序付きリストを使う。
|
|
10
17
|
|
|
18
|
+
例
|
|
19
|
+
- 目次
|
|
20
|
+
- 順位・序列
|
|
21
|
+
- 時系列
|
|
22
|
+
- 段取り・手順
|
|
23
|
+
等々
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
`<dl>` **記述リスト**(Description List)
|
|
27
|
+
項目(語句)とそれに言及した文章を列挙したい時に使うリスト要素。
|
|
28
|
+
見出しを付けてひとつのセクションとして扱うには少々大袈裟な内容をまとめる時に使う事が多い。
|
|
11
|
-
|
|
29
|
+
つまり、**細目とそれに言及した文章**を列挙する時に最適なのが記述リストであると考えられる。
|
|
30
|
+
|
|
31
|
+
例
|
|
12
|
-
定義
|
|
32
|
+
- 用語と定義(説明)
|
|
33
|
+
- 質問と回答
|
|
34
|
+
- 日付と記録
|
|
13
|
-
|
|
35
|
+
- 役とそれを担う人の名前(劇での配役や組織での役職など)
|
|
36
|
+
- 原因(または予想)と結果
|
|
37
|
+
- データのトピック(キー)と値
|
|
38
|
+
等々
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
###各リスト要素を使った例
|
|
14
|
-
```
|
|
42
|
+
```HTML
|
|
15
|
-
<
|
|
43
|
+
<h1>ビーフカレーのレシピ</h1>
|
|
44
|
+
<p>おいしいビーフカレーを作りましょう。</p>
|
|
45
|
+
|
|
16
|
-
<h2>
|
|
46
|
+
<h2>材料</h2>
|
|
47
|
+
<p>4人前</p>
|
|
48
|
+
<!-- 箇条書きの項目<li> -->
|
|
17
49
|
<ul>
|
|
18
|
-
<li>
|
|
50
|
+
<li>牛肉 400g</li>
|
|
19
|
-
<li>1000円札 3枚</li>
|
|
20
|
-
<li>
|
|
51
|
+
<li>たまねぎ 1個</li>
|
|
21
|
-
<li>
|
|
52
|
+
<li>にんじん 1本</li>
|
|
53
|
+
<li>以下略</li>
|
|
22
54
|
</ul>
|
|
23
55
|
|
|
56
|
+
<h2>作り方</h2>
|
|
57
|
+
<!-- 順序が重要な項目<li> -->
|
|
58
|
+
<ol>
|
|
59
|
+
<li>たまねぎの半分をすりおろし、残りは薄切りにする。</li>
|
|
60
|
+
<li>牛肉が大きい場合はひと口より少し大きめの食べやすいサイズに切る。</li>
|
|
61
|
+
<li>すりおろしたたまねぎと牛肉を混ぜあわせ、塩コショウを振って1時間置く。</li>
|
|
62
|
+
<li>にんじんとにんにく・しょうがをすりおろす。</li>
|
|
63
|
+
<li>以下略</li>
|
|
24
|
-
<
|
|
64
|
+
</ol>
|
|
65
|
+
|
|
66
|
+
<h2>ビーフカレーにおすすめの部位</h2>
|
|
67
|
+
<p>ビーフカレーにぴったりな牛肉の部位を紹介します。色々な部位を試して自分好みのビーフカレーを作ってみてください。</p>
|
|
68
|
+
<!-- 語句(項目)<dt>と文章<dd>の組み合わせ -->
|
|
25
69
|
<dl>
|
|
26
|
-
<dt>
|
|
70
|
+
<dt>バラ肉</dt>
|
|
71
|
+
<dd>赤身と脂身が薄く交互に重なった部位で、煮込んでも固くならず煮崩れないのでカレーと相性が良い。</dd>
|
|
27
|
-
<
|
|
72
|
+
<dt>すね肉</dt>
|
|
73
|
+
<dd>最も運動量が高い部位であるため筋や腱が多く脂肪分は少ない。しかし、じっくりと煮込む事で柔らかく旨味の濃い仕上がりになるため、一手間かけて作る時におすすめの部位。</dd>
|
|
74
|
+
<dt>もも肉</dt>
|
|
28
|
-
<dd>
|
|
75
|
+
<dd>以下略</dd>
|
|
29
|
-
<dd>500円硬貨 1枚</dd>
|
|
30
|
-
<dd>100円硬貨 6枚</dd>
|
|
31
76
|
</dl>
|
|
32
77
|
|
|
33
|
-
<
|
|
78
|
+
<h2>よくある質問</h2>
|
|
79
|
+
<p>このレシピに関してよく寄せられる質問への回答をまとめました。</p>
|
|
80
|
+
<!-- 語句(項目)<dt>と文章<dd>の組み合わせ -->
|
|
34
81
|
<dl>
|
|
82
|
+
<dt>牛肉以外のお肉でもおいしく出来ますか？</dt>
|
|
83
|
+
<dd>もちろん！牛肉以外のお肉でもおいしくできます。お好きなお肉を使って自分好みのカレーを作ってみてください。</dd>
|
|
84
|
+
<dt>豚肉で作る時はどのような部位がおすすめですか？</dt>
|
|
85
|
+
<dd>甘い脂身と柔らかい肉質のばら肉や、しっかりとした噛みごたえと脂身の少ないヘルシーなもも肉がおすすめです。</dd>
|
|
86
|
+
<dt>鶏肉で作る時はどのような部位がおすすめですか？</dt>
|
|
35
|
-
<
|
|
87
|
+
<dd>以下略</dd>
|
|
36
|
-
<dd>紙幣は10000円札が2枚と1000円札が3枚ある。また硬貨は500円玉が1枚と100円玉が6枚ある。</dd>
|
|
37
88
|
</dl>
|
|
38
89
|
```
|
|
39
|
-
例1) 財布の中身(見出し)に関する項目を箇条書きにしたリスト
|
|
40
|
-
箇条書きの順不同リストの使い方として問題はありません
|
|
41
|
-
※分類が必要な時はリストを入れ子にしてツリー構造にする
|
|
42
90
|
|
|
43
|
-
|
|
91
|
+
あとはドキュメントとその文脈に応じてリストを使い分ける事を意識していれば適切なマークアップが出来ると思います。
|
|
44
|
-
定義リストの使い方として間違いではないと思いますが、若干不自然かもしれません
|
|
45
|
-
|
|
46
|
-
例3) 財布の中身(項目)に関して文章で説明している
|
|
47
|
-
定義リストの使い方として問題はありません
|
3
より簡潔なまとめに編集し直す
answer
CHANGED
|
@@ -1,101 +1,47 @@
|
|
|
1
|
-
ul要素によるリストは**箇条書きの順不同リスト**で、**順序に意味の無い**項目を並べたリストです。
|
|
2
|
-
|
|
1
|
+
自分の中でも少し曖昧な部分があったので、整理も兼ねて書き直しました。
|
|
3
2
|
|
|
3
|
+
**リスト(一覧)にする内容が項目**であれば順不同リスト(ul)を使用。
|
|
4
|
+
**項目の順序が重要なリスト**であれば順序リスト(ol)を使用。
|
|
5
|
+
**項目について、補足や説明などの何らかの文章が必要**な場合は定義リスト(dl)を使用。
|
|
6
|
+
※文章とは**箇条書きの形式を取らない文の連なり**です。
|
|
7
|
+
|
|
4
|
-
|
|
8
|
+
…ほぼ質問にも書いてある事ですね。
|
|
9
|
+
ちなみに質問には「単語」と書かれていますが、正確には「項目」なので、そこを意識されると良いのではないでしょうか。
|
|
10
|
+
|
|
11
|
+
あとはコメントで質問された「一見すると同じ様に見える順不同リストと定義リストの違い」について。
|
|
12
|
+
定義リストは**語句(項目)と文章の組み合わせを列挙したリスト**であり、**語句(項目)と項目の組み合わせを列挙したリスト**ではありません。
|
|
13
|
+
定義リストでのマークアップも間違ってはいないと思いますが、順不同リストを使用した方がより適切です。
|
|
5
14
|
```lang-HTML
|
|
15
|
+
<!-- 例1 -->
|
|
6
16
|
<h2>財布の中身</h2>
|
|
7
17
|
<ul>
|
|
8
18
|
<li>10000円札 2枚</li>
|
|
9
19
|
<li>1000円札 3枚</li>
|
|
10
20
|
<li>500円硬貨 1枚</li>
|
|
11
21
|
<li>100円硬貨 6枚</li>
|
|
12
|
-
<li>ライフカード</li>
|
|
13
|
-
<li>Pontaカード</li>
|
|
14
|
-
<li>TSUTAYAカード</li>
|
|
15
22
|
</ul>
|
|
16
23
|
|
|
17
|
-
```
|
|
18
|
-
```lang-HTML
|
|
19
|
-
<
|
|
24
|
+
<!-- 例2 -->
|
|
20
|
-
<
|
|
25
|
+
<dl>
|
|
21
|
-
<
|
|
26
|
+
<dt>財布の中身</dt>
|
|
22
|
-
<ul>
|
|
23
|
-
|
|
27
|
+
<dd>10000円札 2枚</dd>
|
|
24
|
-
|
|
28
|
+
<dd>1000円札 3枚</dd>
|
|
25
|
-
</ul>
|
|
26
|
-
</li>
|
|
27
|
-
|
|
28
|
-
<li>硬貨
|
|
29
|
-
<ul>
|
|
30
|
-
|
|
29
|
+
<dd>500円硬貨 1枚</dd>
|
|
31
|
-
|
|
30
|
+
<dd>100円硬貨 6枚</dd>
|
|
32
|
-
</ul>
|
|
33
|
-
</li>
|
|
34
|
-
|
|
35
|
-
<li>クレジットカード
|
|
36
|
-
<ul>
|
|
37
|
-
<li>ライフカード</li>
|
|
38
|
-
</ul>
|
|
39
|
-
</li>
|
|
40
|
-
|
|
41
|
-
<li>会員証
|
|
42
|
-
<ul>
|
|
43
|
-
<li>Pontaカード</li>
|
|
44
|
-
<li>TSUTAYAカード</li>
|
|
45
|
-
</ul>
|
|
46
|
-
</li>
|
|
47
|
-
|
|
48
|
-
<li>ポイントカード<!-- 定義リストの様にまとめられない -->
|
|
49
|
-
<ul>
|
|
50
|
-
<li>Pontaカード</li>
|
|
51
|
-
<li>TSUTAYAカード</li>
|
|
52
|
-
</ul>
|
|
53
|
-
</li>
|
|
54
31
|
</dl>
|
|
55
|
-
```
|
|
56
|
-
定義リストとは**語句と文章の組み合わせを列挙したリスト**なので、**語句と文章をひとかたまりとした分類が必要になるリスト**と考えると分かりやすいかもしれません。
|
|
57
32
|
|
|
58
|
-
**語句(dt)について書いた文章(dd)の一覧(dl)**
|
|
59
|
-
|
|
33
|
+
<!-- 例3 -->
|
|
60
34
|
<dl>
|
|
61
35
|
<dt>財布の中身</dt>
|
|
62
|
-
<dd>
|
|
36
|
+
<dd>紙幣は10000円札が2枚と1000円札が3枚ある。また硬貨は500円玉が1枚と100円玉が6枚ある。</dd>
|
|
63
37
|
</dl>
|
|
64
38
|
```
|
|
65
|
-
またdd要素は項目ではないので、項目と考えられる内容を追加する時は箇条書きリストを併用します。
|
|
66
|
-
```lang-HTML
|
|
67
|
-
|
|
39
|
+
例1) 財布の中身(見出し)に関する項目を箇条書きにしたリスト
|
|
68
|
-
|
|
40
|
+
箇条書きの順不同リストの使い方として問題はありません
|
|
69
|
-
|
|
41
|
+
※分類が必要な時はリストを入れ子にしてツリー構造にする
|
|
70
|
-
<dd>
|
|
71
|
-
<ul>
|
|
72
|
-
<li>10000円札 2枚</li>
|
|
73
|
-
<li>1000円札 3枚</li>
|
|
74
|
-
</ul>
|
|
75
|
-
</dd>
|
|
76
42
|
|
|
77
|
-
|
|
43
|
+
例2) 財布の中身(項目)に関して項目が並べられているのみで文章で説明出来ていない
|
|
78
|
-
<dd>
|
|
79
|
-
<ul>
|
|
80
|
-
|
|
44
|
+
定義リストの使い方として間違いではないと思いますが、若干不自然かもしれません
|
|
81
|
-
<li>100円硬貨 6枚</li>
|
|
82
|
-
</ul>
|
|
83
|
-
</dd>
|
|
84
45
|
|
|
85
|
-
<dt>クレジットカード</dt>
|
|
86
|
-
<dd>
|
|
87
|
-
<ul>
|
|
88
|
-
<li>ライフカード</li>
|
|
89
|
-
</ul>
|
|
90
|
-
</dd>
|
|
91
|
-
|
|
92
|
-
|
|
46
|
+
例3) 財布の中身(項目)に関して文章で説明している
|
|
93
|
-
<dt>ポイントカード</dt><!-- 語句を続けて並べる事でひとまとめに出来る -->
|
|
94
|
-
<dd>
|
|
95
|
-
<ul>
|
|
96
|
-
<li>Pontaカード</li>
|
|
97
|
-
<li>TSUTAYAカード</li>
|
|
98
|
-
|
|
47
|
+
定義リストの使い方として問題はありません
|
|
99
|
-
</dd>
|
|
100
|
-
</dl>
|
|
101
|
-
```
|
2
修正
answer
CHANGED
|
@@ -1,35 +1,101 @@
|
|
|
1
1
|
ul要素によるリストは**箇条書きの順不同リスト**で、**順序に意味の無い**項目を並べたリストです。
|
|
2
2
|
文字通り、単純に項目を箇条書きで書き出したい時はこちらを使います。
|
|
3
|
+
|
|
4
|
+
**項目(li)を書いた一覧(ul)**
|
|
3
5
|
```lang-HTML
|
|
4
6
|
<h2>財布の中身</h2>
|
|
5
7
|
<ul>
|
|
6
|
-
|
|
8
|
+
<li>10000円札 2枚</li>
|
|
7
|
-
|
|
9
|
+
<li>1000円札 3枚</li>
|
|
8
|
-
|
|
10
|
+
<li>500円硬貨 1枚</li>
|
|
9
|
-
|
|
11
|
+
<li>100円硬貨 6枚</li>
|
|
10
|
-
|
|
12
|
+
<li>ライフカード</li>
|
|
11
|
-
|
|
13
|
+
<li>Pontaカード</li>
|
|
12
|
-
|
|
14
|
+
<li>TSUTAYAカード</li>
|
|
13
15
|
</ul>
|
|
16
|
+
|
|
14
17
|
```
|
|
18
|
+
```lang-HTML
|
|
19
|
+
<h2>財布の中身</h2>
|
|
20
|
+
<ul>
|
|
21
|
+
<li>紙幣
|
|
22
|
+
<ul>
|
|
23
|
+
<li>10000円札 2枚</li>
|
|
24
|
+
<li>1000円札 3枚</li>
|
|
25
|
+
</ul>
|
|
26
|
+
</li>
|
|
27
|
+
|
|
28
|
+
<li>硬貨
|
|
29
|
+
<ul>
|
|
30
|
+
<li>500円硬貨 1枚</li>
|
|
31
|
+
<li>100円硬貨 6枚</li>
|
|
32
|
+
</ul>
|
|
33
|
+
</li>
|
|
34
|
+
|
|
35
|
+
<li>クレジットカード
|
|
36
|
+
<ul>
|
|
37
|
+
<li>ライフカード</li>
|
|
38
|
+
</ul>
|
|
39
|
+
</li>
|
|
40
|
+
|
|
41
|
+
<li>会員証
|
|
42
|
+
<ul>
|
|
43
|
+
<li>Pontaカード</li>
|
|
44
|
+
<li>TSUTAYAカード</li>
|
|
45
|
+
</ul>
|
|
46
|
+
</li>
|
|
47
|
+
|
|
48
|
+
<li>ポイントカード<!-- 定義リストの様にまとめられない -->
|
|
49
|
+
<ul>
|
|
50
|
+
<li>Pontaカード</li>
|
|
51
|
+
<li>TSUTAYAカード</li>
|
|
52
|
+
</ul>
|
|
53
|
+
</li>
|
|
54
|
+
</dl>
|
|
55
|
+
```
|
|
15
56
|
定義リストとは**語句と文章の組み合わせを列挙したリスト**なので、**語句と文章をひとかたまりとした分類が必要になるリスト**と考えると分かりやすいかもしれません。
|
|
57
|
+
|
|
58
|
+
**語句(dt)について書いた文章(dd)の一覧(dl)**
|
|
16
59
|
```lang-HTML
|
|
60
|
+
<dl>
|
|
61
|
+
<dt>財布の中身</dt>
|
|
62
|
+
<dd>財布の中にある紙幣は10000円札が2枚と1000円札が3枚。硬貨は500円玉が1枚と100円玉が6枚。あとはクレジットカードが1枚に、PontaカードとTSUTAYAカードが入っている。</dd>
|
|
63
|
+
</dl>
|
|
64
|
+
```
|
|
65
|
+
またdd要素は項目ではないので、項目と考えられる内容を追加する時は箇条書きリストを併用します。
|
|
66
|
+
```lang-HTML
|
|
17
67
|
<h2>財布の中身</h2>
|
|
18
68
|
<dl>
|
|
19
|
-
|
|
69
|
+
<dt>紙幣</dt>
|
|
70
|
+
<dd>
|
|
71
|
+
<ul>
|
|
20
|
-
|
|
72
|
+
<li>10000円札 2枚</li>
|
|
21
|
-
|
|
73
|
+
<li>1000円札 3枚</li>
|
|
74
|
+
</ul>
|
|
75
|
+
</dd>
|
|
22
76
|
|
|
23
|
-
|
|
77
|
+
<dt>硬貨</dt>
|
|
78
|
+
<dd>
|
|
79
|
+
<ul>
|
|
24
|
-
|
|
80
|
+
<li>500円硬貨 1枚</li>
|
|
25
|
-
|
|
81
|
+
<li>100円硬貨 6枚</li>
|
|
82
|
+
</ul>
|
|
83
|
+
</dd>
|
|
26
84
|
|
|
27
|
-
|
|
85
|
+
<dt>クレジットカード</dt>
|
|
86
|
+
<dd>
|
|
87
|
+
<ul>
|
|
28
|
-
|
|
88
|
+
<li>ライフカード</li>
|
|
89
|
+
</ul>
|
|
90
|
+
</dd>
|
|
29
91
|
|
|
30
|
-
|
|
92
|
+
<dt>会員証</dt>
|
|
31
|
-
|
|
93
|
+
<dt>ポイントカード</dt><!-- 語句を続けて並べる事でひとまとめに出来る -->
|
|
94
|
+
<dd>
|
|
95
|
+
<ul>
|
|
32
|
-
|
|
96
|
+
<li>Pontaカード</li>
|
|
33
|
-
|
|
97
|
+
<li>TSUTAYAカード</li>
|
|
98
|
+
</ul>
|
|
99
|
+
</dd>
|
|
34
100
|
</dl>
|
|
35
101
|
```
|
1
少し修正
answer
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<li>TSUTAYAカード</li>
|
|
13
13
|
</ul>
|
|
14
14
|
```
|
|
15
|
-
定義リストとは**語句と文章の組み合わせを列挙したリスト**なので、**分類が必要になるリスト**と考えると分かりやすいかもしれません。
|
|
15
|
+
定義リストとは**語句と文章の組み合わせを列挙したリスト**なので、**語句と文章をひとかたまりとした分類が必要になるリスト**と考えると分かりやすいかもしれません。
|
|
16
16
|
```lang-HTML
|
|
17
17
|
<h2>財布の中身</h2>
|
|
18
18
|
<dl>
|