Google Chrome の崩れ対策

Google Chrome は最近まで表示確認ブラウザの中に入れていなかったのですが、９月から確認を始めました。
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ライブラリとは

Webstyle #01 のSafariのプレビューについて

またもやSafariのプレビューが崩れました。
実際に使用すると全く正常なのに、なんでプレビューは崩れるのか理解に苦しみます。
今回はどうもドロップダウンメニューに原因があるのではないかと疑っています。
一応画像は全部見えてて、ドロップダウンメニュー以外は上下の余白の崩れだけなので、ほっておくことにしました。
実際の使用には全く問題はありませんので、ご安心ください。
他のブラウザで見るとテンプレートの機能がちゃんと確かめられますので、Safariを使うのはやめましょう（笑）
弟もMac愛好者ですが、SafariではなくてFirefoxを使っているそうです。それも、Firefoxを使うのは当たり前なんだそう。
ふーん、そうなんだ。
Appleもよく考えたほうがいいみたいですね。

追記：
テンプレートの更新とともにメニューのスクリプトを入れ替えしたら、プレビューが正常に見えるようになりました。やはり以前のスクリプトが影響していたようです。
これでほっと一息。
実際に使うと正常だけど、プレビューのスクリプトが加わると相性が悪くなるスクリプトだったようですね・・・

Safari のプレビューを改善しました。

実際に使用すれば何の問題もないテンプレートですが、プレビューが崩れてちゃあ話にならないので、あちこちうろついて原因を探しました。
困るのは、「プレビューだけ崩れる」なんて記事がないこと。
そこで考えました。
プレビューで崩れるのは私のテンプレートだけ。ということは、何かが他とは違っているはずだ。

忍者ツールズがしたようにHTMLを入れてみると、確かに普通に表示されたので、何かがSafari と合わないのだろうことは想像がつきます。
それで、忍者のテンプレートの中で異常が見られるものを探してみました。
でも、みんな正常・・・・・・おや？
私のほどではありませんが、異常が出るものを見つけました。そして、そのテンプレートと私のに共通していることは・・・・・・

XHTMLでした！

そして、CSSに「HTML」と 「* 」が使われているものは正常なのもわかりました。
どうしてプレビューにだけこういう不具合が出るのかは未だに分りませんが、HTMLとXHTMLがごっちゃになっているのが原因である可能性が大きいです。
ともかく理由がわかったのだから訂正も可能です。
早速すべてのテンプレートのCSSに下記の空指定を書き加えました。

* { }

これを入れてからプレビューを見てみると、すべて正常に表示されました。
プレビューのためだけにテンプレートを修正するのもおかしな話ではありますが、あの崩れ方はあまりに酷い。
ついでに、気になっていた細かいところも修正しておきました。
これでやっと心安らかに寝られる（笑）

Safari の皆さん、よろしくお願いしますねー

Safariをご使用のみなさんへ

忍者ツールズはSafariに対応していないんですね。
助太刀忍者を見ていたら、MacのSafari使用者の苦情がいろいろと書いてありました。
全然管理ページに入れないとか、アップロードできないとか、コメントを送るためのボタンが表示されないとか・・・・・・
忍者ツールズ側の返答はいつも、「Macには完全対応できていません」

今回最新のMacとSafariでテンプレートのプレビューを見てみたら・・・・・・

ぎょえ～～～！

私のテンプレートだけCSSのbodyが反映されてない！
なぜ？なぜ？なぜ？
「月の華」は普通に見えてるのに、他のは全滅だよ？!
それも、だめなのはbodyだけで、CSSの他の指定は全部生きてる・・・・・・

泡を食って、プレビューがおかしいテンプレートを試験場にダウンロードして恐る恐るSafariで見てみたら・・・・・・

あれ？どこもおかしくない！

全部正常に見えてますよ？変なところはどこにもないですよ？
う～ん、そういえば去年、プレビューでは崩れなかったのに、実際に使うと崩れてたテンプレがあったなあ。
ということは、プレビューが悪いのかな？
いや、きっとそうに違いない。だって、実際に使用したら正常だったのだから。

（追記: この件を忍者に問い合わせしてみました。ひとつだけ普通だった「月の華」だけに使用しているスクロールのHTML指定を他のテンプレに入れてみたら、他のテンプレも普通に表示されたんだそうです。なぜそうなるのかは忍者側にもわからないそうで、Safariのせいにされました。でも実際に使用すると、そんなことをしなくても普通に見えるんですけどねえ・・・・・・？）

ということで、MacでオリジナルのSafariをご利用の皆さん、プレビューでは表示がおかしくなっていますが実際の使用には何の問題もございません。
プレビュー用に修正したので、現在では正常に見えています。
しかし、忍者ツールズ自体がMacに対応できていないので、できるだけSafariではなく他のブラウザを使われることをお勧めいたします。
その場合はぜひFirefoxをダウンロードしてください。もちろん無料です。最新版のFirefox 3 が少し前にリリースされています。

ダウンロードは下のバナーからどうぞ