CSS3 スタンダード・デザインガイド【改訂第2版】

本書ではW3CのCSS3やCSS4の規格で採用され、主要ブラウザが対応しているセレクタやプロパティを項目として取り上げています。また、ブラウザが未対応の機能や独自に拡張した機能についても、TIPSなどの形で紹介していますので参考にしてください。

最新のブラウザに対応

• 項目ごとに以下のブラウザにおける対応状況を表示
  • iOS 6のMobile Safari ※
  • Android 4.xの標準ブラウザ ※
  • Firefox 20
  • Safari 6.0.x
  • Chrome 26
  • Opera 12.15
  • Internet Explorer 10 ※

  ※最新版との対応状況が異なる場合、iOS 4.x/5.x、Android 2.3.x/3.x、IE6/7/8/9 についての対応状況も記載しています。

• 試験運用機能での対応状況を掲載

  ※試験運用機能は、Firefoxでは「about:config」、Chromeでは「chrome://flags/」の設定を有効にすることで利用できるようになる機能です。

HTML5に対応

• サンプルをHTML5で記述。
• HTML5で要素のカテゴリー分類が刷新されたため、各プロパティの適用先をCSSで定義されたボックスの種類に基づく分類で記載（例：ブロックコンテナ、Atomicインラインレベル要素など）。

  ※HTML5のデフォルトスタイルシートによって各要素が標準で構成するボックスの種類（displayプロパティの値）については、「HTML5 スタンダードデザインブック」に掲載していますので参考にしてください。

追加したモジュール

• 条件分岐（Conditional Rules）
• デバイス（Device Adaptation）
• リージョンレイアウト（Regions）
• ポジションレイアウト（Positioned Layout）
• エクスクルージョン（Exclusions and Shapes）
• マスク（Masking）
• フィルタ（Filter Effects）
• 変数（Custom Properties for Cascading Variables）

分割・統合されたモジュール

• ページメディア（Paged Media）

  → ページメディア（Paged Media）
  → ページ分割（Fragmentation）

• テキスト（Text）

  → テキスト（Text）
  → テキストの装飾（Text Decoration）

• リスト（Lists）

  → リスト（Lists and Counters）
  → リストマークのスタイル（Counter Styles）

• 2Dトランスフォーム（2D Transformations）
  3Dトランスフォーム（3D Transformations）

   

  → トランスフォーム（Transforms）

追加したプロパティ

※TIPSとして紹介しているものを含みます

• セレクタ

  :matches()／:dir()／:scope

• @ルール

  @mediaのネスト／@supports／@document／@viewport

• フレキシブルボックスレイアウト

  flex／flex-grow／flex-shrink／flex-basis／flex-flow／flex-direction／flex-wrap／order／align-items／align-self／align-content／justify-content

  ※勧告候補に従って書き直しています。古い草案に従ったプロパティを利用し、
  　主要ブラウザに対応する方法もまとめました。

• エクスクルージョン

  wrap-flow／wrap-margin／wrap-through

• ボックスの形状

  shape-outside／shape-inside

• レスポンシブイメージ

  image-set()

• マスク関連

  clip-path／mask-type

• フィルタ

  filter

• スクロールバーの表示

  overflow-scrolling

• プログレスバー／メーターの向き

  orient

TIPSから項目へ昇格したプロパティ

※旧版では対応ブラウザや草案がなく、TIPSや独自拡張として紹介していたプロパティです。ブラウザの対応や草案のリリースにより、第2版では項目として取り上げ、詳しい解説やサンプルを追加しています。

• 画像を使った罫線の表示

  border-image-source／border-image-slice／border-image-width／border-image-repeat／border-image-outset

• 画像の合成

  cross-fade()

• 拡大処理のアルゴリズム

  image-rendering

• OpenTypeフォントの字形

  font-feature-settings／font-language-override

• ハイフネーション

  hyphens／hyphens-limit-zone／hyphens-limit-chars／hyphens-limit-liines

• 下線・上線・取り消し線の表示

  text-decoration-line／text-decoration-style／text-decoration-color

• 縦書きの中の文字の向き

  text-orientation

• マスク

  mask／mask-image／mask-repeat／mask-position／mask-origin／mask-size／mask-clip／mask-box-image

追加した値

※TIPSとして紹介しているものを含みます

• widthプロパティ

  available／max-content／min-content／fit-content

• positionプロパティ

  page

• text-alignプロパティ

  match-parent

• メディアクエリの特性

  device-pixel-ratio／view-mode／pointer／hover／luminosity

その他

• グラデーション
  linear-gradient()／radial-gradient()／repeating-linear-gradient()／repeating-radial-gradient()

  値の記述形式が変更

• font-feature-settings

  値の記述形式が変更

• perspective()／perspective

  値に単位を付けて記述する形式に変更

• clip

  ポジションレイアウト（Positioned Layout）モジュールに掲載

• word-wrap

  プロパティ名がoverflow-wrapに変更

• text-autospace

  CSS4へ移動 ＆ プロパティ名がtext-spacingに変更

• element()

  CSS4へ移動

Chapter 1　基本

文法
　　　スタイルシートの利用
セレクタ
　　　セレクタ
メディアクエリ
　　　メディアクエリ
条件規則
　　　対応状況の判別
デバイス
　　　ビューポートの設定
ページメディア
　　　ページメディアの設定
ページ分割
　　　改ページの指定
　　　行の孤立の回避

