CSS省略スタイルを利用すれば、数行に渡るコードがたった一行で書き終える。非常に楽だ。 楽をすることにかけてはどんな苦労もいとわない。 そんな私のような人間にはぴったりなCSS省略スタイルについて紹介しよう。
レイアウト、フォント、カラー……、CSSドキュメントには実に様々な要素が存在する。 プロジェクトの度にCSSの文書構造が異なっていたのでは、メンテナンス性は最低の上、デバッグも困難になる。 今回、私がCSSを実装する際に心がけているメンテナンス性を向上させる5つのポイントを紹介しよう。
CSSスプライトってご存知ですか？ Yahoo！のパフォーマンス改善チームにも推奨されている手法で、CSSのコードもスマートに読みやすくなる、一石二鳥のテクニック。
さらに、ちょっと面倒な値を設定や画像の生成を手伝ってくれるオンラインツールも紹介しよう。
複数カラムを採用する場合のそれぞれのカラムの高さが同じにならない。 CSSレイアウトでよく出会うこんな不満。 Tableレイアウトにしてしまう前に、シンプルな解決を紹介。
floatした要素に対して、同じ方向にmarginを与えると、marginが2倍になってしまう。 という、IEにおける不可解なバグ。
レイアウトに欠かすことのできないfloatで、迷い込みやすいこのバグの修正方法を紹介。
アンダースコア(_)ハック、ハイフン(-)ハック、voice-familyハック、バックスラッシュ(/)ハック、スターHTMLハック(* html)など、様々なハックが利用できなくなったIE7。
そんな新時代に覚えておきたいコンディショナルコメントについて解説。
CSSの宣言が重複したら？
CSSの仕様のうちでもっとも強力な概念だろうセレクター。 今回はそのセレクターの仕様中の、もし宣言が重複したら、どの宣言が優先されるのかを判断する方法を紹介しよう。
IE(IE7も含む)にはmin-height、min-widthという非常に便利な属性が存在しない。 ボックスモデルバグをはじめとするIEの数々のバグの中でもかなりやっかいなバグであることは間違いない。
非常に便利なmin-height、そしてついでにmin-widthの属性をIEでもきちんと設定できるようになるバグFixを紹介。
CSSレイアウト手法の中でもっとも利用されるfloatは、非常に脆弱で多くのバグを全てのブラウザが抱えている。
そんな中でももっとも頭を抱えるのは、要素のheightが子要素に含まれるfloatのheightと連動しないバグ。 このバグ修正としてもっとも優れたclearfixクラスの紹介とその解説。
