ホームページは「制作してインターネット上に公開したからそれで終わり！」、というものではありません。複数のブラウザで、問題なく、動作するように対応させる必要があります。このような複数ブラウザへの対応作業を、面倒に感じた、という方も多いのではないでしょうか。
実のところ、クロスブラウザ対応で完璧を目指すとなると、多種多様なブラウザに対応するだけでなく、未だ最新版にアップデートしていないブラウザへの対応する必要があるため、キリがありません。
そこで本記事では、「そもそもクロスブラウザ対応とは何か」というところから、最短最速でクロスブラウザに対応する具体的な方法を解説します。最後には、時短に役立つ無料のツールを3つに厳選してご紹介するので、自分のコストと時間を最大限に短縮できる方法をこの機会に身につけましょう。
大前提として、クロスブラウザ対応について解説します。
皆さんはブラウザと聞いて、何を思い浮かべるでしょうか。
・Chrome(以下、Chromeと表記)
・Edge(以下、Edgeと表記)
・Internet Explorer(以下、IEと表記)
・Firefox
・Safari
など、現代では様々なブラウザが存在します。
これらのブラウザによっては、HTML, CSS, Javascriptの表示結果が若干異なるため、ホームページもブラウザによっては思いも寄らない動作をします。
また、気をつけなくてはいけないのが、ブラウザ毎に異なるだけではなく、ブラウザのバージョンによっても動作がおかしくなることがあります。
このような、ブラウザの違いによる思いも寄らない動作が起こらないように、Webサイトを構築することをクロスブラウザ対応と言います。
ここからは、具体的にクロスブラウザ対応を最短最速で行うための具体的な方法を解説していきます。
クロスブラウザ対応は、もちろん完璧に越したことはないですが、完璧にやるコストは非常に大きいにも関わらず、メリットはそのコストに見合うほど大きくないです。この点についても、詳しく解説します。
まず最初に考えるべきは、対応範囲を決めるということです。
どれほど完璧にクロスブラウザ対応したとしても、ブラウザが最新版にアップデートした時に、仕様が変わってバグが生じる可能性もありますし、新しいブラウザが出てきたらそのブラウザにも改めて対応する必要があります。
そのため、事前にどこまでクロスブラウザ対応をするかを決めておいて、必要以上にコストや時間をかけすぎないようにすることが大切です。
対応範囲を決める上で重要になってくることの一つが、人気のブラウザを知ることです。
日本のブラウザの人気ランキングは以下の通りです。
[PC版ブラウザ]
・Chrome 62.51%
・Edge 15.84%
・Safari 7.73%
・Firefox 6.59%
・IE 4.94%
・360 Safe 0.76%
引用元：https://gs.statcounter.com/browser-market-share/desktop/japan/#monthly-202008-202108-bar
[スマートフォン版ブラウザ]
・Safari 61.96%
・Chrome 32.66%
・Samsung Internet 2.4%
・UC Browser 0.83%
・Firefox 0.67%
・Android 0.65%
引用元：https://gs.statcounter.com/browser-market-share/mobile/japan/#monthly-202008-202108-bar
以上の結果から分かる通り、PC版では
・Chrome
・Edge
・Safari
・Firefox
・IE
上記5つに対応できたら約98%ほどのブラウザに対応できたことになります。
ただし、IEは2022年6月16 日（日本時間）にサポートが終了するため、クロスブラウザ対応の範囲を決定する際には、考慮に入れておく必要があります。
スマートフォン版に至っては、
・Safari
・Chrome
上記2つに対応するだけで約95%のブラウザに対応できたことになります。
日本のスマートフォンのシェア率は、iPhoneがAndroidを大きく上回っているため、iOSのデフォルトブラウザであるSafariがChromeを圧倒している結果になりました。
対応範囲を決める上で重要になってくることの二つ目が、ホームページを利用するユーザーについて考えることです。
その理由は、人気のブラウザと組み合わせて考えることで、対応範囲を絞ることができるからです。
例えば、Macのデスクトップアプリを紹介するホームページであれば、Macユーザーのみが閲覧できればいいので、Windowsの標準ブラウザであるEdgeに対応する必要はありません。
iPhoneユーザー向けのホームページであれば、最低限、Safariの対応をするだけでもほとんど問題は出ないでしょう。
このように、ターゲットとするユーザー層によっては全く対応する必要のないブラウザもあるので、しっかり押さえておきましょう。
以下のように、基本的なコードの書き方を気を付けるだけで、UI・デザイン崩れやJavascriptのバグを減らすことができます。
・HTMLの構文ミスをなくす
・ブラウザによってコードが変わる場合は、変数名や関数名に各ブラウザを表すプレフィックスをつける
例）chromeでのみ使う変数の場合、chrome_hoge = ‘fuga’のように記述する
・リセットCSSを使うことで、ブラウザごとの標準スタイルを削除し、極力自分でスタイルをコントロールできるようにする
無料で使えて、時短・コストカットが望めるクロスブラウザ対応のためのツールをご紹介します。ブラウザ上で使えるツールがほとんどなので、気軽に試してみてください。
LambdaTest: Most Powerful Cross Browser Testing Tool Online
例えば、自分はWindowsユーザーで、使用しているスマートフォンもAndroidではあるものの、Safariのクロスブラウザテストを行いたいというときに有効です。
使い方は、テストしたいサイトのURLをトップページの検索バーに入力するだけというシンプルなものです。
会員登録は必要ですが、無料で一括テストが行えるWebサイトは珍しいので、試してみて損はないです。
Can I use... Support tables for HTML5, CSS3, etc
これは、自分が使おうとしているスタイルを検索バーで検索すると、そのスタイルがどのブラウザに対応しているのかを一括に確認できるツールです。
明らかにブラウザによって動作が変わりそうなスタイルは、ここで調べて対応状況を確認しましょう。
ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）
このツールの機能はシンプルで、以下のような機能があります。
こちらもブラウザ上で使うことができるので、試してみてください。
・HTMLの自動整形
・不完全なタグを発見し、対象タグの一覧を表示
本記事では、最短最速でクロスブラウザ対応する方法について解説しました。
本記事を参考にすれば、面倒でゴールの見えないクロスブラウザ対応にも一筋の光が見えてくるのではないでしょうか。
しかし、ホームページ制作では、このようなクロスブラウザ対応の他にも、セキュリティ対策などの面倒で難しい作業も多く、ハードルが高く感じることもあるかもしれません。
そこで、弊社でもホームページ制作依頼を受け付けております。
・年間5000サイト、2000アプリ以上の制作
・コロナ禍の中で5000社以上のIT相談を実施
このような豊富な実績をもとに、ご要望に沿ったホームページを作成します。本記事で取り上げたクロスブラウザ対応だけでなく、セキュリティ対策も万全の安心安全なホームページが欲しい方は、お気軽にご相談ください。
初心者向けホームページ制作の手順と無料ツールの活用法を紹介します。私自身が初めて作成した経験からアドバイスを共有します。難しく感じるかもしれませんが、この記事を参考にすれば誰でも簡単に素敵なホームページが作れます。手を動かして、魅力的なホームページを作りましょう！
こちらのホームページは、株式会社アシストにより監修されています。同社は累計ホームページ制作数80,000社、MEO対策5,000社という豊富な実績を持ち、SEO検定やWEB解析士などの有資格者が多数在籍しています。そのため、ご覧いただいている本ホームページの内容には安心してご覧いただけます。ご不明点はお気軽にお問い合わせ下さい。
代理店募集
取材申込み
商品資料
電話番号