【HTML/CSS】ヘッダーをページ上部に固定してレイアウトする

ヘッダー部分をスクロールしてもページ上部に固定されたままコンテンツ部分のみスクロールするようにレイアウトする。

今回の仕様は、ヘッダー部分をポジションで固定(絶対位置に配置)して、ヘッダーの高さ分だけ、コンテンツ上部にマージンを持たせる事で実現する。

【test.html】

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>header固定テスト</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/test.css">

<!--[if IE]>
<script type="text/javascript">
	document.createElement('header');
	document.createElement('section');
	document.createElement('nav');
	document.createElement('footer');
</script>
<![endif]-->  
	
</head>
<body>

<header>
	<section id="header">
		<h1>タイトル/header固定テスト</h1>
		<nav></nav>
	</section>
</header>

<div id="contents">
コンテンツ<br />
コンテンツコンテンツ<br />
コンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツコンテンツ<br />
	・
	・
	・
	・
	・
コンテンツコンテンツ<br />
コンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツコンテンツ<br />
</div>

<footer>
	<p>footer</p>
</footer>

</body>
</html>

【css/test.css】

body{  
    padding-top: 100px;
	background: #CCCCCC;
}  

header{
	position: fixed !important;  
	position: absolute;  
	top: 0;  
	left: 0;
	width: 100%;
	height: 100px;
	margin: 0 auto;
	background: #000000;
}

header section#header{
	width: 1000px;
	margin: 0 auto;
}

header section#header h1{
	color: #FFFFFF;
}

#contents{
	width: 1000px;
	margin: 0 auto;
	border: 1px solid #333333;
	background: #FFFFFF;
}

footer{
	width: 1000px;
	height: 80px;
	margin: 0 auto;
	background: #000000;
	color: #FFFFFF;
	text-align: center;
}

position: fixed;は絶対位置への配置、スクロールしても位置を固定する。

【出力結果】

ヘッダーをページ上部に固定する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>