#author("2018-03-13T23:01:24+09:00;2007-11-01T22:29:42+09:00","","")
*リストの多重化で出力されるタグの誤り [#rf30e51b]
-ページ: BugTrack
-投稿者: [[reimy]]
-優先順位: 普通
-状態: 完了
-カテゴリー: 本体バグ
-投稿日: 2002-06-27 (木) 06:33:54
-優先順位: 普通
-バージョン:
**メッセージ [#s660dc84]
-[[BugTrack/30の続編]]
-[[BugTrack/30/の続編]]
リスト出力タグで、現在は下記のように出力されています。
<ul>
<li>hogehoge</li>
<ul>
<li>hogehoge</li>
</ul>
</ul>
<dl>
<dt>hogehoge</dt>
<dd>hogehoge</dd>
<dl>
<dt>hogehoge</dt>
<dd>hogehoge</dt>
</dl>
</dl>
~<ul><dl>の子要素に<ul>や<dl>は置けないので下記のように修正する必要があります。
<ul>
<li>hogehoge</li>
<li><ul>
<li>hogehoge</li>
</ul></li>
</ul>
<dl>
<dt>hogehoge</dt>
<dd>hogehoge</dd>
<dd><dl>
<dt>hogehoge</dt>
<dd>hogehoge</dd>
</dl></dd>
</dl>
この件についてはsngさんのところでも話が出てましたね。
基本的に<ul>の子要素は<li>だけ。<dl>の子要素は<dt>と<dd>だけ。
----
-でも表示が上下でちがいませんか？ -- [[ゆう]] SIZE(1):2002-06-27 (木) 18:50:07
-なんか文字化けしてたので、消しちゃいました。もう一度書き込みお願いします。 -- [[ゆう]] SIZE(1):2002-06-28 (金) 02:50:41
-表示は基本的に違わないですよ。ただ現状の正しくない記述でブラウザが表示しているのは個々のブラウザが「適当に」解釈して表示しているのでブラウザによる差異があります。正しく記述しておけばスタイルシートを適用することでどのブラウザでも同じように表示されます(実際は例外多し)。 -- [[reimy]] SIZE(1):2002-06-28 (金) 04:03:20
-
#ref(ul_li.gif)
で、上が正規のHTML, 下が現行のHTMLなんですが。これはoperaですがIEも同じように表示されないとおもいます。 -- [[ゆう]] SIZE(1):2002-06-28 (金) 19:54:57
-ul-ie6.gifはIE6で下の正規のHTMLを表示した場合の例です。IEの問題なんですけど、見え方を考えると間違えたHTMLでも採用せざるを得ないのかも。 -- [[kawara]] SIZE(1):2002-06-28 (金) 20:07:43
●W3C HTML4.01 [[Strict DTD:http://www.w3.org/TR/html4/strict.dtd]] / [[Transition DTD:http://www.w3.org/TR/html4/loose.dtd]] より該当箇所を抜粋
<!ELEMENT DL - - (DT|DD)+ -- definition list -->
>意味：DLは開始タグ・終了タグを省略できず、子要素はDTもしくはDDを１つ以上含み、その順序は問わない。それ以外は子要素にできない。
<!ELEMENT OL - - (LI)+ -- ordered list -->
>意味：OLは開始タグ・終了タグを省略できず、子要素はLIを1つ以上含む。それ以外は子要素にできない。
<!ELEMENT UL - - (LI)+ -- unordered list -->
>意味：ULは開始タグ・終了タグを省略できず、子要素はLIを１つ以上含む。それ以外は子要素にできない。
-どのブラウザもW3C''準拠''ってことで、''適合''ではないということですね(苦笑)。 -- [[reimy]] SIZE(1):2002-06-28 (金) 20:45:11
●[[Another HTML-lint:http://openlab.ring.gr.jp/k16/htmllint/htmllint.html]]でチェックしてみました。やはり<ul>の直下に<ul>は置けないようです。
チェックの結果は以下のとおりです。
HTML4.01 Transitional としてチェックしました。
3個のエラーがありました。このHTMLは -10点です。タグが 11種類 17組使われています。
先頭の数字はエラーのおおまかな重要度を 0～9 で示しています(減点数ではありません)。少ない数字は軽く、9 になるほど致命的です。
7: line 18: <UL> を 15行目の <UL>～</UL> 内に書くことはできません。</UL> を補ってください。 → 解説 40
7: line 18: 15行目の <UL> に対応する終了タグ </UL> が見つかりません。 → 解説 69
7: line 21: </UL> に対応する開始タグ <UL> が見つかりません。 → 解説 66
チェックしたHTMLは以下のとおりです。
1. <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html lang="ja">
3. <head>
4. <meta http-equiv="content-type" content="text/html; charset=shift_jis">
5. <meta http-equiv="content-style-type" content="text/css">
6. <meta http-equiv="content-script-type" content="text/javascript">
7. <meta name="generator" content="QX Editor with HTML4.01/CSS 2 Macro">
8. <meta name="author" content="Reimy">
9. <link rev="made" href="mailto:webmaster@reimy.com">
10. <link rel="next" href="test2.html">
11. <title>test</title>
12. </head>
13. <body>
14. <div>
15. <ul>
16. <li>あ</li>
17. <li>い</li>
18. <ul>
19. <li>う</li>
20. </ul>
21. </ul>
22. </div>
23. </body>
24. </html>
-Another HTML-lintで残念ながら「よくできました」は得られず、「がんばりましょう」と言われました(笑い) -- [[reimy]] SIZE(1):2002-06-28 (金) 21:13:21
-つまりAnother HTML-linkは下記のようにしろということですね。 -- [[reimy]] SIZE(1):2002-06-28 (金) 21:15:58
1. <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html lang="ja">
3. <head>
4. <meta http-equiv="content-type" content="text/html; charset=shift_jis">
5. <meta http-equiv="content-style-type" content="text/css">
6. <meta http-equiv="content-script-type" content="text/javascript">
7. <meta name="generator" content="QX Editor with HTML4.01/CSS 2 Macro">
8. <meta name="author" content="Reimy">
9. <link rev="made" href="mailto:webmaster@reimy.com">
10. <link rel="next" href="test2.html">
11. <title>test</title>
12. </head>
13. <body>
14. <div>
15. <ul class="nest1">
16. <li>あ</li>
17. <li>い</li>
18. </ul>
19. <ul class="nest2">
20. <li>う</li>
21. </ul>
22. </div>
23. </body>
24. </html>
W3Cの規格に準拠していないブラウザに対しては、ネストの深さはスタイルシートで強引に
ul.nest1{
list-style-type:disc;
margin-left:2em;
}
ul.nest2{
list-style-type:circle;
margin-left:4em;
}
のように指定すればよいと(爆)
-これだとスタイルシート非対応のブラウザではネストの深さがわからなくなるような… -- [[reimy]] SIZE(1):2002-06-28 (金) 21:27:08
-うーん、基本的にスタイルシート非対応でもちゃんと見れてほしいですね。って私は普段[[w3m]]つかってるんで。 -- [[ゆう]] SIZE(1):2002-07-01 (月) 15:18:44
--W3C準拠よりもw3m準拠のほうがブラウザ的にはやさしいのかしら。(笑) -- [[kawara]] SIZE(1):2002-07-01 (月) 16:19:01
-というわけでW3C準拠といいつつ、W3Cの使用に従っていないブラウザ側の問題ということで保留ですね。 -- [[reimy]] SIZE(1):2002-07-01 (月) 15:49:47
//#comment
![[PukiWiki]](image/pukiwiki-dev.png "[PukiWiki]")
