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

単位
数値の計算
共通値
色の値
色名

プロパティ＆ブラウザ対応一覧