スタイルシートをめぐる冒険

「font-family: 細明朝体」でスタイル指定が無視される

Fri, 19 Oct 2007 22:46:51 +0900

font-familyに細明朝体を指定すると、それ以降のスタイル指定がすべて無視される、という現象。これを発見したのは、管理人が手がけたあるサイトの中のページについて、顧客から「レイアウトがガタガタにくずれているよ」と指摘されたことがきっかけだった（公開前のテスト段階の話だが）。なぜ、指摘されるまで気付かなかったかというと、これがIE6以前でのみ起こり、IE7やFirefoxでは発生しない現象だからだ。Web制作を仕事としている以上、こんなことは言い訳にならないのだが、このときはたまたま見逃してしまった。
[該当するブラウザ]
Windows／IE5.0、IE5.5、IE6.0

clearfixの決定版を作る－Mac IE編－

Sat, 08 Sep 2007 15:23:55 +0900

前回のIE編の冒頭で、私は「CSS自体の正しさとか美しさを優先し、そのためには古いバージョンのブラウザは犠牲になってもしょうがない」と書いた。その流れでいえば、マイクロソフトもサポートを打ち切ったMac版IEにそもそも対応する必要があるのか、IE編でWin版IE5.0を無視したのだから、Mac版IEも無視していいのではないか、という疑問が当然わく。至極もっともなことである。が、しかし、それで終わってしまっては本稿自体が成り立たない。しぶしぶではあるが、Mac版IE（5.x）でfloatをクリアする方法を探ってみよう。結論はもうすでに出ている。以下の通りである。

clearfixの決定版を作る－IE編－

Tue, 04 Sep 2007 21:30:35 +0900

今回は、floatバグ対策における鬼門ともいえるIEのclearfixに挑戦する。しかし、その前に、何をもって「決定版」とするか、あらためておさえておこう。本来なら、ひとつでも多くの種類、バージョンのブラウザでfloatをクリアできる（もしくは同じ効果を得られる）ことをもって、決定版とすべきなのだろうが、ここでは少し違う方針をとりたいと思う。簡単にいえば、CSS自体の正しさとか美しさを優先したいということだ。逆に、そのためには古いバージョンのブラウザなどは犠牲になってもしょうがない、と考えている。ここでいう「決定版」を定義してみよう。

inline-blockの奇妙な世界

Sat, 02 Jun 2007 10:47:34 +0900

inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」にするためのもの。まともに対応しているのが、OperaとSafari、それになぜかMac版IEくらいというマイナーな存在だが、なかなか興味深い振る舞いをする値なので、いろいろと検証してみた。

clearfixの決定版を作る－モダンブラウザ編－

Fri, 04 May 2007 07:39:14 +0900

floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（

）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。

基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。

font-sizeを%で指定すると、ある値でサイズの逆転が起きる

Sat, 21 Apr 2007 17:06:59 +0900

フォントサイズについては、私の場合、キーワードによる指定（small、mediumなど）を基本としているが、例えば、smallとx-smallなどはけっこう大きさに差があって、どうしてもその間の大きさの文字を使いたくなる。そんなときは、パーセントによる指定を併用するのだが、70%台のある範囲の値については注意が必要である。
[該当するブラウザ] Windows／IE6.0、IE7.0（5.5以前は未確認）

症状

font-sizeを%で指定した時のIE6の表示

まず、右のスクリーンショットを見てもらおう。

71%よりも72％の方が大きく、73%、74%と文字の大きさが変わらないのは、とりあえずいいとして、その上のサイズの75%になると、今度は逆に小さくなってしまうことがおわかりいただけると思う。その後、78%まで大きさは変わらず、79%でようやく72～74％と同じ大きさを回復する。

ただし、この現象が発生するのは条件が限られる。

背景画像の位置指定では正確にセンタリングできない

Fri, 10 Nov 2006 00:15:41 +0900

スタイルシートでは背景画像の表示位置をキーワード（left, center, right, top, middle, bottom）または、ピクセル数（x, y座標）で指定できるが、centerと指定した場合、marginの設定によるセンタリングとは位置が一致しない。
[該当するブラウザ]
Windows／IE6.0

症状

画像Aを背景に
ボックスBをセンタリングすると

こうなるはずだが…
こうなってしまう

全体の幅が100ピクセルで左右に1ピクセルの罫線を持つ画像Aを背景に指定し、表示位置センターで縦方向にタイルさせ、さらに、幅98ピクセルのボックスBをmarginの設定でセンタリングして配置した（→サンプルページ1）。

本来であれば、ボックスBは左右がピッタリ背景画像Aの中に収まるはずだが、Windows版のIE6.0では、背景画像Aが右に1ピクセルずれるため、背景画像Aの左の罫線の一部がボックスBに隠れて消えてしまう。

