作成日

29 November 2010

必要条件

この記事に必要な予備知識

サンプル作成のツールとしてDreamweaverを使います(CS5以降が必要。CS5ではアップデータ11.0.3を適用し、「HTML5 パック for Dreamweaver CS5」をインストールする必要があります。

※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。

ユーザーレベル

初級

The second times in, use the "border-radius" is one of the properties of CSS3, has created a representation of the rounded corners. Using a sample that was created last time, this time we describe the mechanism of the background image layering of CSS3 called "multiple background images".

前回のおさらい:HTML5文書とCSSを用意する

前回の記事では、次のようなHTML文書、CSSを作成しました。

<HTML>

1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>CS5 Web Premium について</title> 6. <link rel="stylesheet" type="text/css" href="styles.css"> 7. </head> 8. 9. <body> 10. <section class="section-main"> 11. <hgroup> 12. <h1>CS5 Web Premium</h1> 13. <h2>効果的なWebサイト、モバイル、デバイスコンテンツ制作を支援</h2> 14. </hgroup> 15. <p>標準規格に準拠したWebサイト、表現力豊かで現実感溢れるデジタル体験を構築する際に必要なすべてが揃ったソリューションです。</p> 16. <section class="section-sub"> 17. <h3>WEBデザイン</h3> 18. <p>HTML、CSS、JavaScriptに特化したWebデザインを開発できます</p> 19. </section> 20. <section class="section-sub"> 21. <h3>インタラクティブデザイン</h3> 22. <p>ビジュアルで、もしくはコードベースの開発により、自由な形式の魅力あるインタラクティブWebコンテンツやエクスペリエンスを作成できます。</p> 23. </section> 24. </section> 25. </body> 26. 27. </html>

<CSS>

1. section{ 2. display:block; 3. } 4. 5. section.section-main{ 6. border:3px solid #006600; 7. -webkit-border-radius:20px; 8. -moz-border-radius:20px; 9. border-radius:20px; 10. padding:20px; 11. }

今回は、このサンプルに対してCSS3での背景処理を追加します。


完成予定のデザインから背景画像の構成を考える

CSS3では、background-imagesプロパティに対して、複数の画像をレイヤー状に指定することができます。この仕組みを利用すれば、1つの要素に対して複雑な背景画像の指定を行うことができます。今回の完成予定は次のような見た目を想定しています。

完成予定のデザインから背景を重なり合うパーツに分けると、次のような構造を考えることができます。

背景の設計を元に、今回は次のように6種類の画像を用意しました。

背景画像を適用する

multiple background imagesの仕組みを利用し、用意した画像を背景として適用してみましょう。ここでは<section class="section-main">…</section>に対して、背景を適用します。

今までのCSSの記述方法では背景画像を適用する場合、おそらく多くの人は次のようなコードを書くのではないでしょうか。

1. section.section-main{ 2. background:#669900 url(bg_01_mdl.png) repeat-x; 3. }

しかし、CSS3のmultiple background imagesの仕組みを利用すれば、次のように複数の値をカンマ区切りで列挙することで、レイヤー状に背景画像を適用することができます。このとき画像の重なり順は、先に記述した画像ほど前面に、後に記述した画像ほど背面に位置します。

1. section.section-main{ 2. /* part 2 */ 3. border:3px solid #006600; 4. -webkit-border-radius:20px; 5. -moz-border-radius:20px; 6. border-radius:20px; 7. /* part 3 */ 8. background:url(bg_01_tl.png) no-repeat, 9. url(bg_01_tr.png) no-repeat 100% 0, 10. url(bg_01_top.png) repeat-x, 11. url(bg_01_btm2.png) repeat-x 8px 100%, 12. url(bg_01_btm.png) repeat-x 0 100%, 13. #669900 url(bg_01_mdl.png) repeat-x; 14. padding:40px 80px 150px; 15. }

multiple background imagesが有効なWebブラウザーでは、レイヤー化された背景画像が反映され、次のように表示されます(なお、ここでは背景のデザインに合わせて、見出しなどの文字サイズも微調整しています)。

現在、multiple background imagesに対応しているWebブラウザー.はInternet Explorer 9 (beta)、Chrome、Safari、Firefox、Operaで、ほとんどのWebブラウザーの最新版で問題なく利用することができる安定した仕組みと言えます

Dreamweaverでは、ライブビューまたはマルチプレビューを利用することで表示を確認することができます。

ただし、Dreamweaver CS5をご利用の場合でも出荷状態の場合、文字化けして表示されてしまうことがあります。

ですので、HTML5やCSS3を利用する際には、メニューバーの[ヘルプ]→[アップデート…]より最新の状態にアップデートしておくとよいでしょう。


まとめ

今回は、CSS3で拡張されるmultiple background imagesを解説しました。この仕組みを用いれば、単純なHTMLのコードに対して、複雑な背景画像を適用することができます。さらに、CSS3のbackgroundでは、背景画像の大きさ、繰り返し範囲などの指定をすることもできるようになる予定です。これらにより今まで難しかった表現もある程度単純に実現することができるでしょう。なお、CSS3のbackground関連のプロパティは、既にDreamweaverの入力補完でも対応されています。

[Background-related reference site of CSS3]