ヘッダー部の固定の方法

解決済

質問者：noname#148732
質問日時：2012/02/12 03:27
回答数：3件

こちらの簡単なサンプルを参考にサイトを作成しています。
http://scuderia-web.com/tips/xhtml_css/sample/fi …

私が作るとメイン部がヘッダーもフッターも突き抜けて
スクロールしてしまいました。

原因を調査したらフッター部は後から上書きすることで
上側に配置される状態になり、固定していると分かりました。

しかし、同じ考えをヘッダー部に当て嵌めてみても固定しません。
その内に分かるかなと思って数ヶ月・・・未だにギブアップです。
ヘッダー部はどういう理由で固定（上側に来る）されるのでしょう？

なお、ヘッダー部にz-index:5 とかを割り当てれば固定してくれます。
しかし、この解決法はちょっと強引な気がしています。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2012/02/12 10:21

それは、bodyのサイズを決めていないからです。

ボックスモデルのサイズは、padding辺の内側ですから、サイズがウィンドウの全高と同じでしたら、当然スクロールすべきです。
　紹介されたサイトのHTMLは、とても酷いものなのできちんと書き直します。(あくまでスタイルシートの説明だとしても酷すぎます。)
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
★タブは＿に置換してあるので戻すこと。

<!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">

＿</style>
</head>
<body>
＿<div class="header" id="TOP">
＿＿<h1>サンプル</h1>
＿＿このページの要約や目次など
＿</div>
＿<div class="section">
＿＿<h2>本文見出し</h2>
＿＿ class名は文書構造を示すものを使う。具体的には「HTML5の<a href="http://standards.mitsue.co.jp/resources/w3c/TR/h … 新しい要素</a>」が参考になる。
＿＿改行のために は使わない。
＿＿著者のimportant!は、一部だけ修正すなど特別なときに使う。詳しくは<a href="http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … 最重要規則（!important rules）</a>
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事
＿＿記事last-line
＿</div>
＿<div class="footer">
＿＿文書情報・サイト内ナビゲーションなどの記事
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

どうもご回答有り難うございます。
プロの方でしたので凄いとしか思ってませんでした＾＾；
酷というのが返ってくるとは思いませんでした。

スクロールするのが当たり前なんですか。
ソースが実はおかしかったと。。。
応用は難しいです。色々な表現方法があるんですね。

夕方に時間が取れたら検証してみます。
具体的に指摘して下さいまして有り難うございました。

通報する

お礼日時：2012/02/12 13:19

No.3

回答者： ORUKA1951
回答日時：2012/02/12 14:07

この掲示板のシステムで書き換えられている部分

class名は文書構造を示すものを使う。具体的には「HTML5の<a href="http://standards.mitsue.co.jp/resources/w3c/TR/h … 新しい要素</a>」が参考になる。
は、

 class名は文書構造を示すものを使う。具体的には「HTML5の<a href="http：//standards.mitsue.co.jp/resources/w3c/TR/html5-diff/">3.1. 新しい要素</a>」が参考になる。
に

著者のimportant!は、一部だけ修正すなど特別なときに使う。詳しくは<a href="http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … 最重要規則（!important rules）</a>

は、
著者のimportant!は、一部だけ修正すなど特別なときに使う。詳しくは<a href="http：//www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#important-rules">6.4.2最重要規則（!important rules）</a>

と修正してください。なお：は:に直す・・・・

- 0
- 件

通報する

No.1

回答者： joynus188
回答日時：2012/02/12 04:03

後から上書きというのがちょっと分かりませんが、固定されるのはサンプルの例ですとimportantによってスタイルが優先されているからではないでしょうか？

サンプル
　position: fixed !important;
　position: absolute;

通常cssは後書き優先ですが、importantを使用することによって先に書いても優先させることができるのでヘッダは固定となりますよね？

もし求めている回答が違っていたらすみません。

- 0
- 件

通報する

この回答へのお礼

ご回答有り難うございます。
bodyのところにpadding: 100px 0 50px 0;
とあります。これで固定しているのかなと思いました。
説明にもそういう書かれ方がしてあったので。

実際には枠組みだけ決めてあって、これがスクロールを
制御しているわけでは有りませんでした。
position:sbsoluteもそうかなと散々つついた
記憶がありますから、多分違うと思います。

フッターに背景色を追加したら消えたので
上書きしてるのかと気付いたのです。

通報する

お礼日時：2012/02/12 12:49

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