- Coding Methodology
- 第71回 CSS3で複数の背景を指定する
第71回 CSS3で複数の背景を指定する
CSS3からbackgroundプロパティで背景を複数指定出来るようになりました。
複数の指定が可能になったことで、ソースコードが簡略化され、管理もしやすく、より効率的にコーディング出来るようになりました。
今回は、パターン1の可変ボックスとパターン2のボタンを例に、具体的な背景指定の方法をご紹介します。
パターン1: 様々な模様・柄がある可変ボックス
完成イメージのような可変ボックスを作成するため、画像 ①-1 , ①-2 , ①-3 を準備します。それぞれbg_head01.gif、bg_body01.gif、bg_foot01.gifと命名しています。
CSS2ではbackgroundの背景は指定が１つしか出来なかったため、完成イメージのようなデザインを実現するには最低3つのdivの入れ子が必要でしたが、CSS3ではbackgroundプロパティ１つで複数の画像を指定出来るようになったため、１つのdivタグで実現が可能となりました。(②)
CSSの記述は
background: (背景01), (背景02), (背景03), .........,(背景n);
のように指定します。（③）
例えば、Photoshopのレイヤー構造では上の層のレイヤーほど前面に表示されます。backgroundの指定ではレイヤー構造のように重なりあって表示され、先頭で指定するものほど前面に表示されます。(④)
パターン1のデザインを実現するには、上部(bg_head01.gif)、下部(bg_foot01.gif)、リピートさせる中央部(bg_body01.gif)の順で指定します。
①画像
②HTML③CSS
④背景の表示構造イメージ
パターン2: アイコン、グラデーションのあるボタン
完成イメージのようなボタンを作成するためには、アイコン画像(⑤-1)、矢印画像(⑤-2)、グラデーション画像(⑤-3)を用意します。アイコン画像はico_square01.gif、矢印画像をico_arrow01.png、グラデーション画像をbg_btn01.pngと命名しています。
アイコン画像と矢印画像を前面に表示させ、背面にグラデーション画像を表示させたいので、 CSSのbackgroundの指定はアイコン画像と矢印画像の指定の後にグラデーション画像の指定をします。(⑦)
また、グラデーションはグラデーション画像ではなく、linear-gradientプロパティを指定することでも今回のボタンのグラデーションを表現することもできます。
⑤画像
⑥HTML⑦CSS
