忍者ブログ

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ライブラリとは

拍手[1回]

デモランキングバナー
  

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

TRACKBACK

TrackbackURL

カレンダー

04 2024/05 06
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

AD

PR

ブログ内検索

素材サイト様

White Board様
White Board Banner
妙の宴様
妙の宴 Banner
もずねこ様
Mozneko Banner
押し花とアイコン様
押し花 バナー
petit sozai emi様
petit sozai emi
幕末維新新選組様
幕末維新新選組
The Heart of Eternity 様
thoe バナー
Crambon様
Crambon バナー
DragonArtz Design 様

プロフィール

メール de コンタクト

このブログへのリンク

Firefoxを支援しています

管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。
Firefox ブラウザ無料ダウンロード

現在の閲覧者

Copyright ©  -- CriCri --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]