[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック

サイト構築 -CSS

Post on:2013年4月10日

sponsorsr

ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。

Body Border, Rounded Inside

Step 1: ページ全体を角丸で囲む（スクロール非対応）
Step 2: ページ全体を角丸で囲む（スクロール対応）
Step 3: ページ全体を角丸で囲む（スクロールバーを変更）

Step 1: ページ全体を角丸で囲む（スクロール非対応）

まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。

基本的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。

角丸用の画像

コードを見てみましょう。

HTML

HTMLは、bodyだけで構いません。

<body>
  <h1>Rounded inside body border</h1>
</body>

CSS

上記の画像をborder-imageに使用します。

body {
  border-image: url(rounded-edge.png) 25% repeat;
  border-width: 25px;
}

デモページ（スクロール非対応）
※IEは全てのバージョンでborder-imageが機能しません。

Step 2: ページ全体を角丸で囲む（スクロール対応）

Step 1ではスクロール非対応だったので、ページがビューポートより長くても問題ないようにします。

CSS

Step 1のCSSに、上3行を加えます。

* { box-sizing: border-box; }
html { height: 100%; }
body { min-height: 100%; }
body {
  border-image: url(rounded-edge.png) 25% repeat;
  border-width: 25px;
}

デモページ（スクロール対応）
※ページを長くする時は「Add Text」ボタンをクリック。

Step 3: ページ全体を角丸で囲む（スクロールバーを変更）

美しい角丸ボーダーが設置でき、せっかくなのでスクロールバーもそれにあったものにしてみましょう。
Webkit系ブラウザのみの対応ですが、スクロールバーをカスタマイズできます。

左：通常、右：カスタマイズ
※カスタマイズ版は、角丸ボーダーの内側にスクロールバーがあります。

HTML

ラッパーを一つ加えます。

<body>
  <div class="page-wrap">
    <h1>Rounded inside body border</h1>
  </div>
</body>

CSS

-webkit-scrollbar-thumbでスクロールバーを角丸にあうデザインにします。

body {
  background: #5bb0ff;
}

.page-wrap {
  position: fixed;
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;
  background: white;
  border-radius: 10px;
  padding: 20px;
  overflow-y: scroll;
}

::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}

デモページ
※ページを長くする時は「Add Text」ボタンをクリック。