dncl

index list

• type-A 入れ子型(固定)
• type-B 入れ子型(可変)
• type-C 疑似要素型

type-A 入れ子型(固定)

A-1

横幅固定型であるtype-A-1では、最初にボックスの幅を決め、それに合わせた背景画像を用意します。
親ボックスにあたるdiv要素に上端用の背景画像と背景色を、子ボックスにあたるp要素に下端用の背景画像をそれぞれ指定します。
div要素に指定する背景色には、背景画像に使用しているものと同じ色を指定します。

CSS

• div.box

• background-image:url("top.png");
  background-repeat:no-repeat;
  background-position:left top;
  background-color:#5e7ea0;

• p.content

• background-image:url("bottom.png");
  background-repeat:no-repeat;
  background-position:left bottom;

親ボックスにあたるdiv要素には"box"というクラス名を与え、CSSで背景画像と背景色を指定します。
background-repeat プロパティには no-repeat を指定し、背景画像が繰り返されないようにします。
background-position プロパティには left top を指定し、左上に背景画像が表示されるようにします。
background-color プロパティには背景画像で使用しているものと同じ色を指定します。

div.boxに含まれるp要素には"content"というクラス名を与え、CSSで背景画像を指定します。
background-repeat プロパティには no-repeat を指定し、背景画像が繰り返されないようにします。
background-position プロパティには left bottom を指定し、左下に背景画像が表示されるようにします。

以下のリンク先で表示サンプルとソースを確認できます。

サンプルとソース

A-2

type-A-1と異なるのは、背景にグラデーションを用いている点です。
背景用の角丸ボックス画像を作成する際に、ボックスの下端用背景として切り出す位置までグラデーションをかけます。

サンプルでは、明るい青(#5d7d9f)から暗い青(#365678)へのグラデーションをかけています。
このグラデーションのかかっている部分が上端用の背景画像になります。

CSS

• div.box

• background-image:url("top.png");
  background-repeat:no-repeat;
  background-position:left top;
  background-color:#365678;

• p.content

• background-image:url("bottom.png");
  background-repeat:no-repeat;
  background-position:left bottom;

CSSの内容はtype-A-1と基本的には同じですが、div.boxに指定する background-color プロパティの値をグラデーションの終端部分と同じ色にする必要があります。

サンプルとソース

type-B 入れ子型(可変)

B-1

type-B-1では、4つの角それぞれに背景画像を表示させるため、同じ数のdiv要素でコンテンツを囲みます。
最も外側のdiv要素には、背景画像と同じ色を背景色として指定します。

CSS

• div.box

• background-image:url("tl.png");
  background-repeat:no-repeat;
  background-position:left top;
  background-color:#5e7ea0;

• div.box2

• background-image:url("tr.png");
  background-repeat:no-repeat;
  background-position:right top;

• div.box3

• background-image:url("bl.png");
  background-repeat:no-repeat;
  background-position:left bottom;

• div.box4

• background-image:url("br.png");
  background-repeat:no-repeat;
  background-position:right bottom;

div.boxには左上に背景画像を繰り返さず表示されるように指定し、background-color プロパティも合わせて指定します。
他のdiv要素にもそれぞれ背景画像を表示させます。

サンプルとソース

B-2

type-B-2では、背景画像にグラデーションを使用しています。
グラデーション部分が上側の背景画像になる点はtype-A-2と同様ですが、左上用、右上用、繰り返し用の3つの画像に分割して書出す点が異なります。

必要な背景画像を表示させるために、5つのdiv要素を入れ子状に配置します。
最も外側のdiv要素には、グラデーションの終端部分と同じ色を背景色として指定します。

CSS

• div.box

• background-image:url("tc.png");
  background-repeat:repeat-x;
  background-position:left top;
  background-color:#365678;

• div.box2

• background-image:url("tl.png");
  background-repeat:no-repeat;
  background-position:left top;

• div.box3

• background-image:url("tr.png");
  background-repeat:no-repeat;
  background-position:right top;

• div.box4

• background-image:url("bl.png");
  background-repeat:no-repeat;
  background-position:left bottom;

• div.box5

• background-image:url("br.png");
  background-repeat:no-repeat;
  background-position:right bottom;

div.boxには背景画像が横方向に繰り返して表示されるように指定し、 background-color プロパティも合わせて指定します。
他のdiv要素では背景画像が繰り返されないように指定します。

サンプルとソース

type-C 疑似要素型

C-1

type-Cでは、CSSの :before / :after 疑似要素を用いて角丸ボックスを表現します。
余分なdiv要素を追加する必要もなく汎用性の高いスマートな方法ですが、Internet Explorer(IE)がバージョン7の時点で :before / :after 疑似要素および content プロパティに対応していないため、使用が難しいというのが現状です。
角丸ボックスの表現にこの方法を用いる場合は、なんらかのIE向け対策が必要になるでしょう。

CSS

• div.box

• background-color:#5e7ea0;
  padding:10px

• div.box:before

• background-image:url("tr.png");
  background-repeat:no-repeat;
  background-position:right top;
  content:url("tl.png");
  display:block;
  height:10px;
  font-size:1px;
  margin:-10px -10px 0 -10px;

• div.box:after

• background-image:url("br.png");
  background-repeat:no-repeat;
  background-position:right bottom;
  content:url("bl.png");
  display:block;
  height:10px;
  font-size:1px;
  margin:-10px;
  padding-top:10px;

div.boxには、background-color プロパティに背景画像に使用しているのと同じ色を指定し、パディングを取ります。
この例では画像のサイズに合わせて padding を指定しています。

div.boxの疑似要素 :before には、content プロパティに画像URLを指定し、左上にあたる角丸画像を表示させます。
また、display:block を指定してブロック要素にしたうえで、右上にあたる角丸画像を背景に指定し、div.boxのパディングに合わせたマイナス値のマージンを与えて表示位置を調整します。

div.box:afterについても同様にCSSを記述しますが、下方向へのマージンと、上方向へのパディングが必要になります。

サンプルとソース