ホームページ制作,

【ホームページ制作】最短最速で主要なブラウザ対応する方法を解説!初心者から中級者まで

ホームページは「制作してインターネット上に公開したからそれで終わり!」、というものではありません。複数のブラウザで、問題なく、動作するように対応させる必要があります。このような複数ブラウザへの対応作業を、面倒に感じた、という方も多いのではないでしょうか。

実のところ、クロスブラウザ対応で完璧を目指すとなると、多種多様なブラウザに対応するだけでなく、未だ最新版にアップデートしていないブラウザへの対応する必要があるため、キリがありません。

そこで本記事では、「そもそもクロスブラウザ対応とは何か」というところから、最短最速でクロスブラウザに対応する具体的な方法を解説します。最後には、時短に役立つ無料のツールを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%

日本で人気のブラウザを知るPC

引用元: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%

日本で人気のブラウザを知るSP

引用元: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を使うことで、ブラウザごとの標準スタイルを削除し、極力自分でスタイルをコントロールできるようにする

クロスブラウザ対応に役立つ無料ツール3選

無料で使えて、時短・コストカットが望めるクロスブラウザ対応のためのツールをご紹介します。ブラウザ上で使えるツールがほとんどなので、気軽に試してみてください。

1.クロスブラウザテストを行うことができるWebサイト

LambdaTest: Most Powerful Cross Browser Testing Tool Online

例えば、自分はWindowsユーザーで、使用しているスマートフォンもAndroidではあるものの、Safariのクロスブラウザテストを行いたいというときに有効です。

使い方は、テストしたいサイトのURLをトップページの検索バーに入力するだけというシンプルなものです。
会員登録は必要ですが、無料で一括テストが行えるWebサイトは珍しいので、試してみて損はないです。

2.スタイルの対応ブラウザを一括にチェックできるツール

Can I use... Support tables for HTML5, CSS3, etc

これは、自分が使おうとしているスタイルを検索バーで検索すると、そのスタイルがどのブラウザに対応しているのかを一括に確認できるツールです。

明らかにブラウザによって動作が変わりそうなスタイルは、ここで調べて対応状況を確認しましょう。

3.HTML構文チェックツール

HTML整形ツール(プチ・デバッグ機能付き)

このツールの機能はシンプルで、以下のような機能があります。
こちらもブラウザ上で使うことができるので、試してみてください。
・HTMLの自動整形
・不完全なタグを発見し、対象タグの一覧を表示

まとめ

本記事では、最短最速でクロスブラウザ対応する方法について解説しました。
本記事を参考にすれば、面倒でゴールの見えないクロスブラウザ対応にも一筋の光が見えてくるのではないでしょうか。

しかし、ホームページ制作では、このようなクロスブラウザ対応の他にも、セキュリティ対策などの面倒で難しい作業も多く、ハードルが高く感じることもあるかもしれません。

そこで、弊社でもホームページ制作依頼を受け付けております。

・年間5000サイト、2000アプリ以上の制作
・コロナ禍の中で5000社以上のIT相談を実施

このような豊富な実績をもとに、ご要望に沿ったホームページを作成します。本記事で取り上げたクロスブラウザ対応だけでなく、セキュリティ対策も万全の安心安全なホームページが欲しい方は、お気軽にご相談ください。

NEW
ARCHIVE