ページ全体に枠線をつける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に枠線表示できるみたいですね。
<html>
<style type="text/css">
body {border:solid 10px orange;}
</style>
<body>
</body>
</html>
この表記で問題があるようでしたら、ご指摘お願いします。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