- ベストアンサー
【CSS】メニュー上部に固定させた時の上部隙間
- HTMLとCSSについて勉強中です。ページの上部に横100%、高さ35pxのメニューエリアを設け、その部分だけを固定させスクロールしないようにしたいと思います。
- 上部と左部分はpaddingもmarginも0にしたいと試行錯誤しておりますが、どうしても上部に16pxほどの隙間が出来てしまいます。
- ネットでヒットしたサイトにはbodyタグのpaddingとmarginを0にすると良いといった記載がございますが、画面をスクロールさせない状態では固定出来るのですが、スクロールが必要な行数を設けた時に隙間が出てるようです。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
どこでそのようなHTML/CSS身につけられたか分かりませんが、それでは上達しないです。 スタイルシートを導入する最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」です。読まれたら分かるように、HTMLには文書構造しか書かないのです。デザインのためにHTMLを書かない!!!。それによってデザインの自由度も良くなるのです。 XHTMLは今後は使われる機会は減ると思います。より簡単なHTMLが主流となるでしょう。(XHTMLは他のプログラムと連携するなど限定されていくでしょう)。またtransitinalは使うべきではないHTML5ではなくなります。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 ★原因は、pのマージンです。直接的な解決は div.TopArea p{margin:0;} ⇒8.3.1 マージンの相殺( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#collapsing-margins ) ページを作成されているなら開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxお使いだと思いますが、そのアドオンfirebugで見ると、なにが影響しているかすぐに分かります。 ＞ページの上部に横100%、高さ35pxのメニューエリアを設け、その部分だけを固定させスクロールしないようにしたいと思います。 ここを根本的に直しましょう。 「ナビゲーションリストを表示領域の最上部に幅100%で固定したい」 と考えます。ナビゲーションリストですから、HTMLは ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ <body> <div class="header"> <div class="nav"> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </div> </div> のようにマークアップされているはずですね。この時点でデザイン考えたらダメです。そのためのスタイルシートですから・・ DIVは文書構造を補完するために使います。 id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) ちなみにHTML5では、文書構造をより明確にするための要素が追加されますから、 <body> <header> <nav> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </nav> </header> となります。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) のDATAで検証済みのHTML4.01strict + CSS2.1 ★HTMLには文書構造しか書かれていないので、先でheaderの下だろうがページの左右だろうが下だろうがいくらでも変更できる。 ★リンクの色が白なので印刷されないので、印刷時はスタイルは適用されない。 ★タブは＿に置換してあるので戻す。 <!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"> ＿<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"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} div.header h1{margin-top:40px;/* 少しあける */} div.header div.nav{ position:fixed;/* ウインドウに固定 */ top:0;left:0;/* 位置を指定 */ width:100%;height:35px;/* 幅と高さを指定 */ background-color:black;color:white; line-height:35px;/* 行中央に */ text-align:center; min-width:480px;/* 最小幅を指定 */ } div.header div.nav ol{ list-style:none;/* リストを解除 */ margin:0;padding:0; width:100%;/* 直近のstaticでない親を参照 */ position:relative;/* 自らもstaticでなくする */ } div.header div.nav ol li{ margin:0;padding:0; display:inline-block; width:20%; position:relative; } div.header div.nav ol li a{ display:block; width:100%;height:100%; color:white; text-decoration:none; } div.header div.nav ol li a[href]:hover{ background-color:gray; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">トップ</a></li> ＿＿＿＿<li><a href="/products">製品</a></li> ＿＿＿＿<li><a href="/manual">マニュアル</a></li> ＿＿＿＿<li><a href="/info">会社情報</a></li> ＿＿＿</ol> ＿＿</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>
お礼
ご丁寧にご説明頂き有難うございました！！ 早速、チャレンジして見ましたが私の理解力が不足しているようで目的の結果は得られませんでした。 しかし、ご指摘頂いたようにまだCSSやHTMLの全体像が掴めていないようでまだまだ勉強不足です。 教えて頂いたサイトも拝見しながらこれからも学習を進めて行きたいと思います。 ご丁寧にご指導頂き心より御礼申し上げます。 誠に有難うございました！！
お礼
ご回答有難うございました！ 教えて頂いた後だから分かる事ですが これほどシンプルな答えだったんですね(^^ゞ これでまた少し先へ進む事が出来ます。 本当に助かりました！ 心より御礼申し上げます、誠に有難うございました！