クロスブラウザ対応Webサイトの作成
POSTED in Performance by WP Engine
Last updated on May30th, 2019
ほとんどの人が単一のブラウザを使用することに固執していても、デスクトップとモバイルデバイスの両方に数十のオプションがあります。 理想的には、使用したブラウザに関係なく、webサイトは完全に表示されます。 しかし、それは必ずしもそうではなく、ブラウザ間のテストが行われる場所です。
徹底的なクロスブラウザテストを使用すると、あなたのウェブサイトがすべての一般的なオプションで完全に見え、動作することを確認できます。 そうすれば、あなたの訪問者は、彼らがChrome、Firefox、Opera、またはそのようなSeaMonkeyなどあまり知られていないオプションを使用しているかどうか、同様に素晴らしい経
この記事では、クロスブラウザテストの重要性についてもう少し説明します。 次に、ブラウザ間互換性のあるwebサイトを作成するためのいくつかの手順を説明します。 仕事に行こう！
ブラウザ間の互換性が重要なのはなぜですか？
ほとんどの人は、Google Chrome、Safari、Firefox、Operaなどのよく知られたブラウザを使用しています。 しかし、あなたが想像するよりもはるかに多くのオプションが利用可能です。 これは消費者にとっては良いことですが、あなたにとっての問題は、すべてのブラウザが異なるように構築されていることです。 つまり、あなたのウェブサイトはChromeで完全に動作するかもしれませんが、Firefoxで問題が発生する可能性があります（一例を挙げるだけです）。
私たちの経験では、あるブラウザでは表示されますが、別のブラウザでは表示されないエラーのほとんどは比較的小さな問題です。 サイトの特定の要素がそれを見ていないか、特定の機能が正しく動作しない可能性があります。 これらの問題は軽微な場合がありますが、サイトのすべての訪問者に同じ体験を提供したい場合は、対処する必要があります。
理想的には、クロスブラウザ互換性のあるウェブサイトをゼロから設計したいと思うでしょう。 そうすれば、特定のブラウザのユーザーを疎外させる危険はありません。 次のいくつかのセクションでは、それを行う方法を紹介します。
クロスブラウザ対応のウェブサイトを作成する方法
クロスブラウザ対応のウェブサイトを作成するというアイデアは難しいかもしれません。 しかし、いくつかの簡単な手順は、あなたのサイトがほとんどのブラウザで完全に動作することを保証するために長い道のりを行くことができます。 それらが何であるかについて話しましょう！
ステップ1：HTMLファイルに’Doctype’を設定する
ブラウザがウェブサイトをロードするとき、使用しているHTMLのバージョンを把握する必要があります。 HTMLの異なるバージョンには異なるルールが含まれているため、これは重要です。
‘doctype’はブラウザに指示する文です: “こんにちはこのバージョンのHTMLで私たちが発展していくために使用！”そうすれば、ブラウザは推測する必要がなくなり、ユーザーが遭遇するエラーの数が減少する可能性があります。
幸いなことに、このステップは非常に簡単です。 HTMLドキュメントに次のコードスニペットを追加するだけです:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
ご存知のように、このスニペットはHTMLのバージョン4.01用です。 代わりにHTML5を使用する場合は、次のコードを使用できます:
<!DOCTYPE html>
問題は、一部のブラウザがまだHTML5でうまく再生されないことです。 その多くの改善にもかかわらず、それを使用すると、ブラウザ間の互換性に影響を与える可能性があるので、その利点と一緒にその事実を比較検討す
ステップ2：CSSリセットルールを使用する
通常、CSSはブラウザの互換性エラーの主な原因です。 これは、各ブラウザに独自のCSSルールセットがあるためです。 別の言い方をすれば、訪問者が使用するブラウザによって、サイトのCSSのレンダリングが異なる場合があります。
この問題を解決する1つの方法は、’CSS reset’を使用することです。 これらは、ブラウザ間でCSSが動作する方法のベースラインを設定する、webサイトに追加できる一連のルールです。
CSSのリセットにはいくつかのオプションがありますが、私たちのお気に入りの一つはNormalizeと呼ばれています。cssは、それがどのように包括的であるかのために:
normalizeをダウンロードすることができます。GitHubライブラリのcssファイルを使用し、webサイトのCSSの出発点として使用します。 これにより、サイトのブラウザ間の互換性を最大限に高めることができます。
ステップ3: ブラウザ間互換のライブラリとフレームワークを使用する
JavascriptライブラリやFoundationやBootstrapなどの幅広いフレームワークは、最近非常に人気があります。 このような要素を使用してウェブサイトを構築する場合は、ブラウザ間の友好的なオプションを使用して、多くの頭痛を軽減することができます。
いくつかのライブラリやフレームワークは、できるだけ多くのブラウザで動作するようにゼロから開発されました。 一般的に言えば、最も一般的なフレームワーク–先ほど述べた二つを含む–は、できるだけ多くのブラウザと互換性があるように構築されています。
ただし、安全のために、使用するライブラリやフレームワークのドキュメントを必ず確認してください。 ほとんどの場合、ブラウザ間の互換性に関する情報を簡単に見つけることができます。 たとえば、ドキュメントのFoundationの互換性ページは次のとおりです:
少しの研究は、あなたの訪問者だけでなく、特定のブラウザを使用する人のすべてのための素晴らしい経験を提供するのに役立ちます。
クロスブラウザテスト
クロスブラウザ対応のウェブサイトを作成しようと努力したとしても、すべてが正常に動作しているかどうかを確認する そのプロセスは比較的簡単です–あなたがしなければならないのは、複数のブラウザを使用してwebサイトをロードし、エラーをチェックすることだけです。
問題は、そこに多くのブラウザがあるということです。 あなたの基盤をカバーするためには、私達は次のとおりである市場占有率に従って上の5つの選択に焦点を合わせることを推薦します:
- Google Chrome
- Safari
- Firefox
- UC Browser
- Opera
Microsoft Edgeがリストを作成しなかったことに気付くかもしれません。 その市場シェアは、これらの日はかなり小さいですが、それはあなたのサイトが同様にそれで動作することを確認するために、まだ良い習慣です。
もちろん、コンピュータに五つ、六つの異なるブラウザをインストールすることは苦痛になる可能性があります。 そのため、オンラインでクロスブラウザテストを行うことができるサービスがたくさんあります。 これにより、プロセスが大幅に簡素化され、関連する手数料は通常軽微です。
あなたのデジタル体験を犠牲にしないでください
あなたのウェブサイトの訪問者のすべてが同じブラウザを使用するわけではありません。 これは、すべてのユーザーがあなたのウェブサイトを楽しむことを確認したい場合は、いくつかのクロスブラウザテストを行う必要があることを意
ただし、すべてのブラウザでサイトが完全に動作しても、可能な限り最高のデジタル体験を提供したい場合は、最高品質のwebホストを使用する必 WP Engineを使用すると、素晴らしいパフォーマンスと専門家レベルのサポートへのアクセスを得るので、私たちの計画をチェックしてください！