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

第43回 CSS3 -今すぐ使えるCSS3-

CSS2.1の次なる仕様として大幅に機能が強化されているCSS3ですが、IEなど避けられないターゲットブラウザでの実装状況などから、未だPCサイトにおいては導入をためらうケースが多いのが現状です。しかしながら、CSS3の一部のプロパティはJavaScriptを併用することで非対応ブラウザにおいても同様なレイアウトを再現することが可能になります。
今回はそんなCSS3の新機能に対応していないIE6/7/8や、実装が不十分なIE9においても対応できる、CSS3の導入方法をご紹介します。

「CSS3」を導入するメリット

広義の"HTML5"のひとつとして扱われることもあるCSS3ですが、実はHTML4.01やXHTML1.0においても問題なく使用できます。
CSS3勧告前の現状ではプロパティや値の先頭に-webkit-や-moz-などのベンダープレフィックスを付ける必要があるため記述量としては多くなりますが、それでもCSS3を積極的に使うことのメリットは、ページ制作の効率化や運用更新性の向上が挙げられます。
デザインpsdの複数パターン作成やコーディング上の画像化の手間が省けたり、htmlのタグの入れ子を減らせる点など、CSS3を効果的に使用することはワークフローの大幅な削減に繋がります。

角丸+グラデーションの再現

角丸+グラデーションの再現

Webサイトのデザインで頻繁に見受けられる角丸やグラデーション等の装飾はCSS3で再現が可能ですが、IEにおいては非対応のものが多くあります。
ここでは見出しのレイアウトを例に、導入方法を紹介します。

まず角丸(boreder-radius)とグラデーション(gradient)非対応のIE6/7/8にプロパティを適用するため、
CSS3PIE(http://css3pie.com/)のPIE.htcというビヘイビアスクリプトを導入します。上記サイトのジェネレータを使用することでCSSコードを生成出来ます。
注意点としては、要素の背景色やボーダーが消えてしまう現象を回避するため position:relative; を記述する点です。[1]
また、IE8以下では印刷時にCSS3のプロパティが再現されないため、印刷対応のレベルには注意が必要です。

グラデーションをIE9に適用

グラデーションをIE9に適用

IE9は背景グラデーションに対応していません。そのため、レイアウトの再現には今回SVG(Scalable Vector Graphics)という、XMLで形成される画像ファイルを使用します。
※IE独自のプロパティであるfilterでもグラデーションは再現できますが、その場合、角丸(border-radius)が効かなくなってしまいます。

新規ファイルに右記の様に記述し「.svg」という拡張子で保存します。ファイル名や格納場所は任意です。SVGファイルはCSS側でbackground-imageとして読み込みます。記述場所はbackground単色指定の下、ベンダープレフィックス記述の上です。[2]SVG側での設定は[3]の2行の値の変更よりグラデーションの調整が可能です。

参考サイト:

http://news.mynavi.jp/articles/2010/11/09/ie9-svg-gradients-instead-of-css-gradients/index.html

今回はh2にCSS3を導入することで 角丸+グラデーションを再現しましたが、他にも 影(box-shadow)や 背景画像の複数指定(multiple background images)等も JavaScriptを併用することで IE6/7/8 での再現が可能になる為、工夫次第で様々な場面で装飾に利用できます。
CSS2.1だけでは表現が困難な箇所やモジュールを最小限に止めたい場合など、CSS3を効果的に導入してみてはいかがでしょうか。

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

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

    お問い合わせ

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

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