CSSでヘッダーを固定にしたサンプル

Category
： CSS リファレンス

CSSでヘッダーを固定にしたサンプル

ヘッダーを固定にしたサイトってCSS HappyLifeさんとかが有名だと思いますが、そんな感じにヘッダーを固定にサンプルを作ってみました。

IE6も対応なので、解説していきたいと思います。

CSSでヘッダーを固定にしたサンプルの解説

今回固定する部分はココになります。

CSSでヘッダーを固定にしたサンプル

XHTML

<div id="header">
<h1><a href="/" title="CSSに関する事を中心にWebサイト制作に関する情報を掲載しているCSS Lecture"><img src="/common/image/logo_top.png" alt="CSS Lecture" width="178" height="38" /></a></h1>
<!--/ #header--></div>

htmlは普通の記述で大丈夫です。

CSS

* html body {   
    background: url(null) fixed;   
}

IE6にposition:fixedが効くようにbody要素上記ソースを記述しておきます。

/* header要素
----------------------------------------------------------- */
div#header	{
	width: 100%;
	padding: 20px;
	background: #000 url(../image/bg/header.gif) repeat-x;
	border-bottom: 1px solid #CCC;
	color: #FFF;
	position: fixed;
	top:0;
	left:0;
}
* html div#header    {   
    position: absolute;   
    top: expression(eval(document.documentElement.scrollTop+0));
}
div#header h1	{
	width: 800px;
	margin: 0 auto;
}

* html div#headerに記述してある部分がIE6対応部分ですね。
これに付いてはCSS : positionの「absolute」「relative」「fixed」のリファレンスで説明していますので、そちらをご覧下さい。

残りの部分に関しては、普通にCSSでレイアウトをしているだけです。

2009 02-10 14:10 PM