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クラスの紹介とその解説。
CSSを学ぶために必要なリソース群。
残念ながら日本語圏におけるCSSに関する情報は多くはない。 そんな中でもオススメのサイトと書籍を紹介。
もし他にもおすすめの書籍があれば、コメントにて。
CSSコーディングにもデバッグは必須。 対象ブラウザに制限されずデバッグするためのワークフローを紹介。
FireFox、IEで利用できるデバッグツールも合わせて紹介しよう。