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

Web制作者のためのビジュアル・リファレンス

CSS3/CSS4のプロパティを体系的にまとめ、サンプルを通してどのように機能するかを習得できるように構成したビジュアル・リファレンス。主要ブラウザとスマートフォンの対応状況も掲載。

出版日 2013年5月
ISBN 4839946965
ISBN-13 978-4839946968
出版社 マイナビ
ページ数 352ページ
判型 B5変型

はじめに

CSS3 スタンダード・デザインガイド」を書き上げてから2年。Webを取り巻く状況も大きく変化し、CSS3の普及も進みました。
角丸や影、グラデーションといった装飾はCSS3で設定するのが主流となり、Webフォントによってタイポグラフィを大胆に取り入れたデザインも多く目にするようになっています。アニメーションやトランスフォーム、縦書きなど、CSS3で設定できる表現は幅広く、アプリや電子書籍などの開発においても必要不可欠なものとなっています。

また、HTML5やスマートフォンなどの普及に合わせて新しい機能も次々と提案されており、CSS3やCSS4として発展を続けています。たとえば、この2年間に追加された主な機能には以下のようなものがあります。

  • 条件規則
  • ビューポートの設定
  • リージョンレイアウト
  • エクスクルージョン(除外)
  • ボックスの形状の指定
  • レスポンシブイメージ
  • ハイフネーション
  • マスク
  • フィルタ
  • など

そこで、改訂第2版では最新の状況に合わせてCSS3/CSS4の機能を体系的にまとめなおし、サンプルを通してどのように機能するかを習得できるように構成しました。

機能ごとに、最新の主要ブラウザ(Firefox、Safari、Chrome、Opera、Internet Explorer)とスマートフォン(iOSのMobile Safari、Androidの標準ブラウザ)での対応状況も掲載していますので、参考にしてください。

掲載したセレクタやプロパティ

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

改訂第2版での主な追加・更新内容

最新のブラウザに対応

  • 項目ごとに以下のブラウザにおける対応状況を表示
    • … 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要素の画像化
   2枚の画像の合成
   レスポンシブイメージ
   拡大処理のアルゴリズム
   ボックスに合わせた画像サイズの調節
   ボックス内での画像の表示位置

Chapter4 コンテンツのデザイン

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

Chapter5 特殊効果

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

Chapter6 インターフェース

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

APPENDIX

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