最新のCSSについては『HTML5＆CSS3デザイン 現場の新標準ガイド【第２版】』を参照してください。
はじめに
CSS3はCSS2.1に新しい機能を追加したもので、これまでは画像やJavaScriptを利用して表現するしかなかったWebページのデザインを、スタイルシートだけで簡単に設定できるようになっています。たとえば、CSS3で追加された主な機能には以下のようなものがあります。
- 角丸
- ドロップシャドウ
- グラデーション
- Webフォント
- 新しい段組みのレイアウト手法
（フレキシブルボックスレイアウト／グリッドレイアウト／マルチカラム） - 縦書き
- ２Ｄ・３Ｄのトランスフォーム（回転／拡大縮小／移動）
- トランジション／アニメーション
こうした機能は主要なブラウザでサポートされ、Webページでの利用も広がっています。また、HTML5との組み合わせや、Webアプリ、電子書籍などの開発においても必要不可欠なものとなりつつあります。
そこで、本書ではCSS2.1から引き継がれた機能も含めて、CSS3の機能を体系的にまとめ、サンプルを通してどのように機能するかを習得できるように構成しました。
機能ごとに、最新の主要ブラウザ（Firefox、Safari、Chrome、Opera、Internet Explorer）とスマートフォン（iOSのMobile Safari、Androidの標準ブラウザ）での対応状況も掲載していますので、参考にしてください。
[» 最新の対応状況一覧]
掲載したセレクタやプロパティ
本書ではW3CのCSS3の規格書で採用され、主要ブラウザが対応しているセレクタやプロパティを項目として取り上げています。また、ブラウザが未対応の機能や独自に拡張した機能についても、TIPSなどの形で紹介していますので参考にしてください。
もくじ
Chapter 1 基本
セレクタ
セレクタ
iOSのポップアップメニューを隠す
ハイライト表示の指定
文法
スタイルシートの種類
メディアクエリ
メディアクエリ
ページメディア
ページメディアの設定
改ページの指定
行の孤立の回避
Chapter2 レイアウト
ボックスモデル
ボックスの種類
マージンの挿入
パディングの挿入
横幅と高さの指定
横幅と高さの最小値・最大値
ボックスの配置と回り込み
回り込みの解除
オーバーフローしたコンテンツの表示
表示の有無
フレキシブルボックスレイアウト
フレキシブルボックスレイアウト
グリッドレイアウト
グリッドレイアウト
マルチカラムレイアウト
マルチカラムによる段組み
マルチカラムの段の間隔
マルチカラムの段の区切り線
マルチカラムの段にまたがる表示
マルチカラムの段のバランス
マルチカラムの改段・改ページ
ポジショニング
ボックスの表示位置の指定
ボックスの重なり順
Chapter3 カラーアレンジと背景・罫線のデザイン
カラー
文字の色
ボックスの透明度
背景と罫線
背景色
背景画像
背景画像の表示スタイル
背景画像の表示位置
背景画像の固定対象
背景の表示エリア
背景画像の表示位置の基点
背景画像の表示サイズ
背景のデザイン
罫線の表示
角丸の表示
画像を使った罫線の表示
書字方向に合わせた罫線の表示
ボックスが途切れるときの表示
インライン要素の背景画像の表示
ボックスのドロップシャドウ
画像
線形グラデーションの表示
円形グラデーションの表示
線形グラデーションの繰り返し
円形グラデーションの繰り返し
グラデーションの表示
HTML要素の画像化
ボックスに合わせた画像サイズの調節
ボックス内での画像の表示位置
Chapter4 コンテンツのデザイン
フォント
文字サイズの指定
文字の太さ
斜体
字形の切り替え
フォントの指定
Web フォントの利用
文字のデザイン
文字サイズの自動調節
Mobile Safariの文字サイズの自動調節
テキスト
字形の変換
改行コード・タブ・スペースの表示
タブ幅の指定
禁則処理のルール
自動改行のルール
長い単語の改行ルール
ノーブレークスペースの処理
行揃えの指定
両端揃えの調節方法
最終行の行揃え
単語の間隔
文字の間隔
数字やアルファベットの前後の余白
１行目のインデント
下線・上線・取り消し線の表示
下線の表示位置
圏点の表示
圏点の表示位置
文字のドロップシャドウ
文字のアウトライン
文字の色
欧文のレンダリング処理
文字のアンチエイリアス処理
行のレイアウト
行の高さの調節
インライン要素の位置揃え
書字方向
書字方向の指定
双方向アルゴリズムの変更
縦書き・横書きの指定
ルビ
ルビの表示位置
ルビの位置揃え
リスト
リストマークのデザイン
コンテンツの挿入と置換
コンテンツの挿入・置換
カウンターの挿入
引用符の指定
画像の切り抜き
テーブル
テーブルのキャプションの表示位置
テーブルの表示方法
テーブルの罫線の表示
テーブルの罫線の間隔
テーブルの空セルの表示
Chapter5 特殊効果
2Ｄトランスフォーム
2Ｄトランスフォーム
2Ｄトランスフォームの原点
3Ｄトランスフォーム
3Ｄトランスフォーム
3Ｄトランスフォームの原点
子要素の3Ｄトランスフォーム
子要素の透視投影
投影中心のｘ軸・y軸方向の位置
裏面の表示
トランジション
トランジション
アニメーション
アニメーション
アニメーションの再生・一時停止
ディレイ中と再生後の表示
マスク
鏡像
Chapter6 インターフェース
インターフェース
インターフェースセレクタ
アウトラインのデザイン
ボックスの大きさの算出方法
ボックスのリサイズ
APPENDIX
単位
数値の計算
共通値
色の値
色名