ご存知の通り、この世の中にはたくさんのブラウザがあります。
たくさんブラウザがあるのですが、同じHTMLやCSSでもブラウザによって表示のされ方が違うこともあり、悩みの種のいつになっていますよね。
特に自分でサイトをデザインしている人なんかは。
最近ではブラウザの進化も目覚ましく、新しいCSSタグの対応率も上がってきていますし、以前のようにベンダープレフィックスをずらずら記述する必要もなくなってきました。
しかし、現段階ではまだ安心できず、油断すると「○○だけブラウザで崩れている！」なんてことも起こるかも知れません。
そこで、各ブラウザでの表示を一括で確認する無料サービスを紹介します。
「○○ブラウザでは○○する」と覚えるのもいいですが、実際に見て確認できれば間違いないですからね。
Microsoft Edge DevelopmentのBrowser screenshots
今回紹介するのはMicrosoft Edge DevelopmentのBrowser screenshotsです。
https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/
使い方はとても簡単です。
- 中央の検索窓にURLを入力する
- その状態でエンターキーを押すか横の虫眼鏡をクリックする
解説するほどでもないのですが、「Enter a URL」という検索窓にブラウザの表示チェックをしたいサイトのURLを入れて、虫眼鏡ボタンをクリックするだけです。
結果がすべて表示されるまでは数分かかりますので気長に待ってください。
このサービスはGoogleクロームのアドオンにもなっていました。
Multi-browser Screenshots
アドオンをGoogleクロームに追加して有効化すると調べたいサイトを表示している状態から1クリックでチェックできるようになります。
1クリックで、IE, Edgeをはじめ、さまざまなブラウザ・スマホなどの表示確認ができるChromeの便利な機能拡張
Noindexにしているサイトもチェックできます
Microsoft Edge DevelopmentのBrowser screenshotsは検索エンジンに表示されないように
- ・メタタグでnoindexにしているサイト
- ・robots.txtでブロックしているサイト
でも確認できます。
インデックスされないようにする施策は、デザインを組む初期段階のテストサイトなんかではよくやっていると思います。
ブラウザ表示チェックサービスは他にもありますが、中にはrobots.txtでブロックしているとチェックできないサービスもありました。
Microsoft Edge DevelopmentのBrowser screenshotsならそんなことはないので使い勝手はいいですね。
良いところ・悪いところ
まず良いところは、以下が挙げられます。
- 手軽
- robots.txtでブロックしていてもOK
次に悪いところは以下です。
- チェックできるブラウザの種類が少ない
- チェックに数分かかる
といったところですね。
悪いところもありますが、とにかく手軽なのがポイントです。
Googleクロームのアドオンを追加すれば1クリックで確認できてしまうというのはやはり便利です。
デザイン中に「この書き方で大丈夫かな～」なんて時にポチっとするといいと思います。
Microsoft Edge DevelopmentのBrowser screenshotsを知るきっかけ
それはテーマを利用している海外の方からの1通のメールで、
windows10の最新版ブラウザでヘッダースライダーがちゃんと動いていないけど把握してるの？
という内容のものでした。
過去のブラウザチェックをするのは当たり前のようですが、まさか最新版のブラウザで崩れるとは・・・
完全に盲点でした。
具体的にはEdge17です。
最新版のブラウザもチェックする方法を探していた時に見つけたのが「BrowserStack」でした。
https://www.browserstack.com/
そして、その過程で見つけたのがMicrosoft Edge DevelopmentのBrowser screenshotsという分けです。
BrowserStackも結構便利でした
BrowserStackは基本有料のようですが、フリートライアルがあります。
フリートライアルは確認できるブラウザ数を制限した状態で30分だけ使用できるというものです。
上の画像は私が使用している時の残り8分の状態のものです。
対応ブラウザも確認できますが、主要なブラウザには対応しているのでお試しするには十分でした。
私のように最新版のEdge崩れでハマった方はぜひ。
あとがき
Microsoft Edge DevelopmentのBrowser screenshotsはとにかく手軽にブラウザの表示チェックができます。
もちろん無料で。
利用回数などの制限もありません。（たぶん・・・）
各ブラウザの表示を確認する方法を探すといろいろなツールやサービスが出てきますが、Microsoft Edge Developmentのチェックツールは紹介されていなかったんですよね。
まだ認知度が低いか、そもそも「使えねー！」と思って紹介されていないのかのどちらかだと思いますが、私は便利だと思ったので記事にしてみました。
ブラウザが統一される時代が来れば、ひと手間もふた手間も減るのになぁ。
コメントを残す