XHTMLとCSSについて書かれた本。著者はCSS Nite周辺の人たちでの共著で、益子貴寛さんが中心となって書かれているような印象を受けた。XHTMLとCSSのつくり方、XHTMLのキホン、CSSのキホン、CSSセッティング、CSSデザインのための実用テクニック、CSSレイアウト、CSSデザインのブラウザ調整、多様なデバイスでのCSSデザイン、JavaScriptライブラリとCSS、CSS＋トラブルシューティングという全10章で構成されている。
序盤のXHTMLとCSSのつくり方は文書構造とデザインを分離する理由や、エディタの紹介がされている。XHTMLのキホンではヘッダやボディで使う要素の説明とブロック要素、インライン要素の説明がされている。CSSのキホンではCSSの適用方法、出力デバイスによってCSSを切り替える方法、セレクタやプロパティ、視覚成型モデルの説明、スタイルの優先順位などの説明がしてあった。ここら辺までは他の書籍に見られる内容と変わりはないように思う。他書よりも親切に書いてあるくらいか。
CSSのセッティングでは、CSSの設計とファイルの分割、リセットスタイル、タイポグラフィについて一歩踏み込んだ説明がしてある。後に発展していくであろうSMACSSやOOCSSの考え方に近い内容だった。
具体的なCSSの設計方法はルールを設けることだ。ページレイアウトを担当するスタイルを、パーツごとにファイルを分ける。全体の枠組みを決めるレイアウト、使い回しのできるヘッダーやフッター、サイドバーを別々のファイルで作ることで、一つのページだけでなく複数のページで同じレイアウトを採用する場合に再利用性を高めることができる。リセットスタイルや各ブラウザ用のCSSハックもファイルごとに読み込むと書かれていた。 最終的に各CSSファイルを一つのファイルで読み込むことでXHTMLに全体的なデザインを適用するそうだ。また各CSSには編集者名や編集日、プロパティなどを記述しておくそうだ。複数で作業をする場合に、効率的に作業を進めることができるそうだ。この手法を取り入れる理由はリソースの再利用性とメンテナンス性の向上にあると書かれていた。個人的にここの項目がこの本の肝になっている。
他にもCSSシグネチャーというカテゴリごとにデザインを共通化する手法が書かれていた。body要素にクラスを記述しておき、そのカテゴリ内で共通するデザインを採用する場合に使うようだ。また該当のページを表示する場合に、body要素のクラスとリンク要素をセレクタにすることで、ユーザーが該当ページに飛んだ際にグローバルナビゲーションで該当のリンクがハイライトで表示されるという仕組みだ。
CSSデザインのための実用テクニックでは、Photoshopでデザインカンプを作成した際に画像を切り出す方法が書かれている。グラデーションや透過画像の扱いについても書いてあった。他にもXHTMLになるが、クラスやIDでよく使われる名前や規則についても説明があった。文書から見出しや表組みでマークアップする上で迷うケースの解説があった。CSSだけでロゴをデザインするチュートリアルがあったが、実現できるのは欧文フォントの場合に限定される。CSS3でも外部フォントの読み込みは時間がかかるので、ロゴの実装は今後も画像が中心になるのではないかと思う。ナビゲーションバー、テーブル、フォームのスタイリングもこの章で解説してある。
CSSレイアウトでは、カラムレイアウトや可変レイアウトが解説されている。ここの説明は不親切に感じた。レイアウト方法の説明は最小限になっていて、どちらかというとクラスとIDの関連性について説明してある。参考図表のレイアウトもあったりなかったりで読みづらく感じた。
CSSデザインのブラウザ調整では、ブラウザ毎の差異を吸収するCSSの作成方法について説明してある。吸収する方法は大別して3種類ある。トリッキーな記述をして特定のブラウザのみにスタイルを適用させるCSSハックという手法。IE5シリーズにCSSを読み込むパスフィルターを使った手法。IEが独自で実装する条件付きコメントを利用する方法だ。
ブラウザごとの差異を吸収するワークフローがチュートリアル形式で説明してあったので勉強になった。モダンブラウザなどのようにレイアウトの崩れが少ないブラウザで確認をしたあと、IEのバージョンを落として確認していくことで、調整を行うそうだ。
多様なデバイスでのCSSデザインでは、メディアクエリの説明や携帯電話、携帯ゲーム機などをレイアウトする方法について説明してある。各デバイスでのHTMLの仕様や適用できるCSSプロパティが紹介されている。iPhoneやAndroidが普及していない2008年に出た本なのでiPhoneとiPod touchの説明もでてくるが、いささか情報が古いように思う。
JavaScriptライブラリとCSSでは、JavaScriptの初歩の初歩の説明と、Jqueryについて解説してあった。20ページしか割り当てがなかったので、ライブラリの種類や、実装できる機能について幾つか触れる程度だった。
最後のCSS＋トラブルシューティングは急いで読んだため、何が書いてあったのかさっぱり思い出せない。CSSを使ったレイアウトの最中によく陥るトラブル毎に対処法が何通りか紹介されていた。
これもXHTMLとCSSをある程度理解している人を対象としていて、基礎知識は必要最低限に抑えて周辺の必要な知識を集めたTipsといった内容だ。全体的にみると内容も濃く、実用的で分かりやすい解説が多かった。さすがCSS Niteといったところだろう。初めて知る事が多く読んだところを書き出していたらレビューが長くなってしまった。
