[CSS]ブラウザの表示領域いっぱいにボーダーを配置するスタイルシートのテクニックいろいろ
Post on:2010年12月22日
sponsors
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
