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

CSS実験室

HTML5対応版clearfix（予告）: » 最近、あるサイトのソースをXHTML1.0からHTML5に書き換えていて、私家版clearfixに不具合があることを発見した。近... [read more]
clearfixの決定版を作る－Mac IE編－: » 前回のIE編の冒頭で、私は「CSS自体の正しさとか美しさを優先し、そのためには古いバージョンのブラウザは犠牲になってもしょうがな... [read more]
clearfixの決定版を作る－IE編－: » 今回は、floatバグ対策における鬼門ともいえるIEのclearfixに挑戦する。しかし、その前に、何をもって「決定版」とするか... [read more]
inline-blockの奇妙な世界: » inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」... [read more]
clearfixの決定版を作る－モダンブラウザ編－: » floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来... [read more]

background関連

背景画像の位置指定では正確にセンタリングできない: » スタイルシートでは背景画像の表示位置をキーワード（left, center, right, top, middle, botto... [read more]

float関連

floatと一緒にwidthも指定しないと回り込まない: » ある要素にfloatを指定するときは、一緒にwidthも指定するのが基本的ルールである。実際、widthを指定しないとどんな不具... [read more]
ひとつの要素にfloatとmarginを同時に設定すると位置がずれる: » ある要素にfloatと横方向のmarginの指定を同時に行うと、marginで指定した位置よりも右または左にずれるというもの。 ... [read more]
floatを繰り返すとレイアウトがくずれる: » これは、いわゆる段組レイアウトを縦に重ねた場合と考えてもらえばいいだろう。レイアウトくずれが発生するのは段の高さが一律でない時で... [read more]
要素を左右に隙間なく配置することができない: » スタイルシートによるレイアウトで、「ボックス」を最重要 "概念" とするなら、floatは最重要 "... [read more]

ソースの記述

「font-family: 細明朝体」でスタイル指定が無視される: » font-familyに細明朝体を指定すると、それ以降のスタイル指定がすべて無視される、という現象。これを発見したのは、管理人が... [read more]
font-sizeを%で指定すると、ある値でサイズの逆転が起きる: » フォントサイズについては、私の場合、キーワードによる指定（small、mediumなど）を基本としているが、例えば、smallと... [read more]
マージンをまとめて設定するとテーブルはセンタリングされない: » ブロックレベル要素は左右マージンの値をautoにすることによってセンタリングされる。ところが、テーブルについては、その記述のしか... [read more]
コメントで「表」の字を使うと直後のスタイル指定が無効になる: » 「表」のほか「構」「予」など、コメントで使うとスタイル指定が無効になるクセ者の文字がいくつかある。Macintosh版のIEでの... [read more]

ボックス関連

ボックス内でテキスト・画像の下揃えはできない: » ボックスとは「セルが一つしかないテーブルのようなもの」と別項で書いたが、もちろん目的は全く違うものものだし、性格も特性も異なる。... [read more]
ボックスの高さを100％に指定してもウィンドウいっぱいにならない: » スタイルシートを使ってレイアウトする時、最も重要かつ基本的な概念となるのが "ボックス" だ。テーブルを使ったレイアウトに慣れて... [read more]

定義リスト関連

マージンを使ってdtとddを横並びにするとdtが消える: » 定義リストで、dtとddを横並びにしたいとき、ddのマージンの調整でそれを実現するやり方は私がよく使うテクニックなのだが、あると... [read more]
dlを含むボックスに背景画像を指定すると背景画像が繰り返される: » この現象は、あるWebページで、※1～、※2～、※3～というような「脚注」にdlタグを使用したときに発生した。本文と脚注を区切... [read more]

標準モードと互換モード

フォントサイズの指定がテーブル内に継承されない: » ブラウザの表示モードには、W3Cの標準的仕様に準拠した標準モードと旧来のブラウザと互換性のある互換モードの2つがある。Windo... [read more]