ページ全体に枠線をつけるCSSテクニック:phpspot開発日誌

前の記事 ≪：2008年2月26日管理人のブックマーク
次の記事 ≫：煌めくホットな女性をPhotoShopで表現

ページ全体に枠線をつけるCSSテクニック

2008年02月27日-

スポンサードリンク

CSS Trick: Creating a?Body-Border - CSS-Tricks

Hicksdesign has been “fiddling” with their site design.

ページ全体に枠線をつけるCSSテクニック。
↓ブラウザのサイズを変更しても、水色の枠が画面にフィットするCSSサンプルです。

まず、マークアップ。上下左右用にdivを作成

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

次にCSS。left,right,top,bottomのtop,left,rightなどを調節して、上下左右に設定して枠線を表現しています。

#top, #bottom, #left, #right {
background: #a5ebff;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 15px;
}
#left { left: 0; }
#right { right: 0; }

#top, #bottom {
left: 0; right: 0;
height: 15px;
}
#top { top: 0; }
#bottom { bottom: 0; }

Firefox, Safari, Opera, IE7にて動作します、が上記はIE6では動作しないようなので、サンプルではIE6のみ、display:noneで非表示にしてます。

IE6だと、次のようなコードでうまくbodyに枠線表示できるみたいですね。