下準備:ブラウザチェック
- トモ・リーン
- CSSのチェックに絶対必要なWebブラウザの紹介よ。
- ケンジ
- 俺は職業コーダーだから世界シェア1位のIE6でまずは確認してるぜ!
Internet Explorer 6は世界でもっとも普及しているOS、WindowsのデフォルトWebブラウザです。また、Webブラウザを変更できることを知らない方も多いようです。
- トモ・リーン
- 残念~!
CSS組みじゃなかったらそれで正解でした~~!
- ケンジ
- えぇえええ~~~~。
じゃあ、まちがってんの??
- トモ・リーン
- IE6は確かに普及率が高いけど、実は2001年に出た古いブラウザでCSSの対応にバグが多いのよ。
だから始めにIE6で組むとバグでうまく組めないし、バグ対応をして組めたとしても他のブラウザでズレまくるのよ。
- ケンジ
- それが俺の残業の原因か!!
- トモ・リーン
- そんなわけでオススメのWebブラウザチェックの方法の紹介よ~!
- まずはFirefoxでチェック
Firefoxの日本でのシェアは控えめですが、ものすごい便利なブラウザです。
新しいブラウザの分類のモダンブラウザと言われるもので、CSSの対応がかなり正確です。
「モダンブラウザ」はFirefoxだけじゃなく、Safari、Operaなども含まれますが、Firefoxではじめにチェックすることをオススメする理由は「デバック用の機能拡張が豊富」と言うことです。その機能拡張は後日、別エントリで紹介します。 - Firefoxでキチンと表示されたらInternet Explorer 6でチェック
たぶん、ところどころおかしく見えるとおもいます・・・(泣)
そのまま修正すると、正しく表示するブラウザでおかしな表示になるのでCSSハックやブラウザごとに別のCSSファイルを読ませるなどの対応をします。
CSSハックなどについては後日、別エントリで紹介します。(待ちきれない人は「CSSハック」でググってください。いっぱい出てきます) - 最後に他のモダンブラウザでチェック
safari(今のところはMac版のみのチェックでよさそうです)やOperaなどで表示を確認します。大体きちんと表示されますが、ダメな場合はIE6での調整の影響が響いている可能性もあるのでFirefoxでもう一度確認後 Firefoxで正しく表示された場合、各ブラウザ対応のCSSハックを使用します。
- トモ・リーン
- ハックだらけのCSSは複雑で管理がしにくくなるけど、
- きちんとしたCSSを書く
- そのうち各ブラウザでの表示差異の少ないCSSの書き方を体が覚える
- ケンジ
- ふぇ~!("体が覚える"って体育会系だよ~~~)
俺も今度Firefox使ってみよ!(はやくCSSの話してくれないかな~)
- トモ・リーン
- 実際の作業が始まったらFirefoxの機能拡張やCSSハックなどの紹介もするわね!
- 今回のポイント!
-
- Firefoxを使ってみよう!(もっていない人はインストールしておいてください)
- Internet Explorer 6 はCSSの対応がしきれていない部分があるので気をつけよう!
- コメント(1)
-
- 佐藤とも子
最近はIE7やIE8もシェアのばしていますが、まだまだ始めに確認するブラウザにするのは危険ですよ。
- 2010/01/15