WEBサイト制作ここがポイント！なぜブラウザごとに表示差が発生するのか

こんにちは。PIVOTコラム編集部です。

こちらの記事は [どうしてブラウザテストって必要なの？] からの続きになります。

まだ読まれていない方は是非読んでみてください！

まず結論から言いますと、

ブラウザに搭載されている「HTMLレンダリングエンジン」や「JavaScriptエンジン」がブラウザごとに異なるからです。

HTMLレンダリングエンジンとは、ウェブページを構成しているうちの「HTML」と「CSS」を処理する役割を持ったプログラムのことです。HTMLレンダリングエンジンが「HTML」と「CSS」に記述されている、”見た目に関するプログラム”を処理することで、ウェブページ上に文章や画像を表示させています。

JavaScriptエンジンとは、ウェブページを構成しているうちの「JavaScript」を処理する役割を持ったプログラムのことです。JavaScriptエンジンは「JavaScript」に記述されている”機能に関するプログラム”を処理することで、ウェブページ上で意図した機能を動作させています。

HTMLレンダリングエンジンやJavaScriptエンジンは、ブラウザごとに搭載されている物が異なります。

以下に有名なブラウザを例に挙げます。

「Google Chrome, Microsoft Edge」
HTMLレンダリングエンジン — Blink
JavaScriptエンジン ——— Google V8 JavaScript Engine

「Safari」
HTMLレンダリングエンジン — WebKit
JavaScriptエンジン ——— JavaScript Core

つまり、同じHTML, CSS, JavaScriptであったとしても、ブラウザごとに搭載されているHTMLレンダリングエンジンやJavaScriptエンジンがどのように解釈し処理するのかによって、ブラウザごとの表示差が発生しているのです。

このように発生してしまう表示差をなくすために、実際の制作現場では、「reset.css」や「normalize.css」というプログラムを、ウェブページを表示させる際に読み込ませています。

これらのCSSは主にHTMLレンダリングエンジンに作用するもので、HTMLレンダリングエンジンの処理の仕方を均一化させることで、ブラウザごとの表示差を解消しています。

しかし、「reset.css」や「normalize.css」だけではブラウザごとの表示差を完全に取り除くことができないため、これらと並行してベンダープレフィックスという技術を使ったり、表示差が発生してしまったプログラムを表示差が発生しにくいプログラムに変更したり、といった工夫を行なっています。

ブラウザごとに表示差が発生する理由は、

ブラウザに搭載されているHTMLレンダリングエンジンやJavaScriptエンジンが異なるためでした。

ブラウザの種類は多数ありますが、昨今はInternet Explorar11のサポートが終了が発表されたり、レガシー版Edgeが終了したりと、ブラウザ勢力図(?)は日々変化をしています。

皆さんも、新しくWEBサイト制作をする際は、メインターゲットがどんなブラウザを使用しているか、意識してみるとよいかもしれません！