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

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;
}

sponsors

top of page

©2018 coliss