CSSでフッターを固定することが出来たので、次はヘッダーを固定してみる。
まずは、一般的なホームページの書き方から。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSSでヘッダーを固定する 第１歩</title>
<style type="text/css">
body {
margin:0px;
}
#header {
background:#ccffcc;
height:100px;
}
#main {
background:#ffff99;
}
#footer {
background:#ffcc99;
height:80px;
}
</style>
</head>
<body>
<div id="header">
ヘッダー
</div>
<div id="main">
コンテンツ1<br />
コンテンツ2<br />
コンテンツ3<br />
コンテンツ4<br />
コンテンツ5<br />
コンテンツ6<br />
コンテンツ7<br />
コンテンツ8<br />
コンテンツ9<br />
コンテンツ10<br />
コンテンツ11<br />
コンテンツ12<br />
コンテンツ13<br />
コンテンツ14<br />
コンテンツ15<br />
コンテンツ16<br />
コンテンツ17<br />
コンテンツ18<br />
コンテンツ19<br />
コンテンツ20<br />
コンテンツ21<br />
コンテンツ22<br />
コンテンツ23<br />
コンテンツ24<br />
コンテンツ25<br />
コンテンツ26<br />
コンテンツ27<br />
コンテンツ28<br />
コンテンツ29<br />
コンテンツ30<br />
コンテンツ31<br />
</div>
<div id="footer">
フッター
</div>
</body>
</html>
サンプルはこちらです。
当然ですが、このままだと、ヘッダーはブラウザの上に固定されません。
ヘッダーをブラウザの上に固定するには、次のコードのように
html と body の高さを100%にし、ヘッダーの位置を fixed にします。これだけだとヘッダーの幅が小さくなってしまうので幅は100%に。#main がヘッダの下に潜り込んでしまうので padding でヘッダーの高さ分だけずらします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSSでヘッダーを固定する 第２歩</title>
<style type="text/css">
html {
height:100%;
}
body {
margin:0px;
height:100%;
}
#header {
background:#ccffcc;
height:100px;
width:100%;
position:fixed;
}
#main {
padding-top:100px;
background:#ffff99;
}
#footer {
background:#ffcc99;
height:80px;
}
</style>
</head>
<body>
<div id="header">
ヘッダー
</div>
<div id="main">
コンテンツ1<br />
コンテンツ2<br />
コンテンツ3<br />
コンテンツ4<br />
コンテンツ5<br />
コンテンツ6<br />
コンテンツ7<br />
コンテンツ8<br />
コンテンツ9<br />
コンテンツ10<br />
コンテンツ11<br />
コンテンツ12<br />
コンテンツ13<br />
コンテンツ14<br />
コンテンツ15<br />
コンテンツ16<br />
コンテンツ17<br />
コンテンツ18<br />
コンテンツ19<br />
コンテンツ20<br />
コンテンツ21<br />
コンテンツ22<br />
コンテンツ23<br />
コンテンツ24<br />
コンテンツ25<br />
コンテンツ26<br />
コンテンツ27<br />
コンテンツ28<br />
コンテンツ29<br />
コンテンツ30<br />
コンテンツ31<br />
</div>
<div id="footer">
フッター
</div>
</body>
</html>
サンプルはこちらです。
FirefoxとIE7はこれでヘッダーが固定されるのですが、IE6は fixed が使えないので、ヘッダは固定されていません。そこで、IE6だけ別のスタイルを指定します。コンディショナルコメントを使います。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSSでヘッダーを固定する 第３歩</title>
<style type="text/css">
html {
height:100%;
}
body {
margin:0px;
height:100%;
}
#header {
background:#ccffcc;
height:100px;
width:100%;
position:fixed;
}
#main {
padding-top:100px;
background:#ffff99;
}
#footer {
background:#ffcc99;
height:80px;
}
</style>
<!--[if IE 6]>
<link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="header">
ヘッダー
</div>
<div id="main">
コンテンツ1<br />
コンテンツ2<br />
コンテンツ3<br />
コンテンツ4<br />
コンテンツ5<br />
コンテンツ6<br />
コンテンツ7<br />
コンテンツ8<br />
コンテンツ9<br />
コンテンツ10<br />
コンテンツ11<br />
コンテンツ12<br />
コンテンツ13<br />
コンテンツ14<br />
コンテンツ15<br />
コンテンツ16<br />
コンテンツ17<br />
コンテンツ18<br />
コンテンツ19<br />
コンテンツ20<br />
コンテンツ21<br />
コンテンツ22<br />
コンテンツ23<br />
コンテンツ24<br />
コンテンツ25<br />
コンテンツ26<br />
コンテンツ27<br />
コンテンツ28<br />
コンテンツ29<br />
コンテンツ30<br />
コンテンツ31<br />
</div>
<div id="footer">
フッター
</div>
</body>
</html>
fixheader_ie6.css は以下のとおり
html {
overflow:hidden;/*スクロールバーが出てしまうので*/
}
body {
overflow:auto;/*スクロールバーを表示*/
}
#header {
position:absolute;
}
サンプルはこちらです。
これでIE6でも”いちおう”ヘッダーが固定されました。
でもちょっと変です。。。
スタイルシートのコメントにもあるように、IE6の場合、ブラウザのスクロールバーを一旦消して、body の overflow:auto; でスクロールバーを表示してます。なので、ヘッダー（#header）の下にスクロールバーが入り込んでしまってます。
これの回避と、通常は横幅固定で中央寄せでウェブサイトを作ることが多い（と勝手に決め付けてますが…）ので、そのような体裁にします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSSでヘッダーを固定する 第４歩</title>
<style type="text/css">
html {
height:100%;
}
body {
margin:0px;
height:100%;
}
#body {
width:700px;
margin:0px auto;
}
#header {
background:#ccffcc;
height:100px;
/* width:100%;*/
width:700px;
position:fixed;
}
#main {
padding-top:100px;
background:#ffff99;
}
#footer {
background:#ffcc99;
height:80px;
}
</style>
<!--[if IE 6]>
<link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="body">
<div id="header">
ヘッダー
</div>
<div id="main">
コンテンツ1<br />
コンテンツ2<br />
コンテンツ3<br />
コンテンツ4<br />
コンテンツ5<br />
コンテンツ6<br />
コンテンツ7<br />
コンテンツ8<br />
コンテンツ9<br />
コンテンツ10<br />
コンテンツ11<br />
コンテンツ12<br />
コンテンツ13<br />
コンテンツ14<br />
コンテンツ15<br />
コンテンツ16<br />
コンテンツ17<br />
コンテンツ18<br />
コンテンツ19<br />
コンテンツ20<br />
コンテンツ21<br />
コンテンツ22<br />
コンテンツ23<br />
コンテンツ24<br />
コンテンツ25<br />
コンテンツ26<br />
コンテンツ27<br />
コンテンツ28<br />
コンテンツ29<br />
コンテンツ30<br />
コンテンツ31<br />
</div>
<div id="footer">
フッター
</div>
</div>
</body>
</html>
サンプルはこちらです。
最後はちょっと強引な逃げ方ですが、これでヘッダーが固定されました。
確認はCSSでフッターを固定する同様、WindowsXP IE6、WindowsXP Firefox3、WindowsVista IE7 で行いました。Macは持ってないので確認してません。Macの結果をいただけたらうれしいです。
今回参考にさせていただいたページです。
CSSだけでフレームを作るテクニック
非対応セレクタを利用した CSS ハックの注意点
■2008.11.2追記
最後のサンプルの場合、ブラウザの幅を狭くしていくと、スクロールバーが消えてしまいます。
あと、各コードの先頭に
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
と宣言しています。この宣言がないとIE6では正常に動作しません。
何故だろう…ってところですが。
■2008.11.3追記
森下屋さんからのご報告。
Mac - Safari 3.1.2
Mac - FireFox 2.0.0.17
でも問題なく動作します。
森下屋さん、いつもありがとうございます。
コメントする