コーディングメソドロジー

第71回 CSS3で複数の背景を指定する

CSS3からbackgroundプロパティで背景を複数指定出来るようになりました。
複数の指定が可能になったことで、ソースコードが簡略化され、管理もしやすく、より効率的にコーディング出来るようになりました。
今回は、パターン1の可変ボックスとパターン2のボタンを例に、具体的な背景指定の方法をご紹介します。

パターン1: 様々な模様・柄がある可変ボックス

完成イメージのような可変ボックスを作成するため、画像 ①-1 , ①-2 , ①-3 を準備します。それぞれbg_head01.gif、bg_body01.gif、bg_foot01.gifと命名しています。
CSS2ではbackgroundの背景は指定が1つしか出来なかったため、完成イメージのようなデザインを実現するには最低3つのdivの入れ子が必要でしたが、CSS3ではbackgroundプロパティ1つで複数の画像を指定出来るようになったため、1つのdivタグで実現が可能となりました。()
CSSの記述は

background: (背景01), (背景02), (背景03), .........,(背景n);

のように指定します。(
例えば、Photoshopのレイヤー構造では上の層のレイヤーほど前面に表示されます。backgroundの指定ではレイヤー構造のように重なりあって表示され、先頭で指定するものほど前面に表示されます。()
パターン1のデザインを実現するには、上部(bg_head01.gif)、下部(bg_foot01.gif)、リピートさせる中央部(bg_body01.gif)の順で指定します。

①画像

①画像

②HTML③CSS

②HTML ③CSS

④背景の表示構造イメージ

④背景の表示構造イメージ

パターン2: アイコン、グラデーションのあるボタン

完成イメージのようなボタンを作成するためには、アイコン画像(⑤-1)、矢印画像(⑤-2)、グラデーション画像(⑤-3)を用意します。アイコン画像はico_square01.gif、矢印画像をico_arrow01.png、グラデーション画像をbg_btn01.pngと命名しています。
アイコン画像と矢印画像を前面に表示させ、背面にグラデーション画像を表示させたいので、 CSSのbackgroundの指定はアイコン画像と矢印画像の指定の後にグラデーション画像の指定をします。()

また、グラデーションはグラデーション画像ではなく、linear-gradientプロパティを指定することでも今回のボタンのグラデーションを表現することもできます。

⑤画像

⑤画像

⑥HTML⑦CSS

⑥HTML ⑦CSS

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム