低価格・高品質・最速のHTMLコーディングはクロノドライブへ

クロスブラウザ対応のために抑えておきたい5つのこと

クロスブラウザとは

ここでいうクロスブラウザとは、複数のブラウザでちゃんと見れるようにHTMLコーディングすることです。

1. GoogleChromeなどの標準準拠のブラウザに合わせてコーディングをする。

始めに基準のブラウザを決めます。シェアが高く標準準拠したブラウザということでChromeがいいでしょう。
基本はChromeで見れるように作り、その他のブラウザとの表示の違いが出てしまった場合のみ、CSSハック・条件付コメントを使い、その差をなくします。と言っても表示に差がでるのは、ほとんどIEだけですが。

2. DTD、文字コード、ブラウザの表示モードを統一する。

そのサイトごとに必ず統一しましょう。特に表示モードは顕著に違いが現れるので注意が必要です。また、WinIE6.0ではXML宣言をすると後方互換モードになるバグがあるので注意しましょう。

3. ブラウザのデフォルトスタイルシートを無効化する。

各ブラウザは独自スタイルを持っていて、それが原因で表示に違いが出てくることがあります。
そのため、全称セレクタなどを使用して margin や paping は 0 にしておきましょう。

4. CSSハック、IE条件付コメントの使い方を理解する

各ブラウザで表示の違いがあるため、その違いを解消するためにCSSハックIE条件付コメントを理解しておきましょう。

5. 子孫要素に float の解除に clearfix を使う。

これらを指定しないと、親要素の背景が表示されなかったり、直後の要素との余白などがおかしくなったりします。
clearfixについて詳しくはこちら

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