[CSS]ブラウザの表示領域いっぱいにボーダーを配置するスタイルシートのテクニックいろいろ

Post on:2010年12月22日

sponsorsr

HTMLを汚さずに、ブラウザの表示領域いっぱいにボーダーを配置するスタイルシートを紹介します。

Simplified page borders in pure CSS
デモページ（当方作成）

[ad#ad-2]

下記に、元記事で紹介されている方法（その1）をはじめ、コメントに掲載されている方法を含めて紹介します。
対応ブラウザは基本的に:before, :after疑似要素を使用するため、IE 8+, Firefox, Chrome, Safari, Operaとなります。

ブラウザの表示領域いっぱいにボーダーを配置する方法：その1

元記事で紹介されている方法です。

デモページ：その1（当方作成）

HTML

HTMLは、divなど特別な要素は配置しません。
以下に紹介する全ての方法で共通です。

<html>
<body>
</body>
</html>

CSS

/*------------------------------------*\
	BORDERS
\*------------------------------------*/

/* Create a series of empty pseudo-elements... */
html:before,html:after,body:before,body:after{
	content:"";
	background:#dad8bb;
	position:fixed;
	display:block;
	z-index:5;
}

/* ...and position them! */
html:before{
	height:10px;
	left:0;
	right:0;
	top:0;
}
html:after{
	width:10px;
	top:0;
	right:0;
	bottom:0;
}
body:before{
	height:10px;
	right:0;
	bottom:0;
	left:0;
}
body:after{
	width:10px;
	top:0;
	bottom:0;
	left:0;
}

ブラウザの表示領域いっぱいにボーダーを配置する方法：その2

コメントで紹介されている方法です。
詳しい解説は「Multiple Backgrounds and Borders with CSS 2.1」を参照ください。

デモページ：その2（当方作成）

[ad#ad-2]

CSS

html:before {
	content:"";
	position:fixed;
	z-index:-1;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border:10px solid #dad8bb;
}

ブラウザの表示領域いっぱいにボーダーを配置する方法：その3

コメントで紹介されている方法です。
非常に簡単ですが、これはダメです。

デモページ：その3（当方作成）

CSS

body { border:solid 10px #dad8bb }

ブラウザの表示領域いっぱいにボーダーを配置する方法：その4

コメントで紹介されている方法です。
疑似要素の数を減らしたものです。

デモページ：その4（当方作成）

CSS

html:before,
html:after,
body:before {
	content:"";
	position:fixed;
	z-index:-1;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border:10px solid #dad8bb;
}

html:after {
	z-index:10;
	top:auto;
	border-width:0 0 10px;
}

body:before {
	z-index:10;
	bottom:auto;
	border-width:10px 0 0;
}