CriCri
クリエイティブになりたいクリクリ工房
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
Google Chrome の崩れ対策
Google Chrome は最近まで表示確認ブラウザの中に入れていなかったのですが、9月から確認を始めました。
Safariと同じくWebkit を使用しているGoogle Chrome ですが、独自の部分を持っているようで、Safari では問題ないのにGoogle Chrome だけ崩れることがあります。
CSSでbodyのmarginとpaddingを0にしているにもかかわらず、部分的にその指定が効かなくなるため、その部位にもう一度指定し直してみると崩れが直る、ということが何度もありました。
Safariでは普通に見えてるのにGoogle Chromeでは崩れるなんて、IE6ですでに苦労してるってのにまた苦労が増えてしまいました。
いいブラウザが増えるのは歓迎ではありますが、そのたびにハックや崩れ回避のための苦労が増えるのは嫌です!
追記(2010年12月)
検索からこの記事にたどり着く方がいらっしゃるので、Chromeでの崩れ対策を書いておきます。
この記事を書いたときは初心者の域を出ていなかったので(今でもだけど)、リセットの仕方をよく分かってませんでした。
bodyのmarginを0にしても、全部のブロックに承継するわけじゃない。
そこで、本当のリセットをしたらChromeでの表示もまったく問題なくなりました。
Chromeでマージンの問題が出ている人は、CSSの一番最初でリセットをすれば問題が解決します。
リセットの仕方は人によっていろいろですが、私が今使っているのはYAHOOのUI Library で公開されている YUI Reset CSSです。
一般的なタグがすべてリセット注)されますが、自分が使わないタグは外しておけばいいでしょう。
注) リセット
仕様がそれぞれ違うブラウザをすべて同じように見せるために、すべてのタグを一番最初に初期化することです。
初心者向けのCSS講座には、body のmargin とpadding を0にしたり、ユニバーサルセレクト(*)ですべてのタグのmargin とpadding を0にするように書いてあったりしますが、ユニバーサルセレクトですべてを初期化すると、全部のタグを再度指定しなおさないといけないので手間がかかります。
そこで現在では、主要なタグだけ初期化する方法が主流になっています。
YAHOOのリセットCSSもこの方式で、使いやすいので重宝です。
検索でたくさん引っかかってきますのですぐに探せると思いますが、下記のサイトがYUIのCSSライブラリについてわかりやすく説明しているので、ここに載せておきます。
YUIのCSSライブラリとは
Safariと同じくWebkit を使用しているGoogle Chrome ですが、独自の部分を持っているようで、Safari では問題ないのにGoogle Chrome だけ崩れることがあります。
CSSでbodyのmarginとpaddingを0にしているにもかかわらず、部分的にその指定が効かなくなるため、その部位にもう一度指定し直してみると崩れが直る、ということが何度もありました。
Safariでは普通に見えてるのにGoogle Chromeでは崩れるなんて、IE6ですでに苦労してるってのにまた苦労が増えてしまいました。
いいブラウザが増えるのは歓迎ではありますが、そのたびにハックや崩れ回避のための苦労が増えるのは嫌です!
追記(2010年12月)
検索からこの記事にたどり着く方がいらっしゃるので、Chromeでの崩れ対策を書いておきます。
この記事を書いたときは初心者の域を出ていなかったので(今でもだけど)、リセットの仕方をよく分かってませんでした。
bodyのmarginを0にしても、全部のブロックに承継するわけじゃない。
そこで、本当のリセットをしたらChromeでの表示もまったく問題なくなりました。
Chromeでマージンの問題が出ている人は、CSSの一番最初でリセットをすれば問題が解決します。
リセットの仕方は人によっていろいろですが、私が今使っているのはYAHOOのUI Library で公開されている YUI Reset CSSです。
一般的なタグがすべてリセット注)されますが、自分が使わないタグは外しておけばいいでしょう。
注) リセット
仕様がそれぞれ違うブラウザをすべて同じように見せるために、すべてのタグを一番最初に初期化することです。
初心者向けのCSS講座には、body のmargin とpadding を0にしたり、ユニバーサルセレクト(*)ですべてのタグのmargin とpadding を0にするように書いてあったりしますが、ユニバーサルセレクトですべてを初期化すると、全部のタグを再度指定しなおさないといけないので手間がかかります。
そこで現在では、主要なタグだけ初期化する方法が主流になっています。
YAHOOのリセットCSSもこの方式で、使いやすいので重宝です。
検索でたくさん引っかかってきますのですぐに探せると思いますが、下記のサイトがYUIのCSSライブラリについてわかりやすく説明しているので、ここに載せておきます。
YUIのCSSライブラリとは
TRACKBACK
TrackbackURL
COMMENT