【たったの５ステップ！】サイトをどんなブラウザにも対応させる方法

複数ブラウザへの対応で苦労したことのある方は多いでしょう。少しでも作業をスムーズにするためのワザを5つ集めましたので、ご紹介します。

 

 

 

1. 1.プレフィックスを使おう

もしbox-sizingやbackground-clipなどのCSSスニペットを使用しているのであれば、正しいベンダープレフィックスを使っているかどうかを確認しましょう。FirefoxなどのMozilla製ブラウザには-moz-、SafariやChromeなどのWebkitベースのブラウザは-webkit-、Operaは-o-、IEには-ms-を使います。

 

 

 

2. 2.リセットCSSを使おう

normalize.cssやシンプルなリセットCSSがインターネット上で多数配布されています。私はジェネシス…フレームワーク・スタイルシートからこういったものを使っています。

 

 

 

3. 3.幅を設定したパディングは避けよう

エレメントにパディングを追加する際に横幅を設定すると、本来あるべきよりもずっと大きくなってしまいます。横幅とパディングは同時に設定されるべきです。たとえば、もし横幅が100pxのエレメントがあるとして、これに10pxのパディングを追加するとブラウザの不思議な解釈によりなぜか120pxのエレメントができてしまいます。

これを防ぐためには、以下のコードを使ってください。

 

 

 

 

4. 4.floatを常に消去しよう

floatを消去するのを忘れないようにしましょう。これを忘れると挙動がおかしくなってしまいます。ブラウザ上でのfloatの動作について、詳しくはChris Coyierが解説してくれています。

floatの消去にはこのスニペットを使ってください。

 

 

エレメントをwrapしたいのであれば、次のコードが役立ちますよ。

 

 

 

 

5. 5.必ずテストしよう

テスト用の環境を作るか、Endtestなどのツールを使って必ずテストしましょう。

 

 

 

 

 

いかがでしたか？どれも簡単なワザですが、これを心がけるだけでクロスブラウザ対応での問題の95%は片付くはずです。

 

 

 

 

 

 

※本稿は 「5 Tricks to Avoid Cross Browser Issues」を翻訳・再編集したものです。