【CSS】メニュー上部に固定させた時の上部隙間
- HTMLとCSSについて勉強中です。ページの上部に横100%、高さ35pxのメニューエリアを設け、その部分だけを固定させスクロールしないようにしたいと思います。
- 上部と左部分はpaddingもmarginも0にしたいと試行錯誤しておりますが、どうしても上部に16pxほどの隙間が出来てしまいます。
- ネットでヒットしたサイトにはbodyタグのpaddingとmarginを0にすると良いといった記載がございますが、画面をスクロールさせない状態では固定出来るのですが、スクロールが必要な行数を設けた時に隙間が出てるようです。
- ベストアンサー
【CSS】メニュー上部に固定させた時の上部隙間
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-transitional.dtd"> <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>
- koyatan
- お礼率85% (12/14)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
.TopArea { top: 0; /* ←追加 */ } でどうでしょう。
その他の回答 (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の全体像が掴めていないようでまだまだ勉強不足です。 教えて頂いたサイトも拝見しながらこれからも学習を進めて行きたいと思います。 ご丁寧にご指導頂き心より御礼申し上げます。 誠に有難うございました！！
関連するQ&A
- ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか？ お教え頂ければと思います。 ↓ソース↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
- ホームページの上下の隙間を消すには
左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。 上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css"> <!-- #main { width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } body { margin:0px; padding:0px; background-color: #999999; } --> </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ
- css初心者です。プラウザの表示について
以下のような記述を行い、確認為にプラウザに表示させようとしましたが、なぜかsafariではうまくいかずに、googlecromeでは表示されました。どのような事が原因なのでしょうか？ よろしくお願いします。 //html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="box1.css" type="text/css"> </head> <body> <div class="box">箱の表示を作ろうと思います。</div> <p class="box2">こちらはどうなのでしょうか？</p> </body> </html> //css @charset "UTF-8"; /* CSS Document */ .box{ border:4px solid #9C3; width:50px; height:60px; padding:15px 15px; margin:50px 0px 0px 50px } .box2{ width:300; height:200; border:3px solid #F33; padding:10px; } よろしくお願いします。
- ベストアンサー
- HTML
- ページ上部に空白ができます
いつもお世話になります。 dreamweaver8でホームページを作っています。 下記のような記述をすると、ページ上部に空白ができます。 どこを直せばよいのでしょうか、教えて下さい。 【CSS】 #body{ font-family:"メイリオ", Meiryo,"ＭＳ Ｐゴシック", Osaka,"Hiragino", "ヒラギノ角ゴ Pro W3", sans-selif,; color: #333333; font-size:10px; margin: 0; padding: 0; text-align: center; } #wrapper { width: 722px; margin-top:0px; margin-left: auto; margin-right: auto; background-image: url(img/sidebk2.jpg); background-repeat:repeat-y; } #header { background-color: #FFFDE5; background-image:url(img/title_bar.jpg) ; background-repeat:no-repeat; height: 62px; width: 722px; margin-bottom : 0px; } #header p { position: relative; margin: 0; top:42px; left:570px; width:150px; color:#ffffff; font-size: 11px; } 【HTML】 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="style.css" media="all"> </head> <body> <div id="wrapper"> <div id="header"> <p>| <a href="http://***.com" target="_blank">ブログ </a>|<a href="../sitemap.html">サイトマップ</a> | </p> </div> </div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- cssに関して
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #box { height: 100px; width: 700px; border: 1px solid #996600; } .comment { height: 50px; width: 300px; float: left; margin-top: 10px; border: 1px solid #993366; } --> </style> </head> <body> <div id="box"> <div class="comment"> comment </div> <div class="comment"> comment </div> </div> </body> </html> --------------------------------------------------------- boxという枠の中にcommentの子枠を入れてます。 comment枠の上に10pxの空間を入れたいのですが、上記xhtmlとcssで書き方はＯＫだと思います。 しかし疑問が残ります。 本来はboxにpadding-top:10pxとすべきなんでしょうか。 それとも上記のとおりで正解なんでしょうか。（commentにmargin-top：10px） ある程度経験のある方か、お詳しい方にご判断願いたいと思います。 なぜこのような質問をするかというと、時々Adobe Dreamweaver CS3で、ＩＥ６では正しく表示されないとか、マージンレフトがどうのこうのと出るからです。（ＩＥ６の人はほとんどいないと思いますが、なんかしっくりこないんです・・・） よろしくお願いします。
- ベストアンサー
- HTML
- CSSで余白とパディングに”０”を指定したのに上部に余白ができてしまう
DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。 そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。 IE6では空白がないのですが、FIREFOX2だと空きます。 分かる方いらっしゃったら教えて下さい。 ソースはこれです↓ 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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" media="all">@import url("school2.css");</style> </head> <body> <div id="wrapper"> <div id="header"> <h1><img src="images/Logo03.gif" width="310" height="90" /></h1> </div> </div> </body> </html> 【css】 body { background: #E0FFCE; text-align: center; margin: 0px; padding: 0px; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 800px; border: 1px solid #009999; background: #FFFFFF; } #wrapper #header { background: url(images/Backheader3.gif) no-repeat; margin: 0px; padding: 0px; height: 120px; border-bottom: 6px double #009999; } #wrapper #header img { margin: 0px; padding: 0px; }
- ベストアンサー
- ホームページ作成ソフト
- CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、 突然CSSが読み込まれなくなりました。 htmlのソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。 どちらもエンコーディングはUTF-8です。 ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、 プレビューまたはサーバーにアップすると反映されません。 なにが原因なのでしょう。。。 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- HTMLで○や■などをテキストの代用とした時
HTMLで○や■などをテキストの代用とした時レイアウトが崩れてしまうのはなぜでしょうか？ 教えてください。 よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } .container { width: 960px; text-align: center; background-color: #FFF; margin: 0 auto; } .header { background-color: #ADB96E; } .content { text-align: left; padding: 10px 0; } .footer { padding: 10px 0; background-color: #CCC49F; } --> </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
- css 初心者です。（壁紙について
外部cssにて、壁紙にある画像を一枚壁紙にしようと思い、以下の記述を行いましたが、なぜかすべての画像の範囲が収まらず、一部Y軸方向に画像が現れるだけです。どのような事が現なのでしょうか？お心当たりございましたら、お願い致します。 //css部分// @charset "UTF-8"; /* CSS Document */ p:hover { padding:10px; border:1px dotted #ff0000; color:red; } a:hover{color: blue;} h1:first-line{color:green;} p.sample1{color: red;} p.sample2{background-color:#3366ee;margin:30px 20px;padding:45px 50px} p.sample3{background-color:#ff7799;margin:-70px -40px;padding:70px 100px} p.sample4{background-color:#33bb77;margin:-70px -2px;padding:70px 100px} p.sample5{background-image: url("akete.jpg"); bakcground-repeat:no-repeat; background-attachment:fixed; } //html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Untitled Document</title> <link rel="stylesheet" href="begin.css" type="text/css" /> </head> <body> <p class="sample5">あれ？画像欠けてない？</p> </body> </html> 以上をよろしくお願いします。
- ベストアンサー
- HTML
- Dreamweaver CSS
Dreamweaver 8をMac OS10.5で使用しているものです。 Dreamweaverで、htmlファイルを作成し、CSSを添付しています。 Dreamweaver上では、問題なくCSSが反映されていますが、SafariやFireFoxなどのブラウザでプレビューで見ると、一部しかCSSが反映されていません。 WEBで検索して、文字コードなどを変更してみたのですが、改善されません。 簡単なミスかも知れませんが、コードを記述しておくので、ご指摘いただけると幸いです。 ちなみに、症状としては、CSSで設定したheaderの背景色は、htmlでは反映されているのですが、h1の文字色の変更などは、htmlでは反映されていません。 ━html━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css" media="all"> <!-- @import url("price.css"); --> </style> </head> <body> <div id=wrapper> <div id=header> <h1>ヘッダー</h1> </div> <div id=content>本文</div> </div> </body> </html> ━━htmlここまで━━━━━━━━━━━━━━━━━━━━━━ ━━CSSここから━━━━━━━━━━━━━━━━━━━━━━ @charset "UTF-8"; /* CSS Document */ #wrapper { width: 800px; margin-right: auto; margin-left: auto; } #header { background-color: #00FFCC; height: auto; width: auto; padding-top: 5px; padding-bottom: 5px; } h1 { font-size: 2em; color: #FFFFFF; } ━CSSここまで━━━━━━━━━━━━━━━━━━━━━━━
- 締切済み
- CSS
お礼
ご回答有難うございました！ 教えて頂いた後だから分かる事ですが これほどシンプルな答えだったんですね(^^ゞ これでまた少し先へ進む事が出来ます。 本当に助かりました！ 心より御礼申し上げます、誠に有難うございました！