無料のブラウザチェックツール

Ａというブラウザではキレイに表示されているのに、Ｂというブラウザで見るとレイアウトが崩れている……。
パソコンとスマホでは見え方が違うけど、いちいち確認するのが面倒……。
そんな人向けに、サイトの表示確認について書いています。

表示が違う理由

ウェブページはHTMLやCSSなどで構成されていますが、ブラウザによって解釈の仕方が微妙に違います。
同じ記述でも、Ａというブラウザでは内側にスペースを取り、Ｂというブラウザでは外側に取るみたいな感じに……。
中には、そのブラウザ独自のタグがあったり、対応していないタグがあったります。
なので、ブラウザによって表示が違うわけです。

そもそも、HTMLやCSSは変化していますので、古いブラウザでは新しい記述が対象外。だからといって、十年以上も前のブラウザのバージョンまで対象にするのは、費用対効果の面から言ってオススメできません。

新たに追加された記述方法を使えば、以前より楽にデザインできるのに使わない。
古い要素のままでは、デザイン的にも古くなってしまう。
今では推奨されていない記述方法では、サイトの評価を下げる結果になってしまうなど、古いブラウザを対象にするデメリットは少なくありません。

とはいえ、この辺は自分で一から組み立てる人向けの話になるでしょう。
既に用意されたテンプレートを使うのであれば、その時点で対象とするブラウザも決まってくるでしょうし、このページを見ているのはテンプレートを利用する人だと想定して続けます。

ブラウザのシェア

画像は、私が運営する他サイトのデータになります。
Google Analytics の「ユーザー」＞「テクノロジー」＞「ブラウザとＯＳ」という項目のものです。先月のデータですが、サイト訪問者の多くが「Safari」を使っているのがわかります。
テキストリンクになっている「Safari」の文字をクリックすると、ブラウザのバージョンを確認できます。「11.0」が7割ということで、「ITP」が気になるところですが、その辺の説明は後述。

「ユーザー」＞「モバイル」＞「概要」及び「デバイス」を見ると、スマホで見ている人が7割もいるのがわかります。さらに、モバイル端末では「Apple iPhone」が6割以上のシェアを誇っていますので、訪問者の多くは「iPhone」の「Safari」を使っていると想像できます。

これは私のサイトの話なので、国内シェアではありません。
国内シェアは検索すると出てきますが、大事なのは自分のサイトに来る人のこと。
サイトの内容によって、訪問者の閲覧環境が大きく変わるからです。

例えば、私のサイトの中には「Safari」より「Chrome」のユーザーが多いサイトもあります。
先のサイトは7割の人がスマホでの閲覧でしたが、そのサイトはパソコンが半数を占めていることも大きいでしょう。というのも、パソコン用ゲームを取り扱っているサイトなので、利用者はパソコンを持っていると考えるのが妥当。パソコンを持っていない人が、パソコン用ゲームの攻略サイトに興味を持つとは思えないので……。

そんな感じに、サイトごとに利用者のシェアは異なるので、チェックの際に重要視するブラウザも違います。
でもまぁ、Chrome、Safariでの確認はした方がよさそうです。
余裕があるなら、FirefoxやEdgeも見ておきたいところ。

「Blisk」というブラウザが便利という話も聞きますが。

バージョンの違いに関しては厄介ですが、「BROWSER SHOTS」のようなサイトもあります。
こちらはURLを打ち込むだけで、バージョン単位で確認できますが、確か無料での使用は一日の量が決まっていたはず。
日本語のサイトではないですし、個人的には最新バージョンで確認するくらいでいいと思っているので、あまり使ったことは無いです。「Spoon Browser Sandbox」に関しても同様。

パソコン上でスマホ画面を確認

先の画像にもありましたが、基本的にはスマホでサイトを見ている人の方が、パソコンで見る人よりも多いです。
サイトの作成作業はパソコン上で行っているので、ついついパソコンでの見え方を基準にしがち。わざわざスマホで見るのも面倒……。
そんな人向けに、手っ取り早い方法を書きます。

画像は「Firefox」で当サイトを表示したときのものですが、幅を狭めればスマホやタブレットで見たときと同じように表示されます。
ただし、これは当サイトがブラウザの幅に応じて変化するようになっているからであって、端末の画面サイズを取得して変化するような方法では、表示が切り替わらないまま幅が狭くなってしまいます。
つまりは、メディアクエリによる表示変更には使えないということ。

メディアクエリというのは、CSSの中で「@media screen and (max-width: 768px) 」といった記述をすることで、端末の幅が768px以内なら表示を切り替えるもの。
HTMLでCSSを読み込む際に使うLinkタグで「media="screen and (min-device-width:481px)"」といった感じで書くのも同様です。

パソコン上で こういった記述に対応するには、サイトやツールを利用することになります。
簡単なのは、ブラウザの機能としてい付いているデベロッパーツールでしょうか。

Google Chrome の場合、画像のように「・・・」マークの「設定」から、「その他のツール」にある「デベロッパーツール」を選べば使えます。

画像の矢印が示すマークを押せば、スマホ用の画面と、パソコン用の画面が切り替わります。

Firefox の場合なら、「メニュー」の「ウェブ開発」から、「レスポンシブデザインモード」を選べば、パソコンでスマホ用画面が表示されます。

次に、ブラウザに付属している機能以外の方法を簡単に書きます。
「quirktools.com」の「Screenfly」なら、URLを入れて端末を選ぶだけで、表示が切り替わります。ただ、英語のサイトなので私は使っていません。
日本語となると、「FireMobileSimulator」を使用することになるでしょうか。

「Chrome ウェブストア」に行き、「FireMobileSimulator」で検索すると「FireMobileSimulator for Google Chrome」が表示されるので、「CHROMEに追加」ボタンを押せば、Chromeで閲覧時に切り替えられるようになります。

もちろん、こういったツールは疑似的なものなので、実機で表示させたときには細かな違いが出ることもあるでしょう。

中身の確認

表示の違いについて書いてきましたが、HTMLやCSSを編集するならソースもチェックしておきたいところ。
推奨されていない記述よりも、推奨されている記述の方がいいでしょうし、その方がサイトの表示速度も早くなるかもしれません。

何より、誤った記述が原因でデザインが崩れることもあります。
なので、HTMLのひな型を作ったら記述ミスが無いか確かめたいところ。とはいえ、自分が書いたものはミスを見逃しがち。そこで、「Unicorn - W3C 統合検証サービス」を使います。

URLを入れてチェックすれば、そのページの記述で直した方がいい点が表示されます。
中には、「ちょっと……」と思う指摘もありますが、カラーコードの＃が抜けているとか、そういったケアレスミス的な記述を拾ってくれるので、ページを量産する前に確認しておきましょう。