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の仕様でしょうか?
それとも指定方法がおかしいのでしょうか。
大分煮詰まってしまったので、アドバイスをお願いいたします。
No.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: "MS ゴシック", 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など)が違う様でしたら具体的に補足して下さい。
この回答への補足
質問者です。
補足から失礼いたします。
申し訳ありません。
回答お礼を出した後、もう一度表示してみるとabril様の残していただいたソースで表現できていました。
慌てて書いてしまい本当に申し訳ありません。
自分の表現したい内容が表現できていて本当に満足しています。
ありがとうございます。
これを見ながら、自分でも理解できるように噛み砕いていこうと思います。
本当にありがとうございます。
abril様に残していただいた回答で自分の表現したいことができましたので、これで質問を締めさせていただきます。
salonpath様、abril様、本当にありがとうございました。
ご回答ありがとうございます。
>(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">
頭の部分はこのようになっております。
知識不足でお手を煩わせてしまい申し訳ありませんが、もう一度アドバイスをお願いいたします。
No.1
- 回答日時:
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にそのバグがあるのなら「_(アンダーバー)」を使わない名前に変更する必要があります。
ご指摘ありがとうございます。
こちらもアドバイスを元に修正しました。
引き続きアドバイスをよろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
html/cssの、navを2段にする...
-
htmlの<ol>タグで、数字などを...
-
【CSS】メニュー上部に固定させ...
-
ナビゲーションバーを端まで伸...
-
liタグの中に<p>タグやら<dl>を...
-
HTMLで組織図を作成する方法
-
「olタグ」内に「hタグ要素」...
-
display:table;を多段表示させたい
-
左メニューをCSSで固定したい
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
リストの回り込みについて(マ...
-
CSSの「a」と「a:link」の違い...
-
<ul>~</ul>が二つ続くと間に改...
-
番号付きリスト(<Ol><Li>・・...
-
float:leftで<li>要素を横並び...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報