マージンをまとめて設定するとテーブルはセンタリングされない

Fri, 10 Nov 2006 00:12:02 +0900

ブロックレベル要素は左右マージンの値をautoにすることによってセンタリングされる。ところが、テーブルについては、その記述のしかたによってセンタリングされない時がある。
[該当するブラウザ]
Macintosh／IE5.0、IE5.1

症状

幅・高さとも50ピクセルで背景色が黒のテーブルをセンタリングさせるために、マージンを「margin: 0 auto」と上下左右まとめて設定してみた（→サンプルページ1）。しかし、各種ブラウザで検証したところ、Macintosh版のIE5.1、5.0ではセンタリングされないことがわかった。

コメントで「表」の字を使うと直後のスタイル指定が無効になる

Fri, 10 Nov 2006 00:10:20 +0900

「表」のほか「構」「予」など、コメントで使うとスタイル指定が無効になるクセ者の文字がいくつかある。Macintosh版のIEでのみ発生するマイナーな現象のせいか、このことに触れている文章をあまり見たことがない。筆者の場合、コメントに「表示」という言葉を使ったため、たまたま遭遇した。
[該当するブラウザ]
Macintosh／IE5.0、IE5.1

症状

どのような条件下においてこの現象が発生するか、細かく見ていこう。
まず、外部スタイルシートにおいて、box-A、box-B、box-C、box-Dという4つのボックスを定義する。いずれも、高さ・幅とも80ピクセル、背景色黒、文字色は白。ただし、box-Aとbox-Dの定義の前にはコメントなし。box-Bとbox-Cの定義の前にはコメントあり、前者には「構」、後者には「表」の1文字を入れた。
次に、HTMLファイルでは、テーブルを組んでbox-A、box-B、box-C、box-Dを横に並べ、それぞれのボックスの中に文字を入れた（→サンプルページ1）。
これをMacintosh版IE5.1で表示させるとこうなる（以下の図はすべてMacintosh版IE5.1によるスクリーンショット）。

外部スタイルシートの場合

ご覧のとおり、外部スタイルシートで定義した場合、コメントありのbox-B、box-Cは表示されない。box-Dがちゃんと表示されているところから見ると、「構」「表」などの文字が入ったコメント以降すべてのスタイル指定が無効となってしまうわけではないようだ。

HTMLにCSSを組み込んだ場合

また、コメントも含めてまったく同じスタイル定義をHTMLファイルの中に組み込んだとき（→サンプルページ2）のスクリーンショットがこれ。こちらは4つのボックスともちゃんと表示される。

フォントサイズの指定がテーブル内に継承されない

Fri, 10 Nov 2006 00:06:49 +0900

ブラウザの表示モードには、W3Cの標準的仕様に準拠した標準モードと旧来のブラウザと互換性のある互換モードの2つがある。Windows版IE6.0以降、Macintosh版IE5.X以降、およびNetscape6.0以降では、この2つを文書型宣言の書き方（※注）によってスイッチするが、問題なのは、それより以前のバージョンのブラウザでは、文書型宣言の書き方にかかわらずすべて互換モードと表示になってしまうことだ。標準モードと互換モード（※注）では、スタイルシートの解釈の違いにさまざまなものがあるが、今回検証する「フォントサイズの指定がテーブル内に継承されるか、されないか」もそのひとつ。ちなみに、標準モードでは継承されるが、互換モードでは継承されない。
[該当するブラウザ]
Windows版IE5.5以前、Macintosh版IE4.5以前
Netscape4.7以前

※注：簡単にいうと、文書型宣言の中の「URLあり」が標準モード、「URLなし」および文書型宣言そのものなしが互換モードとなる。詳しくはDTD（文書型宣言）とブラウザの表示モードを参照されたし。

症状

Windows/IE6.0の場合
Windows/IE5.5の場合

この現象を実際に再現させてみよう。まず、文書型宣言はURLを含むフル表記。次に、スタイルシートで、body要素に対してフォントサイズを84％に設定した。テキストは、bodyタグ内に直接／divタグで囲んで／テーブル内に入れて／入れ子にしたテーブル内に入れて、の4通りで記述した（→サンプルページ1）。これをWindows版IE6.0で表示させた場合のスクリーンショットが上。Windows版IE5.5で表示させた時のスクリーンショットが下。Windows版IE5.5では、テーブル内の文字に84％のサイズ指定は効かず、デフォルトに戻ってしまう。

floatと一緒にwidthも指定しないと回り込まない

Tue, 07 Nov 2006 21:48:41 +0900

ある要素にfloatを指定するときは、一緒にwidthも指定するのが基本的ルールである。実際、widthを指定しないとどんな不具合が起きるのか、それを検証してみたい。
[該当するブラウザ]
Macintosh／IE5.0、IE5.1

