視覚効果

例　背景画像(1)

bg.gif　(400px×400px)

上の図（bg.gif）は、PhotoshopElementで作成したものです。 「角丸長方形」ツールで図形を描き、「レイヤースタイル」で「ドロップシャドウ」をつけたものです。

「ビュー」メニューから「グリッド」でグリッドを表示し、「グリッドにスナップ」にチェックして おくとサイズを決めやすいです。グリッドの間隔は、「編集」→「環境設定」→「グリッド」で行います。

上記の画像(bg.gif)を背景画像として使うには、以下のようなスタイルをつけます。

1 背景画像(1)

* { margin:0; padding:0; }
div.h2 {
    padding:40px;
    width:320px;
    height:320px;
    background-image:url(bg.gif);
    background-repeat:no-repeat;
    background-position:top left;
}

赤字部分は、画像を入れた後で調整を行います。適当なpaddingの 値を定め、widthとheightの値を計算します。

この方法では、縦のサイズまで決まってしまうため、テキストの長さが異なる場合や、文字サイズの変更に よる縦の長さの変化に対応することができません。

例　背景画像(2)

縦の長さの変化に対応するためには、上下と中央の３枚の画像を使います。中央の画像は縦に繰り返して表示できるのでサイズを小さくできます。

top.gif　(400px×60px)

middle.gif　(400px×60px)

bottom.gif　(400px×60px)

上の３図（top.gif, middle.gif, bottom.gif）は、bg.gifを縦に３つに分割・抜粋したものです。 Photoshop Elementsでは「長方形選択」ツールで必要な部分を選択し、コピーした後、新規ファイルに貼り付けます。

上記の画像を背景画像として使うには、以下のようなスタイルをつけます。３つの背景画像を使うためには少なくとも３つのタグが必要になることに注意してください。

2 背景画像(2)

* {
    margin:0; padding:0;
}
div.h2 {
    width:400px;
}
div.h2 h2 {
    padding:30px 40px 0 40px;
    background-image:url(top.gif);
    background-repeat:no-repeat;
    background-position:top left;
}
div.h2 p {
    padding:0 40px;
    background-image:url(middle.gif);
    background-repeat:repeat-y;
    background-position:bottom left;
}
div.h2 p.footer {
    padding:0 40px 40px 40px;
    background-image:url(bottom.gif);
    background-repeat:no-repeat;
    background-position:bottom left;
}

画像を入れた後で調整を行います。paddingは上のパーツに上だけ、下のパーツに下だけ 付くことに注意してください。widthの値を計算します。

この方法でも、横のサイズの違いには対応することができません。

縦にも横にも対応する方法はありますが、画像の分割数も増え、難易度も高いので、この講座では扱いません。 興味のある人は、A List ApartのCSS Design: Creating Custom Corners & Borders(英語)を読んでみてください。

例　背景画像(3)

上部、下部の画像を表示するために:before擬似要素, :after擬似要素を使います。文字サイズの拡大縮小に対応しやすいこと、3要素なくても作れるといったメリットがあります。

3 背景画像(3)

* {
    margin:0; padding:0;
}
div.h2 {
    width:400px;
}
div.h2 * {
    padding:0 40px;
    background-image:url(middle.gif);
    background-repeat:repeat-y;
    background-position:bottom left;
}
div.h2:before {
    background-image:url(top.gif);
    background-repeat:no-repeat;
    background-position:top left;
    content:"";
    display:block;
    height:40px;
}
div.h2:after {
    background-image:url(bottom.gif);
    background-repeat:no-repeat;
    background-position:bottom left;
    content:"";
    display:block;
    height:40px;
}