ウォッチ
ul.level3 li { } でmarginを使って行間を調整していますが、IEでは思い通りの画面表示となりますが、Google ChromeとSafariでは思っている以上に行間が空いてしまいます。
ul.level2 li { } はいずれのブラウザでも思い通りの画面表示となります。どうして、ul.level3.li { }だけうまくいかないのか、どこが間違っているのかを教えて頂けないでしょうか？
お忙しいところ申し訳ございませんが、仕事で必要なため、急いでおります。どなたか分る方、教えてください。よろしくお願いします。
htmlファイル
***************************************************
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="question.css" rel="stylesheet" type="text/css">
<title>index</title>
<script type="text/javascript">
<!--
flag = false;
function treeMenu(tName) {
tMenu = document.all[tName].style;
if(tMenu.display == 'none') tMenu.display = "block";
else tMenu.display = "none";
}
//-->
</script>
</head>
<body>
<div id="question-box">
<div id="question-list">
<!-- Chap1 -->
<ul class="level1">
<li><a href="javaScript:treeMenu('treeMenu1')">Chapter1 ●●●●●●</a></li>
<ul class="level2">
<div id="treeMenu1" style="display:none">
<li><a href="chapter01.html#1.1" target="right">1.1 ●●●●●●</a></li>
<li><a href="chapter01.html#1.2" target="right">1.2 ●●●●●●</a></li>
<li><a href="javaScript:treeMenu('treeMenu2')">1.3 ●●●●●●</a></li>
<ul class="level3">
<div id="treeMenu2" style="display:none">
<li><a href="chapter01_1.html#1.3.1" target="right">1.3.1 ●●●●●●</a></li>
<li><a href="chapter01_1.html#1.3.2" target="right">1.3.2 ●●●●●●</a></li>
<li><a href="chapter01_1.html#1.3.3" target="right">1.3.3 ●●●●●●</a></li>
</ul><!-- /level3 -->
<li><a href="javaScript:treeMenu('treeMenu3')">1.4 ●●●●●●</a></li>
<ul class="level3">
<div id="treeMenu3" style="display:none">
<li><a href="chapter01_1.html#1.4.1" target="right">1.4.1 ●●●●●●</a></li>
<li><a href="chapter01_1.html#1.4.2" target="right">1.4.2 ●●●●●●</a></li>
</ul><!-- /level3 -->
</div><!-- /treeMenu3 -->
</div><!-- /treeMenu2 -->
</div><!-- /treeMenu1 -->
</ul><!-- /level2 -->
</ul><!-- /level1 -->
</div><!-- /question-list -->
</div><!-- /question-box -->
</body>
</html>
***************************************************
cssファイル
***************************************************
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
#question-box {
width:300px;
margin:0;
padding:0;
}
#question-list {
width:300px;
}
ul.level1 li{
margin:0.5em 0 0.5em 1em;
padding:0;
list-style:none;
font-size:16px;
font-weight:bold;
}
ul.level2 li{
list-style:none;
font-size:14px;
font-weight:normal;
margin:0.5em 0 0.5em 2em;
padding:0;
}
ul.level3 li{
list-style:none;
font-size:12px;
font-weight:normal;
margin:0.1em 0 0.1em 3em;
padding:0em;
}
a:link { color: #0000ff; } /* 未訪問のリンク */
a:visited { color: #000080; } /* 訪問済みのリンク */
a:hover { color: #ff0000; } /* ポイント時のリンク */
a:active { color: #ff8000; } /* 選択中のリンク */
a {
text-decoration: none;
}
***************************************************
No.2ベストアンサー
- 回答日時：
javascriptを使わずスタイルシートだけで作るとこうなる。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
でチェック済みのHTML4.01strict+CSS2.1
HTML5の場合は、<div class="header"などはそれぞれ、<header><nav><section><footer>になる。DIVはなくなる。
★タブは＿に置換してあるので戻す。
★ウェブ標準なのでブラウザ間の誤差はないはず
★javascript無効のブラウザや検索エンジンでも
※極めてシンプルなのでメンテナンスも楽になる
★おまけ・・印刷時はURLが印刷される。印刷プレビューで確認。
<!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=UTF-8">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen">
<!--
div.header div.nav{width:300px;}
div.header div.nav ul{font-size:0.9em;font-weight:bold;margin:0;padding:0;}
div.header div.nav ul li{list-style-type:none;padding:0.5em 0 0.5em 2em;}
div.header div.nav ul li ul {font-weight:normal;}
div.header div.nav ul li ul,
div.header div.nav ul li:hover ul li ul{display:none;}
div.header div.nav ul li:hover ul,
div.header div.nav ul li ul li:hover ul{display:block;}
div.header div.nav ul li:hover ul{background-color:yellow;}
-->
＿</style>
＿<style type="text/css" media="print">
<!--
a{color:black;}
a:after{content:"\A(URL:hoge.com"attr(href)")";white-space:pre;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="/">TOP</a></li>
＿＿＿＿<li><a href="/book/chapter1.html">一部</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/book/chapter1.html#Section1">一部1章</a>
＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter1.html#Section1-1">一部1章1節</a></li>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter1.html#Section1-2">一部1章2節</a></li>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter1.html#Section1-3">一部1章3節</a></li>
＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿</li>
＿＿＿＿＿＿<li><a href="/book/chapter1.html#Section2">一部2章</a>
＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter1.html#Section2-1">一部2章1節</a></li>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter1.html#Section2-2">一部2章2節</a></li>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter1.html#Section2-3">一部2章3節</a></li>
＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿</li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="/book/chapter2.html">二部</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="/book/chapter2.html#Section1">二部1章</a>
＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter2.html#Section1-1">二部1章1節</a></li>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter2.html#Section1-2">二部1章2節</a></li>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter2.html#Section1-3">二部1章3節</a></li>
＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿</li>
＿＿＿＿＿＿<li><a href="/book/chapter2.html#Section2">二部2章</a>
＿＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter2.html#Section2-1">二部2章1節</a></li>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter2.html#Section2-2">二部2章2節</a></li>
＿＿＿＿＿＿＿＿<li><a href="/book/chapter2.html#Section2-3">二部2章3節</a></li>
＿＿＿＿＿＿＿</ul>
＿＿＿＿＿＿</li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>
-
-
- 0
- 件
-
サンプルコードを書いてくださり、ありがとうございます。複数のブラウザで見ても同じ状態で見ることができ、すごいなあと思いました。本当は、javascriptを使わずにこのようなメニューを作成したかったのですが、ネットで検索→オリジナルメニュー作成がうまくいかなったのです。ネットで検索したメニューは、複雑な記述が多く、どうしても理解できなかったので、うまくオリジナルにできなかったのだと思いました。今回書いてくださったサンプルコードはシンプルで、そして私の思っていた通りのものでした。本当にありがとうございました。
No.3
- 回答日時：
文法がまず違う。
エラーだらけなので、「仕事」といわれるとはぁ？ですが、それは先の回答者も指摘されてますね。それに加えて、スペースが邪魔をしているように思えます。全角スペースなどを本番でもインデントに使用していませんか？
-
-
- 0
- 件
-
回答していただき、ありがとうございました。初めてWEB作成の仕事をさせられていますので、ネットで検索したものを寄せ集めて作り始めてしまった結果です。今後は、質問する前にエラーを無くすように努力します。ご迷惑をおかけいたしました。
No.1
- 回答日時：
まず、HTMLが間違っている。
[構文間違い１]
html
|-・・
|-- body
|-- div id="question-box"
|-- div id="question-list"
|-- ul class="level1"
|-- li
| |--a
|-- ul class="level2" ★ul内にulは入らない★
|-- div id="treeMenu1" ★ul内にliは入らない★
|-- li ★liはdivないには書けません★
| |-- a
|-- li
| |-- a
|-- li
| |-- a href="javaScript:treeMenu('treeMenu2')">1.3 ●●●●●● |-- ul
|-- div id="treeMenu2" ★ul内にliは入らない★
|-- li ★liはdivないには書けません★
| |-- a
javascriptやスタイルシートを書く前に素のHTMLの段階で、確認しましょう。
★HTMLが間違っているとブラウザは、抜けているところを補完して整合性させますが、その手順はブラウザによって異なります。
<ul>
<ul>
となっていると
<ul>
</ul>
<ul>
と解釈したり
<ul>
<li>
<ul>
と解釈するなど。当然ブラウザによって表示が変わります。
⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
[構文間違い2]
<a href="javaScript:treeMenu('treeMenu2')">
は許されません。HTTPスキームだけです。
<a href="chapter01_1.html" onClick="javaScript:treeMenu('treeMenu2');return false;">
と・・。これでjavasscriptが無効ならそちらへ飛んでいくし、そうでなければjavascriptが実行されリンクは無視される。
[構文間違い3]
＞IEでは思い通りの画面表示となりますが、Google ChromeとSafariでは思っている以上に行間が空いてしまいます。
は逆です。IEが糞なため、他のブラウザはウェブ標準で動作し、IEは互換モードで動作している。DOCTYPEをきちんと書けば、IEも他のブラウザと同様に表示される。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml )
★ウェブ開発用のブラウザはfirefoxを使いましょう。最もウェブ標準で動作してくれますし、なにしろ「開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )」が豊富です。今回も、 Html Validator( https://addons.mozilla.jp/firefox/details/249 )や Firebug( https://addons.mozilla.jp/firefox/details/1843 )を使えば原因が分かったはずですし、 Web Developer( https://addons.mozilla.jp/firefox/details/60 )でＤＯＭで参照できたはずです。また Open With( https://addons.mozilla.jp/firefox/details/11097 )を使うとブラウザごとの表示も確認できる。
＞【至急】
と言われても一朝一夕には解決できない。
★その他
DIVはむやみに使わない。あくまで『id属性及び class属性と併用することで、文書に構造を付加するための( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』のもので、HTML5では原則として使えなくなる。
javascriptのぞくと
<body>
<div class="header">
<h1>タイトル</h1>
<div class="nav">
<ul>
<li><a href="/">TOP</a></li>
<li><a href="./chapter1.html">一部</a>
<ul>
<li><a href="./chapter1.html#Section1">一部1章</a>
<ul>
<li><a href="./chapter1.html#Section1-1">一部1章1節</a></li>
<li><a href="./chapter1.html#Section1-2">一部1章2節</a></li>
<li><a href="./chapter1.html#Section1-3">一部1章3節</a></li>
</ul>
</li>
<li><a href="./chapter1.html#Section2">一部2章</a>
<ul>
<li><a href="./chapter1.html#Section2-1">一部2章1節</a></li>
<li><a href="./chapter1.html#Section2-2">一部2章2節</a></li>
<li><a href="./chapter1.html#Section2-3">一部2章3節</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="./chapter2.html">二部</a>
<ul>
<li><a href="./chapter2.html#Section1">二部1章</a>
<ul>
<li><a href="./chapter2.html#Section1-1">二部1章1節</a></li>
<li><a href="./chapter2.html#Section1-2">二部1章2節</a></li>
<li><a href="./chapter2.html#Section1-3">二部1章3節</a></li>
</ul>
</li>
<li><a href="./chapter2.html#Section2">二部2章</a>
<ul>
<li><a href="./chapter2.html#Section2-1">二部2章1節</a></li>
<li><a href="./chapter2.html#Section2-2">二部2章2節</a></li>
<li><a href="./chapter2.html#Section2-3">二部2章3節</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="section">
<h2>見出し</h2>
<p>本文はsection</p>
<div class="section">
<h3>項見出し</h3>
<p>本文項記事</p>
<p>sectionの階層でレベルが判断される</p>
</div>
</div>
<div class="footer">
<h2>文書情報</h2>
<dl class="documentHistry">
<dt id="FIRST-PUBLISHED">First Published</dt>
<dd>2013-03-03</dd>
</dl>
</div>
</body>
</html>
程度でよいはずです。タブは (全角スペース)に置換してあるので戻す。
-
-
- 0
- 件
-
細かく教えていただきありがとうございました。小さな会社に勤めており、初めて社内向けのWEBページを作ることになりました。締め切りまで時間がないので、ネットで検索し、いくつかのサイトから寄せ集めて作っていました。基礎知識もない状態で、間違いだらけのコードなのに、丁寧に教えて頂き大変感謝しております。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
ulとliで囲った文字の一部を変...
-
親ページ側からインラインフレ...
-
html 横並びのリストを中央寄せ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
CSSが上手く反映されないみたい...
-
HTMLで組織図を作成する方法
-
URLにアクセスした際に指定した...
-
リストの数字のフォントサイズ...
-
UL OL タグのインデントについて
-
html／cssの、navを２段にする...
-
Dreamweaverで、ul要素の下に写...
-
javascriptのアコーディオンメ...
-
Webサイトにスライディングサイ...
-
jQuery等で背景をフル表示＋ス...
-
display:table;を多段表示させたい
-
リスト（ul / li）タグの左イン...
-
<table>の高さ固定。情報増加時...
-
ieでのみCSSのcontentが効かない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト（<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でｂｒタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ページを開いているときのリン...
-
HTML5のfooterに見出しを付けて...
-
html／cssの、navを２段にする...
-
<ul>～</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報
