最後にIEでチェック＋CSSハック：CSS入門
CSS入門（27）
カスタマイズに必要になりそうなCSSは、ひと通りご紹介し終わったので、最後にIE（Internet Explorer）でチェックを行います。
ご存知のようにIEには、数々のバグがあるので、対応してあげる必要があります。お話は、次の順番で進みます。
最後にIEでチェック＋CSSハック
1：前回までのお話
（01）
前回は、background-imageを使って、背景に画像を入れてみました。
また、background-repeat、background-positionによって、さらに表示個数や表示位置をコントロールすることもできました。
以下、前回までのCSSコードです。background-repeat、background-positionの指定値は、お好きなようにどうぞ。
2：IE6で表示してみる
（02）
今回は、現在（2008年05月頃）、最もシェアが高い IE6 で、表示状態を確認してみることにします。
比較した方が分かりやすいので、まず、正常に表示される Firefoxで見てみましょう。当り前ですが、何の問題もありません。
次に IE6で表示してみます。どうやら、2点はっきりと「おかしい」と分かる箇所があります。
- floatしている<div>タグ同士の間が、Firefoxより大きい。
- 均等割付（text-justify）がうまくいっていない。
太古の昔であれば、少しのズレ（1pxの違い）も許さない風潮がありましたが、現状ではあまり気にする人がいません。
結局のところ、多少ズレているからといって、それが利益にはまったく関係ないからです。
他社において、「どうやって利益につなげようか」と考えているときに、「ブラウザごとに文字サイズが少し違う」などと言っている場合ではないのです。
その問題の度合いによって、対応するかどうか判断します。
3：CSSハック
（03）
正常に表示されないIEのようなブラウザのバグに対応するためのコードや行為は、「CSSハック」と呼ばれています。
どうやら今回は、<div>タグの幅（width）が違っているようです。
（04）
Windows版IE5.0〜6.0、Macintosh版IE5.xにのみ適用する「CSSハック」があります。書き方は、次のようになります。
「*html」を付けて書くのだそうですよ。
（05）
IE6ブラウザで表示してみてください。おおよそFirefoxと同じくらいになっているはずです。
4：均等割付（text-justify）の問題
（06）
次に、均等割付（text-justify）のおかしな表示を何とかします。
（07）
「text-justify」の指定値として、「distribute-all-lines」を使っていましたが、もうひとつの候補「inter-ideograph」を試してみようと思います。
（08）
IE6ブラウザで確認してみると、正常な表示になっています。
ブラウザのチェックについて
1：チェックの順番
今回は、表示状態の確認を、Firefox2.0とIE6だけで行いました。（Windows環境です）
できるだけ、多くのブラウザ、バージョン、環境でチェックできれば良いのですが、なかなかそうもいきません。
現状（2008/05/17）においては、以下の順番で、「3」あたりまでチェックしておけば、最低限のチェックとしてはOKと考えて宜しいかと思います。
- Firefox2.0（Windows）
- IE6（Windows）
- IE7（Windows）
- Safari（Windows）
- Opera（Windows）
- Firefox2.0（Mac）
- IE5.5以前（Windows）
- Safari（Mac）
ビジネスサイトであれば、ビジネスチャンスを逃さないように、より多くの環境でチェックしましょう。
2：チェックの考え方
ブラウザのチェックの考え方は、次のようになります。
- より正確に（準拠にそった）表示するブラウザ「Firefox」を使って、開発チェックを行う。
- シェアが高い「IE」でも、チェックしておく。
- 「Firefox」以外のモダンブラウザでも、チェックしておく。
- Mac環境でも、チェックしておく。
- 旧いブラウザでも、チェックしておく。
- その他の環境（Linuxなど）でも、チェックしておく。
アクセス解析で、ユーザが利用しているブラウザが分かります。その使用状況も参考にしましょう。
CSS適用前と比べてみる
CSSを適用する前と後を比較してみましょう。違いが分かって面白いのではないでしょうか。
次回予告
次回は、CSS入門のまとめを書いて、CSSについては、ひと区切りつけます。その後、いよいよ、カスタマイズです。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/05/17 更新日：2008/05/17
« 「背景に画像【background-image】：CSS入門」｜「CSS入門まとめ」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
狐はおりこうさん
CSSハック
いつもコメントありがとうございます。
ご期待にそえるほどの内容には、なっていないですよねぇ。
申し訳ないッス。
何しろ、あまりCSSハックに興味がわかないのです。(´・ｪ・)ドチヨ
そうそう、今回のリニューアルで意外だったのが、
IE6より、SafariやOperaの方が、バグが表示されていることです。
モダンブラウザなのに・・・。(；´Д`)
面倒なので、そのままにしています。(・∀・)まさに外道
利益に関係なければホッケと申しましょうか、
プライオリティが、格段に違う要件ということではないでしょうか。
デザインを見せるのが目的のサイトなどは別かもしれませんけど、
目的は、精緻に制作することではなく、利益アップでしょうから。
そもそも、わざわざ多種ブラウザで閲覧するユーザがいるかと言えば、
なかなかいらっしゃらないとも思うんですよね。
やらなければいけないことが多いもの。
結構適当に。
CSSのハックはどこまでやればいいのか、悩みどころですよね。基本的なモダンブラウザではチェックするようにしているますけれど、時間が無いときはFireFoxとIE6,7だけで済ませたり。
最近、アクセス解析を見ていると、IE8で見に来ている人がいたりして、あぁ、またひとつ増えるのか…とちょっとへこんだりしています。
でも実際仰るように、有名サイトでも全てに対応したりしているわけではなさそうですね。Macやマイナーブラウザでは結構がたがたなサイト多いですし。用途に合わせてっていうのが一番なんでしょうね。
トムとハック
そうですよねー。
CSSハックは悩みどころです。面倒くさいし。(´Д｀;)
IE8も既にいらっしゃるんですかぁ。早いなぁ。
うちは、Mac、Linuxを使っているユーザさんが、
シェアより多い感じがするので、どんな風に見えているものだか、
ちょっと気になります。
なかなか完全にチェック、対応できないッス。
おれ、出来ないッス。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/298-a97bd176
ｃｓｓハックのお話楽しみにしてました。
まだサイト作り始めの頃、IE（しかも6）で作ったりしてました。
で、完成してからFireFoxで見ると「ギャー」な状態だったりして、
「火狐め！」とか言ってたけど、火狐は実はとてもおりこうさんだったんですよね。
実際、Firefoxを基準として作るようになってから。ハックが少なくなったし＾＾
（IEで作ってた時のｃｓｓはもう怖くて触れない。どこか触ったら崩れそうです）
今は割りと、利益に関係なければ多少のずれはオッケな感じなんですねー！
自分も多少のずれはあまり気にしないで作ってたけど、
これっていいのかなと思ってたので安心しました。