ブラウザはどうやってWebページを表示する？表示がデバイスごとに異なる理由を徹底解説

Webを閲覧していると、同じサイトなのにデバイスによって見た目が違ったり、一部の機能がまったく動作しなかったりすることは珍しくありません。

多くの場合、これはWebサイト側の問題ではなく、あなたが使っているブラウザに原因があります。主要な5つのデスクトップブラウザは、それぞれ異なる「レンダリングエンジン」を使ってページを表示しており、その動作はエンジンごとに異なります。

つまり、Webの体験は、どのブラウザを使っているか、さらにはそのバージョンによっても変わってしまうのです。

レンダリングエンジンとは？

Webページは、画面に1ピクセルずつ描画される単一のファイルではありません。実際には、HTML、CSS、JavaScript、PHPなどさまざまなコードで書かれた一連の命令の集まりであり、ブラウザに対して「何を、どこに、どのように表示するか」を指示しています。

各ブラウザは「レンダリングエンジン」（レイアウトエンジンとも呼ばれます）と呼ばれる仕組みを使い、コードに含まれるコンテンツやスタイル情報を読み取り、整形された形で画面に表示しています。

問題は、すべてのブラウザで同じレンダリングエンジンが使われているわけではないという点です。各言語には詳細な仕様（スペック）が定められていますが、エンジンが実装できるのはあくまでその仕様の「解釈」にとどまります。

特にCSS（スタイル情報を担うコード）については、どのエンジンも完全に同じ結果を生み出すことはありません。違いは数ピクセルのずれ程度のこともあれば、大きく異なる場合もあります。

どのブラウザがどのエンジンを使っているのか

主要なブラウザで使われているレンダリングエンジンは、主に以下の4種類です。

• WebKit：オープンソースのエンジン。OS X・iOS版Safariのほか、Android標準ブラウザをはじめ多くのモバイルブラウザで採用されています。
• Blink：WebKitをベースとしたオープンソースエンジン。Chrome、Opera、Amazon Silk、AndroidのWebView（アプリ内で開くブラウザ）などを支えています。
• Gecko：Mozilla Foundationが開発したオープンソースエンジン。Firefoxで使用されています。
• Trident：Microsoftが開発した独自エンジン。Internet Explorerで使用され、当時の新しいEdgeブラウザでは後継の「EdgeHTML」が採用される予定でした。
  ※なお、その後EdgeはChromiumベースへ移行し、現在はBlinkを採用しています。

Web標準

Internet Explorerが支配的だった時代と比べると、レンダリングエンジン間の差は格段に縮まっています。

「Acid3」などのテストは、ブラウザがどれだけ正確にページを描画できるかを測るもので、近年のブラウザの多くは高得点を記録しています。しかし、標準への準拠は非常に複雑な作業です。

HTMLやCSSなどの仕様は膨大で、新しい要素が追加されたり、古い・使われない要素が削除されたりします。レンダリングエンジンがこれらの変更に対応するには時間がかかります。

HTML5やCSSの仕様の中には、いまだ主流ブラウザで一切サポートされていない要素もあれば、部分的なサポートにとどまるもの、特定のブラウザでのみサポートされているものもあります。

「html5test.com」では、自分のブラウザとそのバージョンが、HTML5の公式機能や実験的機能にどれほど対応しているかをテストできます。執筆時点ではChromeが主要ブラウザ中で最高評価、Internet Explorer 11が最低という結果でした。

Web開発者が、あるブラウザではサポートされていて別のブラウザではサポートされていない機能を使った場合、対応していないブラウザは近い代替で済ませるか、その機能を無視するしかありません（例：透明なボックスが不透明として描画されるなど）。

このため、Webページのレンダリングは見た目以上に複雑な作業になっています。頻繁に更新されるブラウザの方が、そうでないブラウザより標準準拠度が高い傾向にあります。自動更新が定期的に行われるChromeと、更新サイクルが長かったIEを比べれば、その差は歴然です。

さらに、他にもさまざまな要因が絡んできます。

• エンジンのバグ：レンダリングエンジンもソフトウェアであり、すべてのソフトウェアにはバグが存在します。重大なバグは速やかに修正されますが、特定のコードの組み合わせが予期しない描画結果を生む可能性を完全に排除することはできません。
• Webページ側のバグ：ブラウザには一定のエラー許容性が組み込まれていますが、その度合いはエンジンによって異なります。コードに誤りがあるページでも、あるブラウザでは完璧に表示されるのに、別のブラウザでは大きく崩れてしまうことがあります。
• フォント：フォントの表示方法はブラウザではなくOSが担っています。WindowsとOS Xではフォントの描画方式が異なるため、同じブラウザ・同じフォントでも、プラットフォームが違えば見え方が変わります。
• レガシー対応：ブラウザは、公式仕様になる前に新機能を先取りして実装することがあります。仕様策定の過程で実装方法が変更された場合、開発者は「変更に追従して、旧バージョン向けに作られた数千のサイトとの互換性を壊すリスクを取る」か、「新しい仕様を無視する」かを判断しなければなりません。
• 独自機能：一部のブラウザは、他では利用できない独自技術を採用しています。最も有名なのはInternet ExplorerのActiveXフレームワークですが、新しいMicrosoft Edgeでは使用されない予定でした。

まとめ

これほど多くの要因が絡んでいるため、ブラウザによるページ表示の違いが今も残っているのも無理はありません。

状況は改善傾向にありますが、完全な解決は難しいでしょう。全員が最新版のブラウザを使えば話は早いのですが、公開から6年以上経ったInternet Explorer 8が依然として約4.5％のシェアを保っていたことを考えれば、それはまだ遠い道のりでした。

あなたはどのブラウザを使っていますか？最新版に更新していますか？使っているブラウザで動作しないサイトに出会ったことはありますか？ぜひコメントで教えてください。

画像クレジット：Devices by Jeremy Keith、Unsupported browser by Duncan Hill