はじめてのCSS:やさしさいっぱいのCSSが肌にしみこむ!カモ。

下準備:ブラウザチェック

トモ・リーン
CSSのチェックに絶対必要なWebブラウザの紹介よ。
ケンジ
俺は職業コーダーだから世界シェア1位のIE6でまずは確認してるぜ!
Internet Explorer 6は世界でもっとも普及しているOS、WindowsのデフォルトWebブラウザです。また、Webブラウザを変更できることを知らない方も多いようです。
トモ・リーン
残念~!
CSS組みじゃなかったらそれで正解でした~~!
ケンジ
えぇえええ~~~~。
じゃあ、まちがってんの??
トモ・リーン
IE6は確かに普及率が高いけど、実は2001年に出た古いブラウザでCSSの対応にバグが多いのよ。
だから始めにIE6で組むとバグでうまく組めないし、バグ対応をして組めたとしても他のブラウザでズレまくるのよ。
ケンジ
それが俺の残業の原因か!!
トモ・リーン
そんなわけでオススメのWebブラウザチェックの方法の紹介よ~!
  1. まずはFirefoxでチェック

    Firefoxの日本でのシェアは控えめですが、ものすごい便利なブラウザです。
    新しいブラウザの分類のモダンブラウザと言われるもので、CSSの対応がかなり正確です。
    「モダンブラウザ」はFirefoxだけじゃなく、SafariOperaなども含まれますが、Firefoxではじめにチェックすることをオススメする理由は「デバック用の機能拡張が豊富」と言うことです。その機能拡張は後日、別エントリで紹介します。

  2. Firefoxでキチンと表示されたらInternet Explorer 6でチェック

    たぶん、ところどころおかしく見えるとおもいます・・・(泣)
    そのまま修正すると、正しく表示するブラウザでおかしな表示になるのでCSSハックブラウザごとに別のCSSファイルを読ませるなどの対応をします。
    CSSハックなどについては後日、別エントリで紹介します。(待ちきれない人は「CSSハック」でググってください。いっぱい出てきます)

  3. 最後に他のモダンブラウザでチェック

    safari(今のところはMac版のみのチェックでよさそうです)Operaなどで表示を確認します。大体きちんと表示されますが、ダメな場合はIE6での調整の影響が響いている可能性もあるのでFirefoxでもう一度確認後 Firefoxで正しく表示された場合、各ブラウザ対応のCSSハックを使用します。

トモ・リーン
ハックだらけのCSSは複雑で管理がしにくくなるけど、
  • きちんとしたCSSを書く
  • そのうち各ブラウザでの表示差異の少ないCSSの書き方を体が覚える
このような感じで経験を積めば、CSSハックの使用率も減ります。
ケンジ
ふぇ~!("体が覚える"って体育会系だよ~~~)
俺も今度Firefox使ってみよ!(はやくCSSの話してくれないかな~)
トモ・リーン
実際の作業が始まったらFirefoxの機能拡張やCSSハックなどの紹介もするわね!
今回のポイント!
  1. Firefoxを使ってみよう!(もっていない人はインストールしておいてください)
  2. Internet Explorer 6 はCSSの対応がしきれていない部分があるので気をつけよう!

コメント(1)
佐藤とも子 Author Profile Page

最近はIE7やIE8もシェアのばしていますが、まだまだ始めに確認するブラウザにするのは危険ですよ。

2010/01/15