ブラウザの種類と見え方の違い

当サイトで解説用に使用しているブラウザはMicrosoftのInternetExplorer（以下：IE）です。Windowsユーザーの方であれば、お馴染みのブラウザですね。Windowsパソコンを購入したら最初からインストールされている、利用人口も非常に多いブラウザです。

でも、世の中にはIE以外にたくさんのブラウザがあります。以下に代表的なブラウザをまとめてみました。

ブラウザの種類と特徴

Firefox

Mozilla Foundationが開発しているブラウザです。軽量・軽快な動作と豊富な拡張機能が特徴です。カスタマイズ性も非常に高く、きめ細かいオプション設定、セキュリティ機能など幅広いユーザーから支持を集めています。

Google Chrome

Googleが開発した軽量・超高速が特徴のブラウザです。シンプルなデザインと使い勝手の良さで、着実にシェアを伸ばしています。なんといっても一番の特徴はその速度であり、どんなページでもサクサク表示することが可能です。カスタマイズ性も高く、幅広い環境に対応したブラウザです。

safari

アップルが開発しているブラウザで、Macintosh（OS X v10.3以降）に標準搭載されています。さすがアップル製だけあって、外見がオシャレ！フォントも美しくて読みやすく、快適にインターネットを楽しむことができます。タブブラウジングや広告のブロック機能も搭載。iPhone､iPod touch、iPadなどのアップル製品にも採用されています。

Opera

ノルウェー発のブラウザです。広く採用されているブラウザであり、有名なところでは携帯ゲーム機やテレビ、スマートフォンなどに使われています。OSもWindowsだけでなく、LinuxやUnixなど、ほぼすべてのパソコンで利用することができます。

Lunascape

レンダリングエンジンを切り替えることが出来るトリプルエンジンが特徴のブラウザです。1つのブラウザで複数のブラウザのような、複雑な動きができます。また、豊富な拡張性とデザイン、スタイルにより自分好みのブラウザに仕上げることができます。

Sleipnir

デザインとフォントの美しさ、カスタマイズ性の高さが特徴のブラウザです。拡張機能も豊富に用意されており、何より国産なので情報収集に困ることがありません。また、IEをベースとして開発されているので後述のレイアウト崩れや不具合が起こりにくいブラウザとなっています。

lynx

少し変わった、テキストベースのブラウザです。画像を表示せず、キーボードで快適に操作することのできるブラウザです。その特徴から検索エンジン対策（SEO対策）にも使われることがあります。

その他のブラウザ

ほかにも様々な特徴をもつブラウザがたくさんあります。
例えば、有名な大型掲示板「２ちゃんねる」を快適に見るためのブラウザがあったり、テキストのみを表示する超シンプルなブラウザだったり、一口にブラウザと言っても、とても奥深いものとなっています。
興味のある方は、色々調べてみてください。 ちなみに私はGoogle Chrome、Firefox、safariを愛用しています。

まったく同じホームページを見ていても、使用しているブラウザの種類やバージョンによって、見え方が大きく異なる場合があります。

E5とIE11によるレイアウト比較

IE5で表示したさきちんWEB

IE11で表示したさきちんWEB

同時間にまったく同じページを見ているのですが、ブラウザのバージョンによってここまでレイアウトが違ってきます。
上記の画像はわかりやすいように極端な例を示しましたが（IE5を使っているユーザーはほとんどいない・・・はず）、IE6などはレイアウト崩れが起こりやすいブラウザです。
（バージョンが新しくなるにつれ、ずいぶん改善されました）

また、IEでは正常にページを表示できるのに、FirefoxやGoogle Chrome、safariなどのブラウザで正常表示できない場合もあります。

これらの問題の多くは製作者側に起因することが多く、ホームページを制作する場合は様々なブラウザからのアクセスを想定してページを制作する必要があります。
※IEに最適化、またはIEのみでレイアウト確認している場合は、他のブラウザで表示するとレイアウトが崩れる可能性があります。

またIE6などはプログラムの解釈に不具合があり、その特性をうまく利用してレイアウトを整えるテクニックが必要となります。

なので、ホームページを制作する場合は、どんなブラウザからアクセスしても正常に表示できるよう配慮する必要があります。
タブレットやスマートフォンでアクセスする人も多いので、必要があればそちらにも合わせる必要があります。

原因は様々ありますが、一番大きな原因は「ブラウザの設計思想と、レンダリングエンジンの違い」が挙げられます。

人それぞれ考え方が違うように、ブラウザを作る人（会社）が違えば、当然動作も異なってきます。

基本的な部分である「インターネットを利活用するソフト」という点でのベースは同じですが、そこから先の味付け、クセなどは各ブラウザ異なってきます。 このあたりのズレが表示の違いや動作に影響しています。

また、採用するレンダリングエンジンでも表示方法と動作が異なります。
レンダリングエンジンとはブラウザのもっとも核となる部分であり、HTMLやCSS、Javascriptなどのプログラム部分の解釈を行うための、いわば「頭脳」のようなものです。この「頭脳」が異なれば、当然ページの表示にも影響が出てきます。

以下に主なレンダリングエンジンをまとめてみました。

レンダリングエンジンの種類と特徴

Trident

主にIEで利用されているエンジンです。広く普及しており、閲覧できるウェブサイト数も最も多いのが特徴です。いわゆる「安定したレンダリングエンジン」ですが、動作速度がやや遅いことが難点です。

Gecko

Firefoxなどに搭載される、レンダリングエンジンです。javascriptの動作速度やページの読み込み速度が早いのが特徴ですが、IE向けにカスタマイズされたページではレイアウト崩れが起こる可能性があります。

WebKit

アップルが中心となって開発しているレンダリングエンジンです。主にsafariに採用されています。軽快・超高速が特徴のエンジンですが、IE向けにカスタマイズされたページではレイアウト崩れが起こる可能性があります。

Blink

主にGoogleが開発しているレンダリングエンジンです。もともとGoogle ChromeはWebKitを採用していましたが、そこから派生して生まれたのがこのBlinkです。こちらも、IE向けにカスタマイズされたページではレイアウト崩れが起こる可能性があります。

上記のレンダリングエンジンの違いにより、製作者の意図しないレイアウトとなる場合があります。
そのほかにもブラウザの不具合やWebサーバーにより、レイアウトや動作が異なる場合があります。

※とくにIEは独自解釈や不具合が多く、Webデザイナーを悩ませる原因となっています・・・。

次のページからは

以上で1章の終了です。次からは2章【CSSの基礎と応用】に入ります。ホームページを制作する上で、HTMLと同じくらい重要な要素です。決して難しくはないので、頑張って学習しましょう！