CSS3の基本 - レベルアップCSS

異なるWebブラウザに対する3つのアプローチ

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSS3で新しく追加された機能をどの程度使えるかは、Webブラウザによってまちまちです。Webブラウザによる表示の違いに対してどのように実装を行うか、代表的な3つのアプローチを紹介します。
講師:
06:02

字幕

CSS3 で新しく追加された機能をどの程度使えるかはウェブブラウザによってまちまちです。このレッスンではウェブブラウザによる表示の違いに対してどのように実装を行うかについて代表的な3つのアプローチを紹介します。現在普及している PC 向けウェブブラウザは「 Internet Explorer 」「 Google Chrome 」「 Mozilla Firefox 」「 Safari 」の4つがあります。これらのウェブブラウザは搭載されているレンダリングエンジンやバージョンによってCSS3 のサポート状況に違いがあります。特にまだ日本でのシェアが多いInternet Explorer のバージョン 8 以下ではHTML5 や CSS3 の機能にほとんど対応していません。また近年ではこれらに加えてスマートフォンやタブレットへの対応も考慮する必要があります。これらのウェブブラウザによる表示の違いに対しては3つの代表的な考え方があります。それは「リグレッシブ・エンハンスメント」「グレイスフル・デグラデーション」「プログレッシブ・エンハンスメント」の3つです。名前だけでは何のことだか想像しにくいですよね。 順に紹介していきますがこれはどのアプローチが正しくどのアプローチが間違っているというわけではありません。ウェブサイトの内容や設計、運用方法また制作費用やスケジュールによって都度適切なものをことを選ぶことが大切になります。そのためにそれぞれのアプローチについて知っておきましょう。まずはリグレッシブ・エンハンスメントについて紹介しますリグレッシブ・エンハンスメントはまずCSS3 への対応度合いが高い現代的なウェブブラウザ、モダンブラウザを基準にして考えます。対応度合いが低い古いウェブブラウザ、レガシーブラウザに対しては対応済みの機能や技術を使ってモダンブラウザと同等の機能を提供します。この同等の機能を提供する手段をポリフィルと呼びます。ポリフィルは多くの場合 JavaScript を使って実装されています。代表的な例を見てみましょう。代表的なポリフィルの1つである「 CSS3 PIE 」はCSS3 の一部のプロパティをレガシーブラウザで使えるようにするライブラリです。角丸やボックスシャドウ、グラデーションなどに対応しています。「 Selectivizr 」は CSS3 で追加された新しいセレクタを使えるようにするライブラリです。 間接セレクタや構造疑似クラスなどが使えるようになります。「 html5shiv 」は HTML5 に対応していないウェブブラウザでもボックスのレンダリングが正しく行われるようにするライブラリです。ただし canvas や video など HTML5 特有の機能を使えるようにはなりません。このようにポリフィルを使うことでレガシーブラウザにはない機能を補完することができます。一方でデメリットもあります。第一にレガシーブラウザではそもそもJavaScript の実行速度が遅いため遅い実行環境でさらに重いスクリプトを動かすことになってしまうという点です。第二にポリフィルはあくまで疑似的に再現する機能ですので機能やスクリプトの組み合わせ次第では正常に動作しなくなる可能性もあるという点です。第三にこれらを踏まえた動作検証のコストがかかります。すべての環境に同じ機能を提供すると言うと理想的に思えますが現実的にはこれらのデメリットも合わせて抱えるといういことに注意が必要です。次に「グレイスフル・デグラデーション」について紹介します。グレイスフル・デグラデーションでもまずはCSS3 への対応度合いが高いモダンブラウザを基準にして考えます。 レガシーブラウザに対しては最低限の装飾を保ちつつCSS3 による新しい表現は削ぎ落して対応します。例えばモダンブラウザで四角形のボタンに対して角丸のボタンを指定したとします。このときレガシーブラウザでは角丸に対応していないのでただの四角形のボタンとして表示されます。しかしボタン本来の機能が失われるわけではありませんのでこのウェブブラウザの表示の違いは上位機能の低下として受け入れるという考え方です。最後に「プログレッシブ・エンハンスメント」について紹介します。プログレッシブ・エンハンスメントはCSS3 への対応度合いが低いレガシーブラウザを基準にして考えます。まずは最低限の装飾を施した上でモダンブラウザだけ CSS3 による新しい表現を追加していくという考え方です。冒頭でも述べた通りここまでに紹介した3つのアプローチはどれかが正解というわけではありません。ウェブサイトの内容や条件に合わせて適切なアプローチを取ることが大切になります。また制作前にターゲットとするウェブブラウザをバージョンも含めて決めておくことも重要です。このレッスンではウェブブラウザによる表示の違いに対してどのように実装を行うかについて代表的な3つのアプローチを学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。