必要条件

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

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

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

ユーザーレベル

すべて

本連載では、これまでHTML5やCSS3といった新しい技術について紹介してきました。しかし新しい技術がゆえに、ブラウザーによってはその機能を利用できないということが起きてしまいます。そこで連載最後となる今回は、これら新しい技術をどのように活用していけばいいのかを紹介します。

なお、これまでこの連載で作成してきたサンプルはHTML5やCSS3を利用しており、ChromeやSafariなどの場合は次のように表示されます。

Progressive Enhancement(プログレッシブ エンハンスメント)

2009年ころ、国内でも少しずつHTML5やCSS3が利用され始めました。当時はHTML5やCSS3に対応している環境が少なかったため、新しい技術を利用する際には、Internet Explorer 6などの一般的な環境には普通の体験を提供し、当時のSafariなどの高機能な環境にはHTML5やCSS3などをフルに活かしたよりいい体験を提供するといったポリシーが多く見受けられました。この「一般的環境を基準にし、進んだ環境をも視野に入れる」という考え方を「Progressive Enhancement(プログレッシブ エンハンスメント)」といいます。

Graceful Degradation(グレイスフル デグラデーション)

一方、最近ではChromeやSafariなどのWebkit系ブラウザーのみでなく、Internet Explorer 9、Firefox4、Opera11.10でもHTML5やCSS3など新しい機能への対応の足並みが揃いつつあります。つまり、Progressive Enhancementという言葉が生まれたころよりも、HTML5やCSS3を利用する基準が上がってきていることを意味します。

この流れにより、「限られた古い環境を基準にする」よりも、「最近の環境を基準にし、古い環境にはレベルを落とす」といった手法が流行ることが予感させられます。このような考え方を「Graceful Degradation(グレイスフル デグラデーション)」といいます。

例えば、この連載で作成してきたサンプルをInternet Explorer 6で表示してみると、border-radius(角丸)やmultiple-backgrounds(背景複数表示)などが無効となり、次のように表示されます。

表示はかなりシンプルなってしまいますが、ページから情報を取得することはできます。これは古い環境に限ったことであり、最近の環境ではしっかり意図した通りに表示されます。

Graceful Degradationは既に一般的なWebサイトでも活かされており、例えばTwitter公式サイトもその1つです。

Polyfill(ポリフィル)

一般商用向けのWeb制作においてGraceful Degradationを採用した表現手法をとることは、まだ時期が早いと感じる人もいるのではないでしょうか。しかし、そういった場合でもHTML5やCSS3を積極的に利用する手段はあります。古い環境を新しい環境に近づけてあげればいいのです。

幸い、古い環境の代表であるInternet Explorer 6や7には過去の遺産である様々な独自実装があり、これらを活かして一部のHTML5やCSS3と同等の機能をエミュレートすることができます。このように「新しい環境を基準にし、古い環境を新しい環境に近づけて差をなくす」という手段を「Polyfill(ポリフィル)」といいます。

例えば、「html5shim」や「Modernizr」を利用すれば、Internet Explorer 6や7などの古い環境でHTML5の基本的な要素(sectionやfigureなど)を擬似的に有効にすることができます。以前の記事でhtml5shim(html5.js)を利用することを紹介しましたが、Modernizrでもhtml5shivと同様に、Internet Explorer 8以下の環境でHTML5の基本的な要素を有効にすることができます。

Modernizrを利用する場合、modernizr-(バージョン).min .jsをダウンロードし、head要素内で次のように読み込みます。

1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>タイトル</title> 6. <script src="js/modernizr-1.7.min.js"></script> 7. </head> 8. <body> 9. <section>...</section> 10. </body> 11. </html>

また、CSS3のborder-radius(角丸)やmultiple-background(複数背景)を利用したい場合は「css3pie」などを利用するといいでしょう。

css3pieを利用するには次のような手順を踏みます。

  1. Internet Explorerの独自プロパティであるbehaviorプロパティでpie.htcファイルを読み込む※。
  2. pie.htcを読み込んでいれば、border-radiusはそのまま利用できる。
  3. pie.htcを読み込んでいれば、multiple-backgroundは「-pie-」の接頭辞をつけて併記することで利用できる。

※Internet Explorerがhtcファイルを読み込むためには、CSSからのパスではなく、HTMLファイルからのパスとする必要があります。そのため、一般的にはファイル間の相対パスではなく、「http//」や「/」から始まるパスを記述するといいでしょう。

29. section.section-main{ 30. behavior: url(/common/styles/PIE.htc); 31. /* part 2 */ 32. border:3px solid #006600; 33. -webkit-border-radius:20px; 34. -moz-border-radius:20px; 35. border-radius:20px; 36. /* part 3 */ 37. background:#669900 url(bg_01_mdl.png) repeat-x /*old browser*/; 38. -pie-background:url(bg_01_tl.png) no-repeat, 39. url(bg_01_tr.png) no-repeat 100% 0, 40. url(bg_01_top.png) repeat-x, 41. url(bg_01_btm2.png) repeat-x 8px 100%, 42. url(bg_01_btm.png) repeat-x 0 100%, 43. #669900 url(bg_01_mdl.png) repeat-x; 44. background:url(bg_01_tl.png) no-repeat, 45. url(bg_01_tr.png) no-repeat 100% 0, 46. url(bg_01_top.png) repeat-x, 47. url(bg_01_btm2.png) repeat-x 8px 100%, 48. url(bg_01_btm.png) repeat-x 0 100%, 49. #669900 url(bg_01_mdl.png) repeat-x; 50. padding:40px 80px 150px; 51. }

上記のようにcss3pieを利用することで、古いInternet Explorerでも擬似的にほぼ同じ見た目を実現できます。ただし、場合によってはPIEによる効果がうまく出ないことがあります。その場合は、該当の要素に対して「position:relative;」を併記するといいでしょう。

ここで紹介したようなPolyfillは、既に一般的なWebサイトでも活かされており、例えばローソン公式サイトでもcss3pieが利用されています。

また、ここで紹介したライブラリ以外にもWeb上では様々なPolyfillライブラリが公開されおり、「HTML5 Cross Browser Polyfills」では、SVG、WebStorage、CSS3 Transformなど機能ごとにライブラリがまとめられています。今後のWeb制作において、Polyfillの利用は重要になっていくでしょう。

まとめ

この連載ではHTML5やCSS3といった、新しい技術とその利用方法について紹介してきました。取り上げた技術は決して未来のものではなく、今使える技術です。そして、その考え方や実現手段としてGraceful DegradationやPolyfillがあるのです。ぜひ、ご自身の制作でも、HTML5、CSS3、そしてこれらの技術への対応を果たしたDreamweaverを活用してみてください。