マルチブラウザに対応したコーディング
今回はホームページを作成するプロなら、最低限身に付けておかなければならないスキルであるマルチブラウザ対応について書きたいと思います。
マルチブラウザ対応とは、どのブラウザ(インターネットエクスプローラーやFirefoxなど)でも、ホームページやアプリケーションが、同じ表示・動作をできるようにすることです。
「そんなの当たり前じゃないか?」と思われる方もいらっしゃるかもしれませんが、ブラウザによって解釈が異なり、Aというブラウザで正しく表示されてもBというブラウザで同じように表示されるとは限らないのです。
ですから、どのブラウザでも正しく表示されるようなコーディングを行う必要があります。
マルチブラウザに対応したコーディングを行うには、3つのことに気を付ける必要があります。
W3Cに準拠したコーディング
マルチブラウザ対応の前にコーディングの基本中の基本ですが、これができていない方をあまりにも多く見かけます。
プロの中でも完全に準拠して作れるのは、たぶん10%もいないでしょう。
W3C準拠のコーディングは基本中の基本ですので、面倒臭がらずに正しくコーディングできるようにしましょう。
IEバグへの対応
IE(インターネットエクスプローラー)独特の解釈があるため、その他のブラウザで正しく表示されているからといって油断はできません。
IE独自の解釈のことを一般的に「IEバグ」と呼ばれています。IEはシェアが高いので、しっかり対応しましょう。
具体的には、widthとpadding・borderの解釈やfloatした方向と同じ方向にmarginを設定した場合にバグ(IE独自の解釈)があります。
IEハックという方法でバグを回避する方法もありますが、裏技的な方法なのであまりおすすめいたしません。
入れ子をして、CSSの設定を分けることで対応できますので、そちらの方法をおすすめいたします。
HTML
<div>あいうえお</div>
CSS
.sample{
width:100px;
padding:10px;
}
※この場合、IEでは幅が100pxになりますが、他のブラウザでは幅が120pxになります。
■良い例(widthとpadding)
HTML
<div>
<div>あいうえお</div>
</div>
CSS
.sample{
width:100px;
}
.sample-inner{
padding:10px;
}
※このように入れ子をして、widthとpaddingを分けることで、横幅を100pxに統一することができます。
対応していないタグの確認
W3Cですでに廃止されたタグでも対応しているブラウザはありますが、今後のアップデートで対応されなくなる可能性があります。
例えば、centerタグは廃止になってからしばらく経っていますが、とあるASP(アフィリエイトプログラムではなく、アプリケーションサービスプロバイダの方です)が、デフォルトの状態でcenterタグを使ったテンプレートを配布していますが、ある日突然レイアウトが崩れる日が来るかもしれませんので、廃止されているタグは使わないようにしましょう。
また、現在ではWindowsXPユーザーも多く、XPはIE8までしか対応しておらず、IE8ではHTML5.0に対応していないため、HTML5.0から使えるようになったタグを使うのは現時点では避けるようにしましょう。
以上がマルチブラウザに対応したコーディングで気を付けることです。
詳しい方法につきましては、検索すればたくさん出てきますので、問題にぶつかったら検索してみてください。
ホームページ作成のハルリでは、どの作成プランでもマルチブラウザ対応をしておりますので、安心してお申し込みください。