回答編集履歴
5
修正
test
CHANGED
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
|
|
133
133
|
|
|
134
134
|
|
|
135
|
-
リスト構造にはしたいが、リスト要素は使用したくない場合、ARIAの`list`, `listitem`ロールを使用することができます。しかし、この方法では、リスト項目の順序は順不同になります。そのため、順番が重要な場合などには、適切な要素を使用する必要があります。
|
|
135
|
+
リスト構造にはしたいが、リスト要素は使用したくない場合、ARIAの`list`, `listitem`ロールを使用することができます。しかし、この方法では、**リスト項目の順序は順不同になります**。そのため、順番が重要な場合などには、適切な要素を使用する必要があります。
|
|
136
136
|
|
|
137
137
|
|
|
138
138
|
|
4
追記、修正
test
CHANGED
|
@@ -1,42 +1,140 @@
|
|
|
1
1
|
## `section`要素と`dl`要素の違い
|
|
2
2
|
|
|
3
|
-
以下のコードは、セクションに
|
|
3
|
+
以下のコードでは、「セクション内に見出しAと、段落B」が存在します。この場合は、`section`要素内で見出しや段落を複数定義しても、それらはリストにはならず、ひとつのセクションの中にある複数の見出しと段落になります。
|
|
4
4
|
|
|
5
5
|
```HTML
|
|
6
6
|
|
|
7
7
|
<section>
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<h2>A</h2>
|
|
10
|
-
|
|
10
|
+
|
|
11
|
-
|
|
11
|
+
<p>B</p>
|
|
12
12
|
|
|
13
13
|
</section>
|
|
14
14
|
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
一方、以下のコードは、説明リスト内
|
|
17
|
+
一方、以下のコードでは、「説明リスト内に用語Aと、それに関連付けられた説明B」が存在します。この場合は、リスト内の用語と説明が関連付けられているだけのため、**`dt`要素が見出しとしての役割を持たず、関連付けられたグループはセクションと同等ではありません**。また、当然ですが、`dl`要素内で定義した用語とその説明は、すべてリストとなります。
|
|
20
18
|
|
|
21
19
|
```HTML
|
|
22
20
|
|
|
23
21
|
<dl>
|
|
24
22
|
|
|
25
|
-
|
|
23
|
+
<dt>A</dt>
|
|
26
|
-
|
|
24
|
+
|
|
27
|
-
|
|
25
|
+
<dd>B</dd>
|
|
28
26
|
|
|
29
27
|
</dl>
|
|
30
28
|
|
|
31
29
|
```
|
|
32
30
|
|
|
33
|
-
|
|
34
|
-
|
|
35
31
|
## 商品名と、それに対する説明のリスト
|
|
36
32
|
|
|
37
33
|
`section`要素, `dl`要素のどちらも使うことができます。
|
|
38
34
|
|
|
39
|
-
それが**リストであることが重要ならば、`dl`要素を使用する**と良いと思います。`dd`要素内には、フローコンテンツを入れることができるので、説明が複数の段落になる場合にも対応は可能です。
|
|
35
|
+
それが**リストであることが重要ならば、`dl`要素を使用する**と良いと思います。`dd`要素内には、フローコンテンツを入れることができるので、説明が複数の段落になる場合にも対応は可能です。
|
|
36
|
+
|
|
37
|
+
```HTML
|
|
38
|
+
|
|
39
|
+
<dl>
|
|
40
|
+
|
|
41
|
+
<dt>テキスト1</dt>
|
|
42
|
+
|
|
43
|
+
<dd>
|
|
44
|
+
|
|
45
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
46
|
+
|
|
47
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
48
|
+
|
|
49
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
50
|
+
|
|
51
|
+
</dd>
|
|
52
|
+
|
|
53
|
+
</dl>
|
|
54
|
+
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
また、`dd`要素内に`section`要素を入れることもできますが、そのような関連付けが正しいかはわかりません。もし、説明を一つのセクションにすることができ、それがリストであるべきなのであれば、ありえる構造だと思います。
|
|
60
|
+
|
|
61
|
+
```HTML
|
|
62
|
+
|
|
63
|
+
<section>
|
|
64
|
+
|
|
65
|
+
<h1>テキスト1</h1>
|
|
66
|
+
|
|
67
|
+
<dl>
|
|
68
|
+
|
|
69
|
+
<dt><h2>テキスト2</h2></dt>
|
|
70
|
+
|
|
71
|
+
<dd>
|
|
72
|
+
|
|
73
|
+
<section>
|
|
74
|
+
|
|
75
|
+
<h1>テキスト3</h1>
|
|
76
|
+
|
|
77
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
78
|
+
|
|
79
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
80
|
+
|
|
81
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
82
|
+
|
|
83
|
+
</section>
|
|
84
|
+
|
|
85
|
+
</dd>
|
|
86
|
+
|
|
87
|
+
</dl>
|
|
88
|
+
|
|
89
|
+
</section>
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
リストであることが重要でなければ、説明リストは使わず`section`要素をそのまま並べても良いと思います。
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
```HTML
|
|
100
|
+
|
|
101
|
+
<section>
|
|
102
|
+
|
|
103
|
+
<h1>テキスト1</h1>
|
|
104
|
+
|
|
105
|
+
<section>
|
|
106
|
+
|
|
107
|
+
<h1>テキスト2</h1>
|
|
108
|
+
|
|
109
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
110
|
+
|
|
111
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
112
|
+
|
|
113
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
114
|
+
|
|
115
|
+
</section>
|
|
116
|
+
|
|
117
|
+
<section>
|
|
118
|
+
|
|
119
|
+
<h1>テキスト3</h1>
|
|
120
|
+
|
|
121
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
122
|
+
|
|
123
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
124
|
+
|
|
125
|
+
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
|
|
126
|
+
|
|
127
|
+
</section>
|
|
128
|
+
|
|
129
|
+
</section>
|
|
130
|
+
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
リスト構造にはしたいが、リスト要素は使用したくない場合、ARIAの`list`, `listitem`ロールを使用することができます。しかし、この方法では、リスト項目の順序は順不同になります。そのため、順番が重要な場合などには、適切な要素を使用する必要があります。
|
|
136
|
+
|
|
137
|
+
|
|
40
138
|
|
|
41
139
|
|
|
42
140
|
|
|
@@ -44,11 +142,31 @@
|
|
|
44
142
|
|
|
45
143
|
`section`要素, `dl`要素のどちらも使うことができます。
|
|
46
144
|
|
|
47
|
-
それがリストであることが
|
|
145
|
+
上でも書きましたが、それが**リストであることが重要ならば、`dl`要素を使用する**と良いと思います。
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
146
|
+
|
|
51
|
-
こういった
|
|
147
|
+
こういったものは入れ子になっていくことが多いと思いますが、**`dd`要素内に`dl`要素を配置することで、説明リストの入れ子を表現できます**。
|
|
148
|
+
|
|
149
|
+
```HTML
|
|
150
|
+
|
|
151
|
+
<dl>
|
|
152
|
+
|
|
153
|
+
<dt>テキスト1</dt>
|
|
154
|
+
|
|
155
|
+
<dd>テキスト2
|
|
156
|
+
|
|
157
|
+
<dl>
|
|
158
|
+
|
|
159
|
+
<dt>テキスト3</dt>
|
|
160
|
+
|
|
161
|
+
<dd>テキスト4</dd>
|
|
162
|
+
|
|
163
|
+
</dl>
|
|
164
|
+
|
|
165
|
+
</dd>
|
|
166
|
+
|
|
167
|
+
</dl>
|
|
168
|
+
|
|
169
|
+
```
|
|
52
170
|
|
|
53
171
|
|
|
54
172
|
|
|
@@ -56,14 +174,38 @@
|
|
|
56
174
|
|
|
57
175
|
`section`要素, `dl`要素のどちらも使うことができます。
|
|
58
176
|
|
|
59
|
-
それがリストであることが
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
177
|
+
上でも書きましたが、それが**リストであることが重要ならば、`dl`要素を使用する**と良いと思います。
|
|
178
|
+
|
|
179
|
+
ただし、**新着情報のリストは`dl`要素で記述するべきではありません**。新着情報のリストは通常、「日時 : 新着情報の概要」という構造になると思います。ここで、**新着情報のリストには、用語(`term`)が存在しません**。もし、日付を用語とした場合、日付に対する説明をしていることになってしまいます。これは、新着情報を表すリストとして、不適切な関連付けだと思います。今回の場合、**順序が重要な項目を列挙する時に使用する`ol`要素が適切**です。
|
|
180
|
+
|
|
181
|
+
```HTML
|
|
182
|
+
|
|
183
|
+
<ol reversed>
|
|
184
|
+
|
|
185
|
+
<li>
|
|
186
|
+
|
|
187
|
+
<time datetime="2018-10-27">2018年10月27日</time>
|
|
188
|
+
|
|
189
|
+
<a href="#">テキストテキストテキスト</a>
|
|
190
|
+
|
|
191
|
+
</li>
|
|
192
|
+
|
|
193
|
+
<li>
|
|
194
|
+
|
|
195
|
+
<time datetime="2018-10-26">2018年10月26日</time>
|
|
196
|
+
|
|
197
|
+
<a href="#">テキストテキストテキスト</a>
|
|
198
|
+
|
|
199
|
+
</li>
|
|
200
|
+
|
|
201
|
+
<li>
|
|
202
|
+
|
|
203
|
+
<time datetime="2018-10-25">2018年10月25日</time>
|
|
204
|
+
|
|
205
|
+
<a href="#">テキストテキストテキスト</a>
|
|
206
|
+
|
|
207
|
+
</li>
|
|
208
|
+
|
|
209
|
+
</ol>
|
|
210
|
+
|
|
211
|
+
```
|
3
修正
test
CHANGED
|
@@ -66,4 +66,4 @@
|
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
|
|
69
|
-
「新着情報のリストは、何かを説明するものではない」となると、次は`ul`要素で記述することを考えるかと思います。しかし、今回記述するのは**新着情報のリストのため、リストの各項目の順序が重要**です。そのため、**新着情報は`ol`要素で記述するべき**
|
|
69
|
+
「新着情報のリストは、何かを説明するものではない」となると、次は`ul`要素で記述することを考えるかと思います。しかし、今回記述するのは**新着情報のリストのため、リストの各項目の順序が重要**です。そのため、**新着情報は`ol`要素で記述するべき**です。
|
2
修正
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
## `section`要素と`dl`要素の違い
|
|
2
2
|
|
|
3
|
-
以下のコードは、セクションに対する見出しAと、段落Bが存在します。また、この場合は、`section`要素内で見出しや段落を複数定義しても、それらはリストにはならず、ひとつのセクションの複数の見出し、段落となります。
|
|
3
|
+
以下のコードは、セクションに対する見出しAと、段落Bが存在します。また、この場合は、`section`要素内で見出しや段落を複数定義しても、それらはリストにはならず、ひとつのセクションの中にある複数の見出し、段落となります。
|
|
4
4
|
|
|
5
5
|
```HTML
|
|
6
6
|
|
1
修正
test
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
|
|
51
|
-
こういった類のものは入れ子になっていきますが、`dd`要素内に`dl`要素を配置することで、説明リストの入れ子を表現することができます。
|
|
51
|
+
こういった類のものは入れ子になっていきますが、**`dd`要素内に`dl`要素を配置することで、説明リストの入れ子を表現することができます**。
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
@@ -60,10 +60,10 @@
|
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
63
|
-
ただし、新着情報のリストを`dl`要素で記述することは、妥当とは考えられません。
|
|
63
|
+
ただし、**新着情報のリストを`dl`要素で記述することは、妥当とは考えられません**。
|
|
64
64
|
|
|
65
|
-
新着情報の説明リストでは、一体
|
|
65
|
+
新着情報の説明リストでは、一体何が用語(`term`)で何が説明(`description`)なのでしょうか？たとえば、日付を`dt`要素に記述した場合、それに対する説明を`dd`要素に記述していることになります。無理矢理、用語に相当するものを用意することはできますが、あまり良いこととはいえないと思います。
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
|
|
69
|
-
「新着情報のリストは、何かを説明するものではない」となると、次は`ul`要素で記述することを考えるかと思います。しかし、今回記述するのは新着情報のリストのため、リストの各項目の順序が重要です。そのため、新着情報は`ol`要素で記述するべきだと考えます。
|
|
69
|
+
「新着情報のリストは、何かを説明するものではない」となると、次は`ul`要素で記述することを考えるかと思います。しかし、今回記述するのは**新着情報のリストのため、リストの各項目の順序が重要**です。そのため、**新着情報は`ol`要素で記述するべき**だと考えます。
|