- ベストアンサー
HTMLタグ リストの入れ子とNetscapeについて
HTMLソースにおけるリストの入れ子とNetscapeについて 更新履歴を作成したく、リストの入れ子を作成しました。 Netscape以外のブラウザ（IE8、Opera、Safari、FireFox）では期待通りの表示になったのですが、Netscapeのみ表示が異なります。 以下ソース ------------------------------------------------------- [html] <ul id = "Style_NonIndex"> <li style="font-size:12px">*最終更新*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">ccccの更新</li> </ul></li> </ul> <br><br><br><br> <ul id = "Style_NonIndex"> <li style="font-size:12px">*更新履歴*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">aaaaの更新</li> </ul></li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">bbbbの更新</li> </ul></li> </ul> ------------------------------------------------------- [css] #Style_NonIndex { margin-top:0px; margin: 0px; padding: 0px; list-style: none; font-size: 10px; font-family: MSゴシック; color: #696969; } .List_Date { float: left; width: 70px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } .List_Comment { float: left; width: 250px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } ------------------------------------------------------- [予想表示] *最終更新* 2000/00/00 ccccの更新 *更新履歴* 2000/00/00 aaaaの更新 2000/00/00 bbbbの更新 ------------------------------------------------------- [Netscapeの表示] *最終更新* 2000/00/00 ccccの更新 *更新履歴* 2000/00/00 aaaaの更新 2000/00/00 bbbbの更新 ------------------------------------------------------- 他のブラウザでの表示は問題ないのですが、Netscapeのみ横リストとして表示されます。 表示が異なるのはNetscapeの仕様でしょうか？ それとも指定方法がおかしいのでしょうか。 大分煮詰まってしまったので、アドバイスをお願いいたします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> Netscape以外のブラウザ（IE8、Opera、Safari、FireFox）では期待通りの表示になったのですが、Netscapeのみ表示が異なります。 （IE8は手元にないので）IE6/7、Firefox2/3、Safari3、Opera9.61、NN7.1にて表示結果を試しましたが、”いずれも”[予想表示]ではなく[Netscapeの表示]と同様の結果になりましたが…？ HTMLの構造（マークアップ）から見直した方が良いと思います。今のリストの入れ子だと、 ・*最終更新* ・o 2000/00/00 o ccccの更新 ・*更新履歴* ・o 2000/00/00 o aaaaの更新 ・o 2000/00/00 o bbbbの更新 こういう構造になってしまい、論理的な入れ子になっていませんので。 ulの入れ子で組みたいのであれば、以下の構造などが妥当だと思います。 ・*最終更新* o 2000/00/00 ccccの更新 ・*更新履歴* o 2000/00/00 aaaaの更新更新更新更新更新更新更新更新更新更新更新更新更新更新更新 o 2000/00/00 bbbbの更新 ＃個人的にはこういう更新履歴はdlを使う方が多いのですが、今回は質問者様のulを入れ子にする構造をなるべく活かしてあります。 idやclassの使用法についてはNo.1様ご指摘の通りです。 ＃NNでid名class名にアンダーバーが入っていると無視されるのは確か6.xの時代ぐらいまでだったと思いますが。 詳細情報がありませんが、質問文のソースからしてXHTMLではなくHTMLになっていると思われます。 なのでとりあえず以下のサンプルは、HTML 4.01 Strictで作成してあります。 --------------------------------------------------------------------- 【HTML】sample.html --------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <link rel="stylesheet" href="css/sample.css" type="text/css" media="all"> </head> <body> <ul id="NonIndex"> <li>*最終更新* <ul> <li> <span class="date">2000/00/00</span> <p class="comment">ccccの更新</p> </li> </ul> </li> <li>*更新履歴* <ul> <li> <span class="date">2000/00/00</span> <p class="comment">aaaaの更新</p> </li> <li> <span class="date">2000/00/00</span> <p class="comment">bbbbの更新</p> </li> </ul> </li> </ul> </body> </html> --------------------------------------------------------------------- 【CSS】sample.css 「※～」は注釈ですので実際の使用の際は必ず削除を。 --------------------------------------------------------------------- ul#NonIndex { width: 328px;※質問文にはwidthの指定部分がありませんでしたが、70＋250＋2×2＋2×2＝328pxになる筈ですので。 margin: 0; padding: 0; list-style: none; font-size: 12px; font-family: "ＭＳ ゴシック", sans-selif;※フォント名にスペースを含む場合は、フォント名の前後をシングルクォーテーション（'）、またはダブルクォーテション（"）の引用符で括る必要があります。また、指定していたフォントが全て使えなかった場合にも対処できる様に値の最後には総称ファミリ（sans-selif等）を指定しておくことが推奨されています。 color: #696969; } ul#NonIndex li { margin: 0 0 4em 0; padding: 0; } ul#NonIndex li ul { list-style: none; margin: 0; padding: 0; } ul#NonIndex li ul li { zoom: 100%; margin: 0; } ul#NonIndex li ul li:after {※子要素がfloatしている場合の対処として用いられる所謂clearfixという手法です。上記の"zoom: 100%;"とセットで。 height: 0; visibility: hidden; content: "."; display: block; clear: both; } span.date { display: block; float: left; width: 70px; padding: 2px; overflow: auto; } p.comment { float: right; width: 250px; margin: 0; padding: 2px; } --------------------------------------------------------------------- これで先にあげた環境での当方の表示結果は、問題なくご希望の通りになっています。 何か意図した表示結果と違っていたり、検証条件（DOCTYPEなど）が違う様でしたら具体的に補足して下さい。
その他の回答 (1)
- salonpath
- ベストアンサー率48% (194/399)
Netscape入れてないですし、バージョンも書かれてないので想像で書いてます。 .List_xxx系のfloatが解除されてないようなので Style_NonIndexにclear:bothを入れてみたらどうなりますか？ それかStyle_NonIndexにwidthを指定する。 本件とは関係ないですけど cssの書き方としてID「Style_NonIndex」が何度も出てくるのは変です classに変えた方が良いです。 Netscapeはバージョンによってcssのセレクタに「_（アンダーバー）」が混ざってるとcssを無視するらしいので対応させようとしてるNetscapeにそのバグがあるのなら「_（アンダーバー）」を使わない名前に変更する必要があります。
お礼
ご回答ありがとうございます。 >Style_NonIndexにclear:bothを入れてみたらどうなりますか？ >それかStyle_NonIndexにwidthを指定する。 早速試してみましたが、残念ながら改善は見られませんでした。 >cssの書き方としてID「Style_NonIndex」が何度も出てくるのは変です >classに変えた方が良いです。 >Netscapeはバージョンによってcssのセレクタに「_（アンダーバー）」が混ざってるとcssを無視するらしいので対応させようとしてるNetscapeにそのバグがあるのなら「_（アンダーバー）」を使わない名前に変更する必要があります。 ご指摘ありがとうございます。 こちらもアドバイスを元に修正しました。 引き続きアドバイスをよろしくお願いいたします。
お礼
ご回答ありがとうございます。 >（IE8は手元にないので）IE6/7、Firefox2/3、Safari3、Opera9.61、NN7.1にて表示結果を試しましたが、”いずれも”[予想表示]ではなく[Netscapeの表示]と同様の結果になりましたが…？ すみません、自分の環境を書き忘れていました。 Firefox3.01、Safari4.02、Opera9.64、Netscape7.02で表示しました。OSは関係あるのでしょうか？OSはVistaです。 自分の環境では確かに[予想表示]のように表示されているのですが、なぜ異なるのでしょうか。 すみません、この点もよくわかりません。 >＃個人的にはこういう更新履歴はdlを使う方が多いのですが、今回は質問者様のulを入れ子にする構造をなるべく活かしてあります。 ご配慮いただき本当にありがとうございます。 dlも試してみたのですが、日付と更新内容を一列に表示したくてulを選択しました。 ulの入れ子で表現したいことは以下の点です。 ・日付と内容を一列表示すること ・内容の書きだし位置（インデント？）が揃っていること ・日付と内容を一つのリストとみなして縦に履歴が残ること 内容の書きだし位置については改行した場合もインデントが戻らないことが理想です。 最初に作ったときはテーブル構造で表現していたのですが、リストの方がすっきりするかと思いチャレンジしてみました。 abril様に残していただいたソースで確認しましたが、自分の表現したい内容と違っていたようです。 質問内容が足らず本当に申し訳ありませんでした。 ulの入れ子にこだわっているわけではないのですが、自分の表現したい内容がこれでできそうだと思っていたらNetscapeでのみ表現できなかったので質問させていただきました。 abril様の環境では[予想表示]ではなく[Netscapeの表示]となってしまったようで、こちらもよくわからないのですが…… >検証条件（DOCTYPEなど）が違う様でしたら具体的に補足して下さい。 テンプレートをそのまま使用しており、DOCTYPEがどのように影響するかわからずに試しています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 頭の部分はこのようになっております。 知識不足でお手を煩わせてしまい申し訳ありませんが、もう一度アドバイスをお願いいたします。
補足
質問者です。 補足から失礼いたします。 申し訳ありません。 回答お礼を出した後、もう一度表示してみるとabril様の残していただいたソースで表現できていました。 慌てて書いてしまい本当に申し訳ありません。 自分の表現したい内容が表現できていて本当に満足しています。 ありがとうございます。 これを見ながら、自分でも理解できるように噛み砕いていこうと思います。 本当にありがとうございます。 abril様に残していただいた回答で自分の表現したいことができましたので、これで質問を締めさせていただきます。 salonpath様、abril様、本当にありがとうございました。