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

クロスブラウザとは

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

1. Firefoxなどの標準準拠のブラウザに合わせてコーディングをする。
始めに基準のブラウザを決めます。シェアが高く標準準拠したブラウザということでFirefoxがいいでしょう。
基本はFirefoxで見れるように作り、その他のブラウザとの表示の違いが出てしまった場合のみ、CSSハック・条件付コメントを使い、その差をなくします。と言っても表示に差がでるのは、ほとんどIEだけですが。
2. DTD、文字コード、ブラウザの表示モードを統一する。
そのサイトごとに必ず統一しましょう。特に表示モードは顕著に違いが現れるので注意が必要です。また、WinIE6.0ではXML宣言をすると後方互換モードになるバグがあるので注意しましょう。
3. ブラウザのデフォルトスタイルシートを無効化する。
各ブラウザは独自スタイルを持っていて、それが原因で表示に違いが出てくることがあります。
そのため、全称セレクタなどを使用して margin や padding は 0 にしておきましょう。
4. CSSハック、IE条件付コメントの使い方を理解する
各ブラウザで表示の違いがあるため、その違いを解消するためにCSSハックやIE条件付コメントを理解しておきましょう。
5. 子孫要素に float の解除に clearfix を使う。

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

CSSハック これだけ覚えておけば大丈夫

CSSハックとは

ブラウザごとにスタイルシートの実装が違うことやバグを利用し、特定のブラウザにのみスタイルを指定する手法のことです。

CSSハックの書式

一言にCSSハックと言っても多数あり、それぞれ書式が違います。
しかし、これだけ覚えておけば大丈夫というものを以下にまとめました。

※対象のブラウザは、Win IE5～7、Mac IE5.2、Firefox、Safari、Operaです

◇Win IE5～6、MacIE 5.2
* html スタイル名 {
　　　スタイルプロパティ
}
◇Mac IE5.2
スタイル名 {
　　　/*\*//*/
　　　スタイルプロパティ
　　　/**/
}
◇Win IE7
*+html スタイル名 {
　　　スタイルプロパティ
}

続きを読む "CSSハック これだけ覚えておけば大丈夫"

IE条件付コメントまとめ

条件付コメントとはIEの独自仕様でそのコメントで囲われた部分の表示・非表示をバージョンによって分けることができるというものです。
例えば、IE用のCSSを別に用意した場合に、そのCSSを読み込む際に使われたりします。

IE条件付コメントの書式

条件付コメントの書式は、指定のバージョン・指定のバージョン以上・指定のバージョン未満に分かれます。

指定のバージョン
<!--[if IE 6.0]>内容<![endif]-->
指定のバージョン以上
<!--[if gte IE 6.0]>内容<![endif]-->
指定のバージョン未満
<!--[if lt IE 6.0]>内容<![endif]-->

6.0 というのがバージョンの指定です。ここの数字を変更することで、対象のブラウザを決めることができます。

続きを読む "IE条件付コメントまとめ"

スタイルプロパティの記述順番ガイドライン

スタイルプロパティの記述順番にもガイドラインを作ることで、コードが更に読みやすくなります。

記述順番ガイドライン

要素の大きさ・領域・装飾に関するプロパティ

  1. margin
  2. padding
  3. width
  4. min-width
  5. max-width
  6. height
  7. min-height
  8. max-height
  9. background-color
  10. background-image
  11. background-repeat
  12. background-position
  13. border-width
  14. border-style
  15. border-color
  16. outline-width
  17. outline-style
  18. outline-color
  19. list-style-type
  20. list-style-image
  21. list-style-position
  22. display
  23. visibility
  24. overflow
  25. clip

続きを読む "スタイルプロパティの記述順番ガイドライン"

ブラウザ デフォルトスタイルのリセット

コーディングの難しいところとして良く挙げられるものが、複数ブラウザへの対応です。

一口にブラウザと言ってもMicrosoftのInternet Explorer、AppleのSafari、MozillaのFirefoxなど様々なものがあり、そのブラウザごとに表示のされかたが異なってしまっているのが現状です。

その原因の一つとして各ブラウザにデフォルトスタイル（スタイルシート）が設定されているということが挙げられます。
例えば、H1タグで文章をマークアップした際に文字が大きく・太字になるのは、このデフォルトスタイルが設定されているためです。

このデフォルトスタイルをリセットすることで複数ブラウザへの対応が楽になります。

まず、もっとも簡単なものとしてユニバーサルセレクタ（* {style property}）を使用する方法があります。

続きを読む "ブラウザ デフォルトスタイルのリセット"

 1  |  2  |  3  |  4  |  5  |  6  | All pages