『デザインサンプルで学ぶCSSによる実践スタイリング入門』で扱うのは、見出し、リスト、テーブル、フォーム、レイアウトの5種類。どれも、「ちょっとカスタマイズしよう」と思っても具体的にどうすればいいのか困ることが多いものです。
本書ではそれぞれにデザインサンプルを用意し、CSSでどのようにカスタマイズすればいいのかを様々な装飾パターンで解説。1冊手元に置いておけば、高い一覧性でいつでも「いじりたいところ」を参照できるでしょう。
基本となる見出し、リスト、テーブル
第1章ではSEOや可読性に影響を与える「見出し」について解説します。<h1<や<h3<といったHTMLタグがどういった装飾になるのかはCSSで定義されているので、簡単に書き換えることができます。画像を使わなくても多様な表現ができるのが楽しいですね。
第2章では「リスト」を紹介。セルの縦並びリストはよく目にしますが、例えばグローバルナビゲーションなどの横並びリストも同じ<ul<をCSSで工夫することで表現できます。
第3章と第4章で扱うのは「テーブル」です。テーブルをスタイリングするときは、行や列のグループ化、テーブル特有のマークアップ、ボーダーの表示形式、セル間隔の指定方法も理解しておく必要があります。Webページのテーブルでも、Excelのような表現（あるいはそれ以上）のことができるのです。
便利なフォーム、レイアウト
第5章から第7章までは「フォーム」を取り上げます。フォームと一口に言っても種類はたくさんあります。検索ボックス、アンケートなどで使用するラジオボタン（複数の選択肢から一つだけを選ぶ）、チェックボックス（複数の選択肢からいくつでも選べる）、セレクトフォーム（一覧を表示して一つを選ぶ）。
また、それらを組み合わせて、お問い合わせフォームをスタイリングすることもできます。メールアドレスや電話番号だけの入力欄なども用意できますし、フォーム全体を手紙のように装飾することも簡単にできます。
第8章では「floatプロパティによるレイアウト」を解説します。Webページをレイアウトしようとしてfloatに迂闊に手をつけるとページががたがたに崩れるなど大変なことになりがちです。しかし、floatはCSSでレイアウトをするうえで基本と言っても過言ではありません。
なんとなく触ってレイアウト崩れが起きる前に、問題を回避する方法を知っておきましょう。ポイントは、floatプロパティが要素を左または右に浮動化するもので、あとに続く要素がその反対側に回り込むということです。使いこなせれば、Webページを自由にレイアウトできるようになるでしょう。
最後の第9章ではCSS3で追加されたマルチカラムの機能で段組みレイアウトを簡単に実装する方法を紹介します。マルチカラムレイアウトを使えば、テキストを横並び2段にすることも容易です。これはfloatプロパティでも実装できますが、マルチカラムの威力は絶大です。
◆
CSSスタイリングの基本を押さえれば、よりかっこよくしたり目立たせたりする装飾は簡単にできるようになります。それはCSSが扱いやすいということでもありますが、例えばfloatプロパティのように問題が起こりがちなところもあります。
使いたいパーツは本書で紹介するデザインサンプルから使い始め、各種のプロパティを少しずつ理解しながらカスタマイズできるようになるのがいいのではないでしょうか。
デザインサンプルで学ぶCSSによる実践スタイリング入門
著者：宮本麻矢 監修：山田祥寛
発売日：2017年3月15日（水）
価格（税込）：1,944円（POD）／1,728円（電書）
本書について
CodeZineの連載「CSSで作るWeb用パーツ」を加筆修正して書籍化したものです。
※プリントオンデマンド(POD)と電書で販売中。
