Blog

なぜブラウザでサイトの見え方が変わるのか?

ブラウザによってホームページの見え方が違うというのを色々な画面を出して表現している

ウェブページを閲覧する際、同じウェブページでも見え方が変わることに気づいたことはありませんか?
見え方が変わる理由は、ブラウザ、ユーザー設定、拡張機能が関わっています。
何故それらが原因で見え方が変わるのか?わかりやすく解説します。

ブラウザとは

ブラウザとはChromeやSafari等のウェブサイトを表示させるためのツールです。ブラウザはウェブページのデータを読み込み、テキスト、画像、動画などを適切に表示しますが、使用するブラウザによってウェブサイトの見え方が少し違うことがあります。これにはいくつかの理由があります。

なぜブラウザで見え方が違うのか?

まず、ウェブサイトはブラウザがHTMLやCSS等のデータを読み取って表示されます。
ChromeやFirefox、Safari、Edgeなど、色々なブラウザがありますがそれぞれデータの読み取り方が違います。 例えば、画面をスクロールした時に右横にスクロールバーが表示されますがそのスクロールバーを画面の横幅に含めるか含めないのかが変わったりします。
スクロールバーは横幅が小さいので大して変わらないように見えますが、その小さい変化でウェブページのレイアウトが変わったりする場合もあります。
このように使用するブラウザで、HTMLやCSSの読み取り方が変わり、ウェブサイトの見え方が変わるのです。

モバイルとデスクトップの違い

モバイル(携帯のサイズ)とデスクトップ(パソコンのサイズ)では横幅が変わるため、デスクトップ用で作ったウェブページをそのままモバイルに読み込ませてしまうと非常に見えづらくなります。 その為、モバイルとデスクトップの両方の見え方と整えるためにHTMLとCSSを調整します。これをレスポンシブ対応といい、その調整の為携帯で見たときとパソコンで見た時で見え方が変わります。

ユーザー設定と拡張機能

ウェブサイトを見るとき、サイトの見え方に影響するもう一つの大切なことがあります。それは、「ユーザー設定と拡張機能」です。
これは、ウェブサイトを見る人が自分の好みや必要に合わせてブラウザをカスタマイズすることで、ウェブサイトの見え方が大きく変わることがあります。

ユーザー設定による影響

文字の大きさを変えたり、特定のフォントを使うように設定したりすることができます。
ユーザーが見えやすいように設定の変更ができる為、ウェブサイトの見え方が変わることがあります。
なので同じ種類の携帯で、同じブラウザからウェブサイトを見たとしてもどちらかがユーザー設定をしていたら見え方が変わる場合があります。

拡張機能による影響

広告をブロックするツールや、ブラウザの見た目を変えるテーマなど、いろいろな拡張機能があります。
大体が外部の事業者が開発したものです。これらを使うと、ウェブサイトが元のデザインとは違う形で表示されることがあります。例えば、広告ブロッカーを使うと広告がなくなりページのレイアウトが変わることがあります。

ユーザー設定と拡張機能はとても便利ですが、ウェブサイトが予想外の方法で表示される原因にもなります。
ウェブページを見えやすくするように、便利にする為に機能を追加したのに見づらくなると本末転倒です。ウェブページのデザインが崩れていて見づらい場合、大抵はウェブページを作った側のCSSのコードが悪いことが原因ですが拡張機能やユーザー設定を変更したことが原因の場合もあるので気をつけていきましょう。

いかがだったでしょうか?
この記事の作成者であるふーぺでは、ホームページの作成を無料でおこなっております
ホームページを作ってほしい方や管理してほしい方がいましたら是非下のリンクからアクセスお願いします。