無料相談・お問い合わせ
ブログを移転しました。
移転先 札幌のホームページ制作・Wordpressのハルリのブログ
Haluri Blog

マルチブラウザに対応したコーディング

2012年 4月13日  ホームページ制作

今回はホームページを作成するプロなら、最低限身に付けておかなければならないスキルであるマルチブラウザ対応について書きたいと思います。

マルチブラウザ対応とは、どのブラウザ(インターネットエクスプローラーやFirefoxなど)でも、ホームページやアプリケーションが、同じ表示・動作をできるようにすることです。

「そんなの当たり前じゃないか?」と思われる方もいらっしゃるかもしれませんが、ブラウザによって解釈が異なり、Aというブラウザで正しく表示されてもBというブラウザで同じように表示されるとは限らないのです。

ですから、どのブラウザでも正しく表示されるようなコーディングを行う必要があります。

マルチブラウザに対応したコーディングを行うには、3つのことに気を付ける必要があります。

W3Cに準拠したコーディング

マルチブラウザ対応の前にコーディングの基本中の基本ですが、これができていない方をあまりにも多く見かけます。 

プロの中でも完全に準拠して作れるのは、たぶん10%もいないでしょう。

W3C準拠のコーディングは基本中の基本ですので、面倒臭がらずに正しくコーディングできるようにしましょう。

IEバグへの対応

IE(インターネットエクスプローラー)独特の解釈があるため、その他のブラウザで正しく表示されているからといって油断はできません。

IE独自の解釈のことを一般的に「IEバグ」と呼ばれています。IEはシェアが高いので、しっかり対応しましょう。

具体的には、widthとpadding・borderの解釈やfloatした方向と同じ方向にmarginを設定した場合にバグ(IE独自の解釈)があります。

IEハックという方法でバグを回避する方法もありますが、裏技的な方法なのであまりおすすめいたしません。

入れ子をして、CSSの設定を分けることで対応できますので、そちらの方法をおすすめいたします。

■悪い例(widthとpadding)
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から使えるようになったタグを使うのは現時点では避けるようにしましょう。

 

以上がマルチブラウザに対応したコーディングで気を付けることです。

詳しい方法につきましては、検索すればたくさん出てきますので、問題にぶつかったら検索してみてください。

ホームページ作成のハルリでは、どの作成プランでもマルチブラウザ対応をしておりますので、安心してお申し込みください。

  • このエントリーをはてなブックマークに追加


Facebookページにご参加ください

ホームページの作成やSEO対策、Wordpress、WEBマーケティングなど、様々なタメになる情報を配信しています。Facebookページへの参加は下の『いいね!』ボタンをクリックしてください。

関連記事

人気記事

コメント

お名前

コメント本文


pagetop