2005-09-17 Sat

XHTMLとCSSでのサイト構築メモ

当サイトはXHTML1.1とCSS2.0に準拠して構成されています。サイトの確認は

で行っております。

標準に準拠すると、このように異なるOS、ブラウザ間でも見た目の統一を図ることが容易になります。と言いたいところですが、残念ながらそうはいきません。今更ですが、WinのIEで見ると、今までの作業は何だったのだ…という並大抵ではない徒労感に襲われます。ということでこのサイトでは、抗議の意味を込めてIEで見るとおかしな個所を一ヶ所残しています*1。以下はそのメモです。

標準に準拠していると、IE 以外の見た目の統一は結構楽です。というか、これらのブラウザで著しく見た目が違う場合は、もう一度ソースを見直すか、あきらめた方が楽しくBlogを続けられます。つまり、どこまで妥協を許すか、自分で決めないといけないということですね。で「標準準拠なのにIEでぼろぼろだ〜」という場合「widthとpaddingを同時に指定している。」ことがほとんどの原因だとおもいます。このIEのバグに関しては「ADP: IE6のwidth解釈バグ対処法」がとても参考になりました。このAlternative Design Projectさんのサイトには他にも勉強になる解説がたくさんありますので、一度熟読されることをお勧めします。

これ以外にもIEにはたくさんバグがありますが、僕のとった手っ取り早い解決策はIEのみ別のスタイルシートを読ませるということです。といってもスクリプトを書いて、ブラウザ判別なんて事ではなく、子孫セレクタを使った有名なスターハックを使用しました。

例えば以下のようなhtmlファイルがあるとします。

<html>
<head>sample</head>
<body>
<h1>TITLE</h1>
<div>
<a id="first" href="http://blog.heartfield-web.com/">Heartfield</a>
<p><a id="last" href="http://blog.heartfield-web.com/">Heartfield</a></p>
</div>
</body>
</html>

ここでスタイルシートに

div a {
font-color: #ff0000;
}

とするとidがfirstだけでなく、lastにもfont-colorが適用されます。「div以下にあるすべてのa」という意味ですね。これを利用して

* html div a {
font-color: #00ff00;
}

とすると、IEのみフォントの色が変わります。「*」は「なんでもいい」という意味なのですが、本来は

div * a {
font-color: #00ff00;
}

このように使います。この場合は「divタグの中の何らかの要素の中のa」ということになり、先程のhtmlに適用すると、idがlastのものにだけ適用されます。htmlの最上位の要素である「html」タグの前に「*」を置くのは正しくは誤りなので、正しいブラウザはそんなばかげた記述は無視します。ところが幸か不幸かIEはなんも考えずに適用してくれるので、最初にIE以外のブラウザに適用させたいスタイルを記述し、その後にこのスターハックで記述すれば、めでたくIE専用スタイルの出来上がりです。アンダースコアハック*2などと違いCSS Validを保てます*3。

では、具体的な使い方ですが、前述の「widthとpaddingを同時に使用している」場合、できる限り親子関係で調整します。例えば親要素でwidthを指定し、子要素でpaddingを使用するということですね。でも、どうしてもそれができない、というかそれを考えるのが面倒くさい場合、IE用のスタイルにwidthのみを指定し、その値を「width + padding」とすれば解決です。具体的には

div {
width: 100px;
padding: 0 0 0 20px;
}

としている場合

div {
width: 100px;
padding: 0 0 0 20px;
}

∗ html div {
width: 120px;
}

とすればいいわけです。ということで、きちんと標準準拠しているブラウザに合わせたスタイルシートを作成し、その後このハックを用いてIE用の表示調整をすれば、サイト構築がかなり楽になります。

ちなみに、widthとpaddingの関係ですが、正確に言うと「widthのときは左右のpadding、heightのときは上下のpadding」を指定しないようにしなければいけません。これと逆の組み合わせのみの場合、同時に指定しても表示は崩れないと思います。

ということで、当サイトが僕の意志通り表示されているのは、Mac OS XとSafari RSSの組み合わせです。作業環境がこれですので当然ですね。次に、Mac版のFirefox、Opera。で、Win版のFirefox、Opera。最後にIEとなっています。ちなみにMac版とWin版の最大の違いは、フォントサイズですね。Win版は僕が意図しているよりもちょっと大きいです。最新のMoblogの日付が枠ぎりぎりにあるのがどうにも許せませんが、これ以上小さくすると、Safariのデフォルト設定でアンチエイリアスがきれるので、ここは妥協しました。

IEでご覧になっている方はお分かりと思いますが、唯一解決できなかったのが「Site Menu」の文字が高すぎることです。半分ぐらいしか背景にかかっていないですね。IEをお使いの皆さま、もしよろしければFirefoxや無料になったOperaで当サイトをご覧ください。そんなに違いはないですが「Site Menu」も所定の位置につきますし、花男がちょっとかわいいですよ（笑）*4。

  1. *1 - 単に僕の技量では解決できなかったのですが。
  2. *2 - スタイルの直前にアンダースコア「_」をおくと、これまたIEのみが読み込みます。
  3. *3 - でもほんとはだめなんですよ。
  4. *4 - SafariかOperaならなおかわいいです。

2005-09-17 Sat / Category - Web

このページの先頭に戻る

Copyright 2005 - Heartfield