症状

widthを指定しないことによる不具合はいくつかあると思うが、ここでは2つのケースを取り上げる。

ひとつは、floatさせたいボックスにtext-alignを指定した場合。たとえば、画像の下にキャプションを右揃えで入れ、その左側に本文を回り込ませたいときなどだ。この形にするためには、画像とキャプションを含むボックスにfloat:rightとtext-align:rightを指定することになるが、そうした時、Macintosh版IEでは本文が回り込まずに画像の下に来てしまう（→サンプルページ1）。これは、text-align:centerとしても同様である。

もうひとつは、divタグを入れ子にした場合。上記と同じケースで、さらに画像とキャプションの間隔も細かく指定したいときなどは、画像を含むボックスの中にさらにキャプションを含むボックスを入れ、画像とのマージンを設定することになるが、この場合もMacintosh版IEでは本文が回り込まない（→サンプルページ2）。

ひとつの要素にfloatとmarginを同時に設定すると位置がずれる

Tue, 07 Nov 2006 21:45:22 +0900

ある要素にfloatと横方向のmarginの指定を同時に行うと、marginで指定した位置よりも右または左にずれるというもの。
[該当するブラウザ]
Windows／IE5.5、6.0

症状

Mac/IE5.1の場合

右のスクリーンショットを見てもらおう。左側に10ピクセルの余白をとってコンテンツA、その右にコンテンツB、というような2段組のレイアウトを組んだとする。スタイルシートでは、コンテンツAに float: left、margin-left: 10px と指定する。ちゃんと正しい位置に配置されているかわかるように背景画像に10ピクセル刻みで縦の罫線を入れてみた。ご覧のとおりMac（およびNetscape6.0以降）では位置のズレはない。

Windows/IE6.0の場合

しかし、Windows版のIE5.5、6.0ではコンテンツAの位置がずれ、余白は10ピクセルより広くなってしまう（→サンプルページ1）。右にマージンをとり、コンテンツBを左に回り込ませた場合も同様である（→サンプルページ2）。指定したマージンに対してどれくらいずれるか、マージンの数字を変えて試してみたところ、ほぼ指定したマージンの2倍になるようだ。

floatを繰り返すとレイアウトがくずれる

Tue, 07 Nov 2006 21:37:00 +0900

これは、いわゆる段組レイアウトを縦に重ねた場合と考えてもらえばいいだろう。レイアウトくずれが発生するのは段の高さが一律でない時である。
[該当するブラウザ]
すべてのブラウザ

症状

ボックスA

ボックスB

Netscape7.1の場合のスクリーンショット

単純化するために、AとB、高さの異なるボックスを2つ設定した（A＞B）。そして、ボックスAをfloat: leftで左側に配置、ボックスBをfloat: rightで右側に配置、さらに全体をひとつのボックス（クラス名: column）で囲み、それを2回繰り返してみた（→サンプルページ1）。Winows版IEでは問題ないのでOKと思ってしまいそうだが、実はそれ以外のブラウザではちゃんと表示されない。

要素を左右に隙間なく配置することができない

Sat, 04 Nov 2006 15:08:59 +0900

スタイルシートによるレイアウトで、「ボックス」を最重要 "概念" とするなら、floatは最重要 "テクニック" と言えるだろう。floatとは、後に続く要素を左右どちらかに回り込ませるためのものだが、この性質を利用して要素を横にピッタリ隙間なく並べようとするとなかなかうまくいかない。
[該当するブラウザ]
Windows／IE5.5、6.0

症状

この現象を検証するために、左右それぞれの半円画像を背景とするボックスを設定し、floatを使って横に配置した。意図するところは、左右ピッタリくっつけて完全な円にしたいということなのだが、Windows版のIEでは間に3ピクセルほどの隙間ができてしまう。（→サンプルページ1）

ボックス内でテキスト・画像の下揃えはできない

Fri, 03 Nov 2006 16:59:02 +0900

ボックスとは「セルが一つしかないテーブルのようなもの」と別項で書いたが、もちろん目的は全く違うものものだし、性格も特性も異なる。例えば、テーブルの場合、セルの中にテキストを下揃えで流すといったデザインが可能だが、ボックスではそれができない。
[該当するブラウザ]
すべて

症状

こうしたいのだが…
こうなってしまう

これを実現したいのは、例えば、背景画像の下辺に合わせてテキストを乗せたい時などだ。そこで、ボックスに図のような三角形の画像を背景として入れ、vertical-align: bottomと指定した。しかし、ボックス内のテキストは上揃えになったままである（→サンプルページ1）。同様に、middleを指定してもテキストを中央に配置することはできない。