【初心者向け】ブラウザによるCSSの違いについてまとめ

こんにちは！今回は初心者WEBデザイナー必見！
コーディングをする際に気をつけなくてはいけない「ブラウザ」ごとの違いについてです。

みなさんはサイトを作成する際になんのブラウザを使用していますか？
また、閲覧する際にどのブラウザを使用していますか？

自分がchromeを使うからchromeだけ確認してOKしてしまう。
そんなうっかり経験も一度はしたことあるのではないでしょうか。

僕はGoogle大先生の『chrome』様にお世話になっております（プラグインが神機能すぎる）
おそらくこの記事を見ているあなたもChromeなのではないでしょうか。（違ったらすいません）
こんなでたらめな推測でも当たるくらい使用しているユーザーが多いのです。

ブラウザの種類ってどれくらいあるの？

● Google Chrome（グーグルクローム）
● Safari（サファリ）
● Microsoft Edge（マイクロソフトエッジ）
● Internet Explorer（インターネットエクスプローラー）
● Firefox（ファイヤーフォックス）

ざっと上げるとこれくらい。
細かいところをいうときりがないので、有名どころだけ。

ブラウザの説明も省きます！
これまたややこしくなるので…（興味のある方はググりましょう）

シェア数でいうと（2019年7月調べ）

順位	ブラウザ	シェア
1位	Chrome	59.79%
2位	IE	13.72%
3位	Firefox	8.13%
4位	Safari	8.69%%
5位	Edge	7.81%
6位	Opera	0.68%
7位	QQ Browser	0.21%
8位	Vivaldi	0.18%
9位	Sleipnir	0.16%
5位	その他	0.63%

圧倒的Chromeの強さっ！！！
これならChromeだけを考えてサイトを作ればいいんじゃね？

実はIEシェア数もまだあるのに驚きです。
Windowsユーザーにとっては初期ブラウザとして未だ人気なのですね。

なぜブラウザによってデザインが変わってしまうのか

簡単に言うと作る人が違うから！
基本的なベースは同じですが、会社によって味付けされ、独自のブラウザにしているのです。

今思うといろんな会社があるから違うのは当たり前かもしれません。

技術的なことを言うと「レンダリングエンジン」が違います。
「レンダリングエンジン」とはプログラムを認識する頭脳のことで、これが各社違うため微妙な違いがでるそう。

とにかくサイトを作成する際には「ブラウザごとで違いが出てくる」ということを覚えておきましょう！

ブラウザごとにCSSで設定する方法

デフォルトで変わってしまうCSSをブラウザごとに設定し直す方法です。

Chromeのみ

@media screen and (-webkit-min-device-pixel-ratio:0){
body {
background-color: #fff;
}
}

Firefoxのみ

@-moz-document url-prefix(){
body {
background-color: #fff;
}
}

IE10のみ

@media all and (-ms-high-contrast:none) {
body {
background-color: #fff;
}
}

IE11のみ

_:-ms-lang(x)::-ms-backdrop, body {
background-color: #fff;
}

Edgeのみ

@supports (-ms-ime-align:auto) {
body {
background-color: #fff;
}
}

Safariのみ

@media screen and (-webkit-min-device-pixel-ratio:0) {
_::-webkit-full-page-media, _:future, :root body {
background-color: #fff;
}
}

まとめ

こんなにもブラウザがあるときりがないですよね。
確認するためにはブラウザをダウンロードしないといけないし、かなり手間。
なのでシェア数の多いChromeとIEとFirefoxは確認しているようにしています。
年々減少傾向にあるIEもそろそろ切りたいところです。
WEBの流行はすぐに変わりますので、Chromeが下火になる日もいずれは…
日々情報収集をして、環境に対応していく柔軟力も必須ですね！（いまさら何を言うか）
ではまた！

前の記事(PREV)