プロが教えるわが家の防犯対策術！

【CSS】メニュー上部に固定させた時の上部隙間

解決済

  • 質問者：koyatan
  • 質問日時：
  • 回答数：2件

HTMLとCSSについて勉強中です。
ページの上部に横100%、高さ35pxのメニューエリアを設け、その部分だけを固定させスクロールしないようにしたいと思います。また見栄えの点から上部と左部分はpaddingもmarginも0にしたいと試行錯誤しておりますが、どうしても上部に16pxほどの隙間が出来てしまいます。

目的は下記URLの上部と同じになります。
http://weboook.blog22.fc2.com/

ネットでヒットしたサイトにはbodyタグのpaddingとmarginを0にすると良いといった記載がございますが、画面をスクロールさせない状態では固定出来るのですが、スクロールが必要な行数を設けた時に隙間が出てるようです。

誠に恐れ入りますが、どなたかアドバイスを頂けないでしょうか。
よろしくお願い致します。

※ソースは下記となります。
※固定させたいメニュー部分＝TopArea

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>

<style type="text/css">
.TopArea {
background-color: #9F6;
margin: 0px;
padding: 0px;
position: fixed;
z-index: 999;
height: 35px;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
}
</style>
</head>

<body leftmargin="0" topmargin="0">
<div class="TopArea">
<p>class "TopArea" の内容がここに入ります</p>
</div>
<p>1</p>
<p></p>
<p></p>
<p>2</p>
<p></p>
<p></p>
<p>3</p>
<p></p>
<p></p>
<p>4</p>
<p></p>
<p></p>
<p>5</p>
<p></p>
<p></p>
<p>6</p>
<p></p>
<p></p>
<p>7</p>
<p></p>
<p></p>
<p>8</p>
<p></p>
<p></p>
<p>9</p>
<p></p>
<p></p>
<p>10</p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： warez
  • 回答日時：

.TopArea {


top: 0; /* ←追加 */
}
でどうでしょう。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答有難うございました！

教えて頂いた後だから分かる事ですが
これほどシンプルな答えだったんですね(^^ゞ

これでまた少し先へ進む事が出来ます。
本当に助かりました！
心より御礼申し上げます、誠に有難うございました！

通報する
お礼日時：2014/06/10 10:09

No.2

  • 回答者： ORUKA1951
  • 回答日時：

どこでそのようなHTML/CSS身につけられたか分かりませんが、それでは上達しないです。


スタイルシートを導入する最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。読まれたら分かるように、HTMLには文書構造しか書かないのです。デザインのためにHTMLを書かない!!!。それによってデザインの自由度も良くなるのです。
　XHTMLは今後は使われる機会は減ると思います。より簡単なHTMLが主流となるでしょう。(XHTMLは他のプログラムと連携するなど限定されていくでしょう)。またtransitinalは使うべきではないHTML5ではなくなります。
　『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

★原因は、pのマージンです。直接的な解決は
div.TopArea p{margin:0;}
　⇒8.3.1 マージンの相殺( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

　ページを作成されているなら開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )の豊富な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-html4 … )

　ちなみに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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧にご説明頂き有難うございました！！
早速、チャレンジして見ましたが私の理解力が不足しているようで目的の結果は得られませんでした。

しかし、ご指摘頂いたようにまだCSSやHTMLの全体像が掴めていないようでまだまだ勉強不足です。
教えて頂いたサイトも拝見しながらこれからも学習を進めて行きたいと思います。

ご丁寧にご指導頂き心より御礼申し上げます。
誠に有難うございました！！

通報する
お礼日時：2014/06/10 10:04

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報