スタイルシート、表現はまちまち

フジミックスのホームページを少しずつですが、スタイルシートで書き直していますが、世の中にはたくさんのブラウザがあって、それらのブラウザのほとんどが自分のイメージ通りの表現をしてくれません。cssファイルを書き直して、サーバーにアップして、目で確認して、さらに見た目がイメージと異なる場合は、再度cssファイルを書き直しして、アップしてを何回も繰り返していくことになります。でもその作業をしていますと、だんだんと気が遠くなりそうな思いに駆られます。

---

教科書通りというか、全体をwrapper（幅を800px）で包んで、さらにその中にcontentというボックスを入れて、そのボックスの幅を800px、マージンを全て0pxに、左パティングを80px、右パティングを80pxと定義して、conentの中に文章を書いて、サーバーにアップしてブラウザで確認してみますと、WindowsXP標準搭載のExploreでは理屈通り（イメージ通り）の表現をしてくれましたが、MacOSX標準搭載のSafariではcontentが、wrapperの右端枠からさらに160pxほど外にはみ出てしまいました。

この場合はcontentの幅を640pxに書き直しすれば、イメージ通りの表現になります。
しかし今度はWindowsXP標準搭載のExploreで、contentの幅が小さくなった分、contentは、wrapperの右端枠より160pxほど右内方に入り込んでしまいました。
仕方がないので、contentのボックス幅を800px、マージン、パティングをすべて0pxにして、テキストの先頭文字をスペースを押しながら右側に少し移動させました。これは苦肉のごまかしの策です。
すると、WindowsXPのExploreでもMacのSafariでも同じように見えるようになりました。
ところが今度はMacOSX搭載のExploreではレイアウトがずれてしまいました。しかしMacOS９のExploreではイメージ通りの表現をしてくれました。
他にもブラウザはネットスケープ、オペラ、モジラなどなどがあります。同じブラウザであっても、例えば、Safariはバージョン1.0とバージョン2.0とでは微妙に表現が異なってきます。

以上の現象を踏まえればスタイルシートは参考書どおりには働かないと思った方が良いようですね。

結局のところ、わたくしの場合は、MacOSXのSafariとWindowsXPのExploreで検証して特に問題がなければそれで良いことにしようと思います。

nojimaさんはいろいろなクライアントに出会って大変ですね。
Web制作は、cssひとつとっても大変なことがよくわかりましたから、nojimaさんのご苦労がいかに大変なものであるのかがわかるような気が致します。
ひっちゃかめっちゃかに振り回されるクライアントに出会ってもけっして屈しないでこれからもなお一層がんばって下さい。

投稿：2006年４月７日