Chapter2　レイアウト

ボックス
　　　ボックスの種類
　　　マージンの挿入
　　　パディングの挿入
　　　横幅と高さの指定
　　　横幅と高さの最小値・最大値
　　　ボックスの配置と回り込み
　　　回り込みの解除
　　　オーバーフローしたコンテンツの表示
　　　構成したボックスの表示・非表示
フレキシブルボックスレイアウト
　　　フレキシブルボックスレイアウト
　　　フレックスアイテムの可変設定
　　　フレックスアイテムの表示順
　　　フレキシブルボックスレイアウトの方向と改行
　　　フレキシブルボックスレイアウトの配置
グリッドレイアウト
　　　グリッドレイアウト
マルチカラムレイアウト
　　　マルチカラムによる段組み
　　　マルチカラムの段の間隔
　　　マルチカラムの段の区切り線
　　　マルチカラムの段にまたがる表示
　　　マルチカラムの段のバランス
　　　マルチカラムの改段・改ページ
リージョンレイアウト
　　　リージョンレイアウト
ポジションレイアウト
　　　ポジションレイアウト
　　　ボックスの重なり順
　　　コンテンツの表示範囲
エクスクルージョン
　　　エクスクルージョン
　　　ボックス（エクスクルージョンボックス）の形状

Chapter3　カラーアレンジと背景・罫線のデザイン

カラー
　　　文字の色
　　　ボックスの透明度
背景と罫線
　　　背景色
　　　背景画像
　　　背景画像の表示スタイル
　　　背景画像の表示位置
　　　背景画像の固定対象
　　　背景の表示エリア
　　　背景画像の表示位置の基点
　　　背景画像の表示サイズ
　　　背景のデザイン
　　　罫線の表示
　　　角丸の表示
　　　画像を使った罫線の表示
　　　書字方向に合わせた罫線の表示
　　　分断されたボックスの表示スタイル
　　　インライン要素の背景画像の表示
　　　ボックスのドロップシャドウ
画像
　　　線形グラデーションの表示
　　　円形グラデーションの表示
　　　線形グラデーションの繰り返し
　　　円形グラデーションの繰り返し
　　　グラデーションの表示
　　　HTML要素の画像化
　　　２枚の画像の合成
　　　レスポンシブイメージ
　　　拡大処理のアルゴリズム
　　　ボックスに合わせた画像サイズの調節
　　　ボックス内での画像の表示位置

Chapter4　コンテンツのデザイン

フォント
　　　文字サイズの指定
　　　文字の太さ
　　　斜体
　　　字形
　　　OpenTypeフォントの字形
　　　フォントの指定
　　　Webフォントの利用
　　　文字のデザイン
　　　文字サイズの自動調節
　　　iOSの文字サイズの自動調節
テキスト
　　　字形の変換
　　　改行コード・タブ・スペースの表示
　　　タブ幅の指定
　　　禁則処理のルール
　　　自動改行のルール
　　　長い単語の改行ルール
　　　ノーブレークスペースの処理
　　　ハイフネーション
　　　ハイフネーションの制限
　　　行揃えの指定
　　　両端揃えの調節方法
　　　最終行の行揃え
　　　単語の間隔
　　　文字の間隔
　　　1行目のインデント
テキストの装飾
　　　下線・上線・取り消し線の表示
　　　下線の表示位置
　　　圏点の表示
　　　圏点の表示位置
　　　文字のドロップシャドウ
　　　文字のアウトライン
　　　文字の色
　　　欧文のレンダリング処理
　　　文字のアンチエイリアス処理
行のレイアウト
　　　行の高さの調節
　　　垂直方向の位置揃え
書字方向
　　　書字方向の指定
　　　双方向アルゴリズムの変更
　　　縦書き・横書きの指定
　　　縦書きの中の文字の向き
ルビ
　　　ルビの表示位置
　　　ルビの位置揃え
リスト
　　　リストマークのデザイン
コンテンツの挿入と置換
　　　コンテンツの挿入・置換
　　　カウンターの挿入
　　　引用符の種類
テーブル
　　　テーブルのキャプションの表示位置
　　　テーブルの表示方法
　　　テーブルの罫線の表示
　　　テーブルの罫線の間隔
　　　テーブルの空セルの表示

Chapter5　特殊効果

トランスフォーム
　　　2Ｄトランスフォーム
　　　2Ｄトランスフォームの原点
　　　3Ｄトランスフォーム
　　　3Ｄトランスフォームの原点
　　　子要素の3Ｄトランスフォーム
　　　子要素の透視投影
　　　投影中心のｘ軸・y軸方向の位置
　　　裏面の表示
トランジション
　　　トランジション
アニメーション
　　　アニメーション
　　　アニメーションの再生・一時停止
　　　ディレイ中と再生後の表示
マスク
　　　マスク
　　　分割画像によるマスク
　　　図形によるマスク
フィルタ
　　　フィルタ
　　　鏡像

Chapter6　インターフェース

インターフェース
　　　インターフェースセレクタ
　　　アウトラインのデザイン
　　　ボックスの大きさの算出方法
　　　ボックスのリサイズ
　　　テキストがオーバーフローしたときの表示
　　　カーソルの形状
　　　iOSのポップアップメニューを隠す
　　　ハイライト表示のカスタマイズ

APPENDIX

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