Eiji

2012年4月19日

CSSで作る擬似フレーム(疑似フレーム)サイト


HTML5から<frame>タグが廃止になったそうな。
「このサイトはフレーム対応のブラウザでご覧ください」
なんて、文句を当たり前のように書いてた頃があっただけに感慨深い・・・。

それはさておき、CSSでフレームサイトを作る方法を忘れないうちに覚え書きまとめ。

ヘッダーが固定


DEMO

HTML + CSS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
	margin: 0;
	padding: 0;
}

#top_frame {
	height: 100px;  /* ヘッダーの高さ */
	left: 0;
	margin: 0;
	position: fixed;
	_position: absolute;
	top: 0;
	width: 100%;
	z-index: 999;
}

#under_frame {
	margin: 110px 0 0 0; /* ヘッダーの高さ分をマージンで空けておく */
	_overflow: auto;
	padding: 0;
}
</style>
</head>

<body>

<div id="top_frame"><p>ヘッダー(固定)</p></div>
<div id="under_frame"><p>コンテンツ(スクロール)</p></div>

</body>
</html>

ヘッダーとフッターが固定


HTML + CSS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
	margin: 0;
	padding-bottom: 100px; /* フッターの高さ */
	padding-top: 100px;    /* ヘッダーの高さ */
}

#header {
	background-color: #ccc;
	height: 100px; /* ヘッダーの高さ */
	position: fixed;
	top: 0;
	width: 100%;
}

#footer {
	background-color: #ccc;
	bottom: 0;
	height: 100px; /* フッターの高さ */
	position: fixed;
	width: 100%;
}
</style>
</head>

<body>
<div id="header">ヘッダー(固定)</div>
<div id="footer">フッター(固定)</div>
<div id="scrollframe">コンテンツ(スクロール)</div>
</body>
</html>

左サイドバー固定


DEMO

HTML + CSS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
* {
	margin:0;
	padding:0;
}

body {
	margin:0;
	_overflow:hidden;
	padding:0;
}

#left_frame {
	background-color: #ccc;
	height:100%;
	left:0;
	margin:0;
	padding:0;
	position:fixed;
	_position:absolute;
	top:0;
	width:160px;
}

#right_frame {
	height:100%;
	margin:0 0 0 170px;
	_overflow:auto;
	padding:0;
}
</style>
</head>

<body>
<div id="left_frame">左フレーム(固定)</div>
<div id="right_frame">右フレーム(スクロール)</div>
</body>
</html>

ヘッダー・フッター固定、左右フレームスクロール


HTML + CSS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
html {
	height: 100%;
	margin: 0;
}

body {
	margin: 0;
	padding-bottom: 20px;
	padding-top: 50px;
}

body, .item {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 100%;
	overflow: auto;
}

#header {
	background-color: #ccc;
	height: 50px;
	margin-top: -50px;
	padding: 5px;
}

#footer {
	background-color: #ccc;
	bottom: 0;
	height: 20px;
	overflow: hidden;
	position: absolute;
	width: 100%;
}

#middle {
}

#left_frame {
	float: left;
	width: 50%;
}

#right_frame {
}

.spacer {
	height: 10000px;
}
</style>
</head>

<body>
<div id="header" class="item">ヘッダー(固定)</div>
<div id="footer" class="item">フッター(固定)</div>
<div id="middle" class="item">
	<div id="left_frame" class="item">
		左フレーム(スクロール)
		<div class="spacer"></div>
	</div>
	<div id="right_frame" class="item">
		右フレーム(スクロール)
		<div class="spacer"></div>
	</div>
</div>
</body>
</html>

関連記事


Web制作・記事一覧