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

PIVOT Column 編集部 Member

2021.10.11 (更新日 2024.7.22)

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

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

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

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

もくじ

なぜブラウザごとに違いがあるか? ~ WEBサイト制作のポイント

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

 

ブラウザに搭載されている「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エンジンがどのように解釈し処理するのかによって、ブラウザごとの表示差が発生しているのです。

 

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

表示差をなくすための工夫 ~ WEBサイト制作のポイント

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

 

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

 

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

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

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

 

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

 

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

 

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

Next Column
Columnトップへ戻る

「真ん中に『人』がいる
デジタルサービス」をつくりませんか。

お仕事のご相談やお見積もりのご依頼、具体的なご相談は、こちらからお問い合わせください。

でも何から相談して良いかわからない...

無料

よろず相談窓口

「こんなことでも依頼できる?」
 ふわっとした質問・相談大歓迎

予約はこちら 予約ページより、ご都合の良い時間を選んでご予約いただけます。

資料ダウンロード

費用・制作期間など、PIVOTの各サービスの紹介資料をご参照いただけます。