なぜブラウザによってレイアウトが崩れるのか?【Web制作者なら一度は気になる】

こんにちは、Web制作をやっているゆーたです。

Web制作をされている方は、Google Chrome(以下:Chrome)やSafari、Firefox、Internet Explorer(以下:IE)などの各ブラウザによるレイアウトの崩れに悩まされていることと思います。その中でも特にIEは曲者だと思います。

ということで、早速ブラウザによってレイアウトが崩れる理由をネタバレすると、HTMLやCSSを使えるようにしてくれているブラウザの開発元が異なるからです。

要するにGoogleやApple、Microsoft(以下:MS)等がHTMLやCSSを使えるように開発しているのです。

「更に詳細に知りたい!」と興味のある方はこのまま読み進めてください。少々、内容としては難しいと感じる方もいると思いますが、これを気に原点に立ち返ってみましょう。

W3Cについて

始めにネタバレしたように、ブラウザによってレイアウトが崩れる理由は、HTMLやCSSを使えるようにしてくれているブラウザの開発元が異なるということでした。

開発元が異なるということは、HTMLやCSSに対して何らかのルールや決まりごとがなければ、ブラウザによって全く異なるように表示され、互換性が消え去ってしまいます。

そのためにHTMLやCSSなどのWeb技術をルール化しなければなりません。そこで生まれたのが、W3CというWeb技術の標準化を行う非営利団体です。

簡単に言うと、W3CがHTMLやCSSのルールを決めて、そのルールに従ってGoogleやApple等がHTMLやCSSを使えるようにブラウザを開発しているのです。

組織図

このように開発元の足並みが揃うことで、ブラウザごとに極端なレイアウト崩れが減り、互換性が保たれることで、ユーザー側もWebページを作成する側も負担が軽減されるのです。

流れは下記の通りです。

W3CがHTMLやCSSのルールを決める
そのルールに従って、ブラウザを開発する(HTMLやCSSを使えるようにする)
我々、Web制作・開発者がコーディングする
Webページをユーザーに見られる

先程、「W3CがHTMLやCSSのルールを決めて、そのルールに従ってGoogleやApple等がHTMLやCSSを開発している」と上述しましたが、現在のHTML5は、W3CがWeb開発者の要望を軽視していると不満に思っていたワットワーキンググループ(Apple、Mozilla、Operaの開発者によって結成された)によって提唱されたものをW3Cが策定したのです。

現在は、W3C側がワットワーキンググループに協力を表明している状況です。

因みに、2017年末にはMSもワットワーキンググループに参加しています。

IEが曲者な理由

SafariやFirefoxではレイアウトが崩れなかったが、IEでは崩れたという経験をした人は多いでしょう。

この理由は、歴史的背景にあります。

以前(2000年頃)のIEはブラウザ市場の約9割のシェアを握っており、且つデファクトスタンダード(事実上の標準)の風潮があったため、MSはW3Cに拡張機能の提案をせず、独自に発展する方向を選んだのです。

当初、独自発展をしたIEの機能はユーザーにとって使いやすかったのですが、その独自発展が現在になって弊害になっていることは紛れもない事実です。

結果、MSはIEをディスコンにしました。(IEサポート終了)

まとめ

製作者・開発者側は、どこまでのブラウザを業務対象とするのかしっかり決めないといけないですね。

AppleやYouTubeなど様々な大企業で、IEには現在対応はしていません。IEを業務対象とするのは、公的機関だけで良いのかもしれません。

では皆さん、ハッピーWeb制作・開発ライフを!