最後にIEでチェック+CSSハック:CSS入門

ブログが作りたい!CSS入門 > 最後にIEでチェック+CSSハック:CSS入門

最後にIEでチェック+CSSハック:CSS入門

最後にIEでチェック+CSSハック:CSS入門

CSS入門(27)

カスタマイズに必要になりそうなCSSは、ひと通りご紹介し終わったので、最後にIE(Internet Explorer)でチェックを行います。

ご存知のようにIEには、数々のバグがあるので、対応してあげる必要があります。お話は、次の順番で進みます。

▲ページの先頭に戻る

最後にIEでチェック+CSSハック

1:前回までのお話

(01)

前回は、background-imageを使って、背景に画像を入れてみました。

CSSでリンクを装飾

また、background-repeat、background-positionによって、さらに表示個数や表示位置をコントロールすることもできました。

CSSでリンクを装飾

以下、前回までのCSSコードです。background-repeat、background-positionの指定値は、お好きなようにどうぞ。

▲ページの先頭に戻る

2:IE6で表示してみる

(02)

今回は、現在(2008年05月頃)、最もシェアが高い IE6 で、表示状態を確認してみることにします。

比較した方が分かりやすいので、まず、正常に表示される Firefoxで見てみましょう。当り前ですが、何の問題もありません。

正常に表示される Firefox

次に IE6で表示してみます。どうやら、2点はっきりと「おかしい」と分かる箇所があります。

  • floatしている<div>タグ同士の間が、Firefoxより大きい。
  • 均等割付(text-justify)がうまくいっていない。
IE6のおかしな表示

太古の昔であれば、少しのズレ(1pxの違い)も許さない風潮がありましたが、現状ではあまり気にする人がいません。

結局のところ、多少ズレているからといって、それが利益にはまったく関係ないからです。

他社において、「どうやって利益につなげようか」と考えているときに、「ブラウザごとに文字サイズが少し違う」などと言っている場合ではないのです。

その問題の度合いによって、対応するかどうか判断します。

▲ページの先頭に戻る

3:CSSハック

(03)

正常に表示されないIEのようなブラウザのバグに対応するためのコードや行為は、「CSSハック」と呼ばれています。

どうやら今回は、<div>タグの幅(width)が違っているようです。

(04)

Windows版IE5.0~6.0、Macintosh版IE5.xにのみ適用する「CSSハック」があります。書き方は、次のようになります。

「*html」を付けて書くのだそうですよ。

(05)

IE6ブラウザで表示してみてください。おおよそFirefoxと同じくらいになっているはずです。

IE6用にwidthを調整

▲ページの先頭に戻る

4:均等割付(text-justify)の問題

(06)

次に、均等割付(text-justify)のおかしな表示を何とかします。

IE6の均等割付(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ハックのお話楽しみにしてました。


まだサイト作り始めの頃、IE(しかも6)で作ったりしてました。
で、完成してからFireFoxで見ると「ギャー」な状態だったりして、
「火狐め!」とか言ってたけど、火狐は実はとてもおりこうさんだったんですよね。
実際、Firefoxを基準として作るようになってから。ハックが少なくなったし^^
(IEで作ってた時のcssはもう怖くて触れない。どこか触ったら崩れそうです)



今は割りと、利益に関係なければ多少のずれはオッケな感じなんですねー!
自分も多少のずれはあまり気にしないで作ってたけど、
これっていいのかなと思ってたので安心しました。


CSSハック

ひろこさん、こんにちは!
いつもコメントありがとうございます。

ご期待にそえるほどの内容には、なっていないですよねぇ。
申し訳ないッス。

何しろ、あまりCSSハックに興味がわかないのです。(´・ェ・)ドチヨ

そうそう、今回のリニューアルで意外だったのが、
IE6より、SafariやOperaの方が、バグが表示されていることです。
モダンブラウザなのに・・・。(;´Д`)

面倒なので、そのままにしています。(・∀・)まさに外道

利益に関係なければホッケと申しましょうか、
プライオリティが、格段に違う要件ということではないでしょうか。

デザインを見せるのが目的のサイトなどは別かもしれませんけど、
目的は、精緻に制作することではなく、利益アップでしょうから。

そもそも、わざわざ多種ブラウザで閲覧するユーザがいるかと言えば、
なかなかいらっしゃらないとも思うんですよね。

やらなければいけないことが多いもの。

結構適当に。

 こんにちは。

 CSSのハックはどこまでやればいいのか、悩みどころですよね。基本的なモダンブラウザではチェックするようにしているますけれど、時間が無いときはFireFoxとIE6,7だけで済ませたり。

 最近、アクセス解析を見ていると、IE8で見に来ている人がいたりして、あぁ、またひとつ増えるのか…とちょっとへこんだりしています。

 でも実際仰るように、有名サイトでも全てに対応したりしているわけではなさそうですね。Macやマイナーブラウザでは結構がたがたなサイト多いですし。用途に合わせてっていうのが一番なんでしょうね。

トムとハック

tytoさん、こんにちは。

そうですよねー。
CSSハックは悩みどころです。面倒くさいし。(´Д`;)

IE8も既にいらっしゃるんですかぁ。早いなぁ。

うちは、Mac、Linuxを使っているユーザさんが、
シェアより多い感じがするので、どんな風に見えているものだか、
ちょっと気になります。

なかなか完全にチェック、対応できないッス。
おれ、出来ないッス。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/298-a97bd176
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて