こちらの簡単なサンプルを参考にサイトを作成しています。
http://scuderia-web.com/tips/xhtml_css/sample/fi …
私が作るとメイン部がヘッダーもフッターも突き抜けて
スクロールしてしまいました。
原因を調査したらフッター部は後から上書きすることで
上側に配置される状態になり、固定していると分かりました。
しかし、同じ考えをヘッダー部に当て嵌めてみても固定しません。
その内に分かるかなと思って数ヶ月・・・未だにギブアップです。
ヘッダー部はどういう理由で固定(上側に来る)されるのでしょう?
なお、ヘッダー部にz-index:5 とかを割り当てれば固定してくれます。
しかし、この解決法はちょっと強引な気がしています。
No.2ベストアンサー
- 回答日時:
それは、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">
<!--
html,body{margin:0;}
body{padding:100px 0 50px 0;}/* paddingでbodyの高さを指定 */
div.header,div.section,div.footer{width:100%;}
div.header,div.footer{background-color:aqua;position:fixed;}/* fixedで固定 */
div.header{height:100px;top:0;}
div.footer{height:50px;bottom:0;}
div.section{overflow:hidden;background-color:yellow;}
div.section p{margin:0 2em;line-height:1.6em;text-indent:1em;}
-->
_</style>
</head>
<body>
_<div class="header" id="TOP">
__<h1>サンプル</h1>
__<p>このページの要約や目次など</p>
_</div>
_<div class="section">
__<h2>本文見出し</h2>
__<p> class名は文書構造を示すものを使う。具体的には「HTML5の<a href="http://standards.mitsue.co.jp/resources/w3c/TR/h … 新しい要素</a>」が参考になる。</p>
__<p>改行のために<br>は使わない。</p>
__<p>著者のimportant!は、一部だけ修正すなど特別なときに使う。詳しくは<a href="http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … 最重要規則(!important rules)</a></p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事</p>
__<p>記事last-line</p>
_</div>
_<div class="footer">
__<p>文書情報・サイト内ナビゲーションなどの記事</p>
_</div>
</body>
</html>
どうもご回答有り難うございます。
プロの方でしたので凄いとしか思ってませんでした^^;
酷というのが返ってくるとは思いませんでした。
スクロールするのが当たり前なんですか。
ソースが実はおかしかったと。。。
応用は難しいです。色々な表現方法があるんですね。
夕方に時間が取れたら検証してみます。
具体的に指摘して下さいまして有り難うございました。
No.3
- 回答日時:
この掲示板のシステムで書き換えられている部分
<p> class名は文書構造を示すものを使う。具体的には「HTML5の<a href="http://standards.mitsue.co.jp/resources/w3c/TR/h … 新しい要素</a>」が参考になる。</p>
は、
<p> class名は文書構造を示すものを使う。具体的には「HTML5の<a href="http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/">3.1. 新しい要素</a>」が参考になる。</p>
に
<p>著者のimportant!は、一部だけ修正すなど特別なときに使う。詳しくは<a href="http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … 最重要規則(!important rules)</a></p>
は、
<p>著者のimportant!は、一部だけ修正すなど特別なときに使う。詳しくは<a href="http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#important-rules">6.4.2最重要規則(!important rules)</a></p>
と修正してください。なお:は:に直す・・・・
No.1
- 回答日時:
後から上書きというのがちょっと分かりませんが、固定されるのはサンプルの例ですとimportantによってスタイルが優先されているからではないでしょうか?
サンプル
position: fixed !important;
position: absolute;
通常cssは後書き優先ですが、importantを使用することによって先に書いても優先させることができるのでヘッダは固定となりますよね?
もし求めている回答が違っていたらすみません。
ご回答有り難うございます。
bodyのところにpadding: 100px 0 50px 0;
とあります。これで固定しているのかなと思いました。
説明にもそういう書かれ方がしてあったので。
実際には枠組みだけ決めてあって、これがスクロールを
制御しているわけでは有りませんでした。
position:sbsoluteもそうかなと散々つついた
記憶がありますから、多分違うと思います。
フッターに背景色を追加したら消えたので
上書きしてるのかと気付いたのです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS インクルードした要素がヘッダーにかぶってしまう 3 2022/09/13 17:35
- その他(パソコン・スマホ・電化製品) Webページ印刷時にヘッダー・フッターをつけたい 1 2022/04/25 21:35
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- その他(パソコン・スマホ・電化製品) Webページの印刷 1 2023/04/17 14:01
- Visual Basic(VBA) マクロについて教えてください 2 2023/06/09 16:01
- Visual Basic(VBA) マクロについて教えてください。 3 2023/06/09 17:37
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- その他(プログラミング・Web制作) データ解析ソフトRでのファイル入力read.csvがエラーになります 7 2022/03/27 22:11
- PHP Content-Typeが機能していない? 2 2022/07/17 11:10
- Excel(エクセル) エクセルのフッタやヘッダーについて 3 2023/02/04 09:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
<div id="container">の使いか...
-
html の divとtable の役割
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
インラインフレームのページ内...
-
divを追加すると下に隠れてしまう
-
1時間30分を簡単に表したいで...
-
divとpの使いわけ
-
複数のボタンを等間隔に、かつ...
-
一括で全体を右にずらす
-
HTMLのJIS規格について
-
hタグの右横に画像を表示
-
可変長要素を中は左寄せのまま...
-
h1に自分自身へのリンクを張...
-
スペースを使わず文字位置を揃...
-
reuterのScraypingで不思議な現...
-
html5でheader,footerこみのwra...
-
h1を親要素の縦中央、画像の横...
-
開閉式の隠し要素が一瞬表示さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
min-heightとheightの違いについて
-
HTML5 iframe の代わり
-
divの中に外部のHTMLを埋め込む
-
3カラムレイアウトで「常に残り...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
reuterのScraypingで不思議な現...
-
htmlの見出しタグ(<h1>)の次...
-
1サイト内にHTML5とXHTMLが混在...
-
inline-blockをネストすると表...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
おすすめ情報