スタート!CSS入門

Webブラウザによる表示差異

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webページの閲覧に使われるWebブラウザには、代表的なInternet ExplorerやSafariの他にも無数の種類が存在します。CSSの観点から、これらの表示の違いについて紹介します。
講師:
04:46

字幕

ウェブページを表示するウェブブラウザには数多くの種類があります。このレッスンでは実際に様々なウェブブラウザでウェブページを表示しながらCSS の観点からこれらの表示の違いについて紹介します。画面では Google Chrome で sample site を表示しています。問題なく表示されていますね。つづいて Internet Explorer 11で同じサイトを表示してみましょう。表示の違いに注目してください。いかがでしょうかほとんど違いは見られませんね。それでは同じサイトをInternet Explorer のversion 8 という古いバージョンで表示してみます。もう一度表示の違いに注目してください。先ほどと違って大きく表示が変わりました。Internet Explorer 8 がsample site を記述しているHTML5 に対応していないためそれに対して指定した CSS も適用されなくなっており表示が崩れてしまっています。なお、ここでは古いバージョンのInternet Explorer の表示を確認するためIE テスターというツールを使っていますが表示結果は Internet Explorer 8 と全く同じ状態になります。 このように同じ HTML, CSS で書かれたウェブページでも閲覧するウェブブラウザによって表示に差異があることがわかります。このような表示の違いは主にウェブブラウザーの内部で動作するrendering engine というプログラムの違いから生まれます。rendering engine とは HTML やCSS などのウェブページを記述するための言語を解釈し画面に表示するための計算処理を行うプログラムのことです。Internet Explorer 8 のrendering engine にはHTML5 を解釈する機能がないため先ほどのような表示の違いが生まれたというわけです。ここで PC 向け仕様ウェブブラウザのrendering engine を確認してみましょう。PC 向け仕様ブラウザはInternet ExplorerGoogle ChromeMozilla FirefoxSafari の四つがあります。現在この四つのウェブブラウザはそれぞれ別の rendering engine を搭載しています。この表に乗っていない他のウェブブラウザではこれらの主要なウェブブラウザと同じ rendering engine を搭載しているものもあります。 基本的にはどの rendering engine もウェブ標準に基づいた実装が行われていますがW3C によってまだ勧告されていない仕様を先行実装されていたりバグがあったりといった様々な理由で多かれ少なかれ表示に違いがあるのが現状です。特に同じ rendering engine でもバージョンによってリリ―スされている時期が違うため最新バージョンでは表示できても古いバージョンではうまくいかないといったこともしばしばあります。特に CSS 周りでは古いウェブブラウザでバグが多く見られていたためその違いを吸収するために製作者が苦労を重ねるということも多々ありました。そのためウェブサイトを制作する前にターゲットとするウェブブラウザをバージョンも含めて決めておくこともお勧めします。ちなみに Google Chrome とMozilla Firefox は自動アップデート機能が搭載されておりこれらのウェブブラウザを使っているユーザーは自動的にバージョンアップが行われています。そのため古いバージョンでの動作をそれほど考慮しなくても良いような仕組みになっています。Internet Explorer についてもバージョン11からは自動アップデート機能が搭載されております。 なお、ここで取り上げているのはPC 向けのウェブブラウザですが近年ではスマートフォンやタブレットの急速に普及しています。これらのデバイスに搭載されているウェブブラウザは同じ rendering engine同じバージョンでも機種によって差が出ることもありますので注意が必要です。まとめましょうウェブページを表示するウェブブラウザには数多くの種類がありそれぞれ表示が異なります。このレッスンでは実際に様々なウェブブラウザでウェブページを表示しながらこれらの違いについて紹介しました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

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

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

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

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