CSS3開発者ガイド 第2版

―モダンWebデザインのスタイル設計

[cover photo]
TOPICS
Web , HTML/CSS
発行年月日
PRINT LENGTH
352
ISBN
978-4-87311-725-6
原書
The Book of CSS3, 2nd Edition
FORMAT
PDF EPUB
Print
3,520円
この商品は品切れ再入荷未定です

世界的ベストセラー書“The Book of CSS3”待望の邦訳。本書では難解なCSS3仕様を平易な言葉で解説し、一般に広く使われているモダンなブラウザとCSS3で何ができるかを明らかにしながら数年先を見越した最先端のWebデザインを追求します。良いデザインの原則に焦点を当て、実践的なサンプルを豊富に使って解説しているので、読者は無理なくCSSのスキルを向上できます。ウェブ開発の中でスタイルを設計しながらどんなデザインにしてやろうかと考える開発者は必読。気絶するほど美しいリッチなウェブを作れるようになります。うまく魅せないCSSなんてCSSじゃない!

関連ファイル

目次

目次
賞賛の声
はじめに
まえがき

1章 CSS3入門
    1.1 CSS3とは何か(どのようにしてこうなったか)
        1.1.1 CSS3の歴史
        1.1.2 CSS3はモジュール形式である
        1.1.3 CSS3は存在しない
    1.2 モジュールの標準化プロセスとステータス
    1.3 CSSの構文
    1.4 ベンダーの接頭辞
    1.5 CSS3を始めよう

2章 メディアクエリ
    2.1 メディアクエリの利点
    2.2 構文
    2.3 メディアフィーチャー
        2.3.1 幅と高さ
        2.3.2 ピクセル比
        2.3.3 デバイスの幅と高さ
        2.3.4 画面の向き
        2.3.5 アスペクト比
    2.4 メディアクエリの組み合わせ
    2.5 モバイルファーストのWeb開発
    2.6 まとめ
    2.7 各ブラウザの対応状況

3章 セレクタ
    3.1 属性セレクタ
    3.2 CSS3の新しい属性セレクタ
        3.2.1 前方一致の属性セレクタ
        3.2.2 後方一致の属性セレクタ
        3.2.3 任意の部分文字列の属性セレクタ
        3.2.4 複数の属性セレクタ
    3.3 一般的な兄弟要素コンビネータ
    3.4 まとめ
    3.5 各ブラウザの対応状況

4章 疑似クラスと疑似要素
    4.1 構造を表す疑似クラス
        4.1.1 :nth-*疑似クラス
        4.1.2 :first-of-type、:last-child、:last-of-type
        4.1.3 :only-childと:only-of-type
    4.2 その他の疑似クラス
        4.2.1 :target
        4.2.2 :empty
        4.2.3 :root
        4.2.4 :not()
        4.2.5 UI要素の状態
        4.2.6 制約に基づく検証の疑似クラス
    4.3 疑似要素
        4.3.1 ::selection疑似要素
    4.4 まとめ
    4.5 各ブラウザの対応状況

5章 Webフォント
    5.1 @font-faceルール
        5.1.1 複数のフォントフェイスの定義
        5.1.2 実在するフォントフェイスと生成されたフォントフェイス
    5.2 互換性の高い@font-faceの記法
        5.2.1 ローカルのフォントを使う
        5.2.2 フォントの形式
        5.2.3 構文の詳細
    5.3 Web上でフォントを使うためのライセンス
    5.4 Webフォントの実例
    5.5 フォントの読み込みのコントロール
    5.6 その他のプロパティ
        5.6.1 font-size-adjust
        5.6.2 font-stretch
    5.7 OpenTypeの機能
        5.7.1 フォントの機能の有効化
        5.7.2 フォントの機能を指定するプロパティ
    5.8 まとめ
    5.9 各ブラウザの対応状況

6章 テキストの効果とスタイル
    6.1 軸と座標を理解する
    6.2 text-shadow(立体的効果)
        6.2.1 複数の影
    6.3 オーバーフローの制限
    6.4 テキストの配置
    6.5 行の折り返しのコントロール
        6.5.1 単語の分割
        6.5.2 ハイフン区切り
    6.6 要素のサイズ変更
    6.7 まとめ
    6.8 各ブラウザの対応状況

7章 段組み
    7.1 カラムのレイアウト方法
        7.1.1 column-count(カラム数の厳密な指定)
        7.1.2 column-width(動的なカラム指定)
        7.1.3 各カラムへのコンテンツの分配
        7.1.4 column-countとcolumn-widthの併用
    7.2 カラム間の余白と区切り線
    7.3 カラム内の要素
    7.4 複数のカラムにまたがる要素
    7.5 まとめ
    7.6 各ブラウザの対応状況

8章 背景画像
    8.1 既存のプロパティへの変更
        8.1.1 background-position
        8.1.2 background-attachment
        8.1.3 background-repeat
    8.2 複数の背景画像
    8.3 画像サイズの動的な変更
    8.4 background-clipとbackground-origin
    8.5 backgroundプロパティを使った短縮記法の変更
    8.6 まとめ
    8.7 各ブラウザの対応状況

9章 ボーダーとボックスの効果
    9.1 ボーダーの角を丸める
        9.1.1 border-radiusを使った短縮記法
        9.1.2 パーセンテージを使った指定
    9.2 画像を使ったボーダー
        9.2.1 border-image-source
        9.2.2 border-image-slice
        9.2.3 border-image-width
        9.2.4 border-image-outset
        9.2.5 border-image-repeat
        9.2.6 border-imageを使った短縮記法
        9.2.7 利用可能なブラウザ
    9.3 ドロップシャドウ
    9.4 内側の影
    9.5 まとめ
    9.6 各ブラウザの対応状況

10章 色と不透明度
    10.1 opacityプロパティ
    10.2 色の記法に対する拡張と追加
        10.2.1 アルファチャンネル
        10.2.2 色相、彩度、明度
        10.2.3 HSLA
        10.2.4 色を表す変数currentColor
        10.2.5 まとめ
    10.3 各ブラウザの対応状況

11章 グラデーション
    11.1 線形グラデーション
        11.1.1 グラデーションの方向
        11.1.2 カラーストップの追加
        11.1.3 線形グラデーションの繰り返し
    11.2 円形グラデーション
        11.2.1 円形グラデーションの設定
        11.2.2 複数のカラーストップ
        11.2.3 円形グラデーションの繰り返し
    11.3 複数のグラデーション
    11.4 まとめ
    11.5 各ブラウザの対応状況

12章 2次元の変形
    12.1 transformプロパティ
        12.1.1 rotate
        12.1.2 translate
        12.1.3 scale
        12.1.4 skew
        12.1.5 skew()を使った短縮記法
    12.2 変形の際の注意
    12.3 行列を使った変形
    12.4 まとめ
    12.5 各ブラウザの対応状況

13章 3次元の変形
    13.1 CSSでの3次元の要素
    13.2 変形の関数
        13.2.1 軸を中心とした回転
        13.2.2 奥行き
        13.2.3 軸に沿った移動
        13.2.4 拡大・縮小
        13.2.5 変形の行列
    13.3 perspectiveプロパティとperspective-originプロパティ
    13.4 変形の原点
    13.5 transform-styleプロパティ
    13.6 要素の裏側の表示
    13.7 まとめ
    13.8 各ブラウザの対応状況

14章 トランジションとアニメーション
    14.1 トランジション
        14.1.1 transition-property
        14.1.2 transition-duration
        14.1.3 transition-timing-function
        14.1.4 transition-delay
        14.1.5 transitionを使った短縮記法
        14.1.6 全体のコード
        14.1.7 複数のトランジション
    14.2 アニメーション
        14.2.1 キーフレーム
        14.2.2 animation-name
        14.2.3 animation-duration
        14.2.4 animation-timing-function
        14.2.5 animation-delay
        14.2.6 animation-iteration-count
        14.2.7 animation-direction
        14.2.8 animation-fill-mode
        14.2.9 animation-play-state
        14.2.10 animationを使った短縮記法
        14.2.11 全体のコード
        14.2.12 複数のアニメーション
    14.3 まとめ
    14.4 各ブラウザの対応状況

15章 Flexboxレイアウト
    15.1 Flexboxのモデルの定義
    15.2 Flexbox内の配置
    15.3 配置順の反転
    15.4 任意の順での並べ替え
    15.5 さらに柔軟な指定
        15.5.1 flex-growプロパティ
        15.5.2 flex-shrinkプロパティ
        15.5.3 flex-basisプロパティ
        15.5.4 flexを使った短縮記法
    15.6 flexコンテナ内での配置
        15.6.1 justify-contentを使ったメイン軸方向の配置
        15.6.2 align-itemsを使ったクロス軸方向の配置
        15.6.3 align-selfを使ったクロス軸方向の配置
        15.6.4 折り返しとフロー
        15.6.5 flex-flowを使った短縮記法
        15.6.6 align-contentを使った複数行のflexアイテムの配置
    15.7 利用可能なブラウザと古い構文
    15.8 まとめ
    15.9 各ブラウザの対応状況

16章 値と長さ
    16.1 相対的な長さの単位
        16.1.1 ルートを基準とした単位
        16.1.2 ビューポートを基準とした単位
    16.2 計算による値
    16.3 要素のサイズ
        16.3.1 ボックスのサイズ
        16.3.2 内部的なサイズ指定と外部的なサイズ指定
    16.4 まとめ
    16.5 各ブラウザの対応状況

17章 グリッドレイアウト
    17.1 グリッド関連の用語
    17.2 グリッドの宣言と定義
        17.2.1 グリッドトラックの数が指定された明示的なグリッド
        17.2.2 明示的なグリッドへのグリッドアイテムの配置
        17.2.3 グリッドの配置関連の短縮記法
        17.2.4 グリッドラインの繰り返し
        17.2.5 名前つきのグリッドエリア
        17.2.6 grid-templateを使った短縮記法
        17.2.7 暗黙のグリッド
        17.2.8 位置指定のないグリッドアイテム
    17.3 明示的なグリッドと暗黙のグリッドの組み合わせ
        17.3.1 gridを使った短縮記法
    17.4 グリッドアイテムの積み重ね
    17.5 Internet Explorerでの構文
    17.6 まとめ
    17.7 各ブラウザの対応状況

18章 ブレンドモード、フィルター効果、マスキング
    18.1 ブレンドモード
        18.1.1 background-blend-mode
        18.1.2 mix-blend-mode
        18.1.3 isolation
    18.2 フィルター効果
        18.2.1 blur()
        18.2.2 brightness()とcontrast()
        18.2.3 grayscale()、sepia()、saturate()
        18.2.4 hue-rotate()
        18.2.5 opacity()
        18.2.6 drop-shadow()
        18.2.7 複数のフィルターの組み合わせ
        18.2.8 SVGを使ったフィルターの記述
    18.3 マスキング
        18.3.1 クリッピング
        18.3.2 イメージマスキング
        18.3.3 ボーダーのマスキング
        18.3.4 SVGを使ったマスキング
    18.4 フィルター効果とマスキングの併用
    18.5 まとめ
    18.6 各ブラウザの対応状況

19章 CSSの将来
    19.1 形状の定義
    19.2 エクスクルージョン
    19.3 リージョン
    19.4 変数
    19.5 フィーチャークエリ
    19.6 デバイスへの適応
    19.7 スティッキーな位置指定
    19.8 その他
    19.9 おわりに
    19.10 各ブラウザの対応状況

付録A 各ブラウザの対応状況(再掲)
    A.1 メディアクエリ(2章)
    A.2 セレクタ(3章)
    A.3 疑似クラスと疑似要素(4章)
    A.4 Webフォント(5章)
    A.5 テキストの効果とスタイル(6章)
    A.6 段組み(7章)
    A.7 背景画像(8章)
    A.8 ボーダーとボックスの効果(9章)
    A.9 色と不透明度(10章)
    A.10 グラデーション(11章)
    A.11 2次元の変形(12章)
    A.12 3次元の変形(13章)
    A.13 トランジションとアニメーション(14章)
    A.14 Flexboxレイアウト(15章)
    A.15 値と長さ(16章)
    A.16 グリッドレイアウト(17章)
    A.17 ブレンドモード、フィルター効果、マスキング(18章)
    A.18 CSSの将来(19章)

付録B オンラインの資料
    B.1 CSS一般に関する情報
    B.2 メディアクエリ(2章)
    B.3 セレクタ、擬似クラス、擬似要素(3章・4章)
    B.4 Webフォント、テキストの効果とスタイル(5章・6章)
    B.5 段組み(7章)
    B.6 背景画像、ボーダー、ボックスの効果(8章・9章)
    B.7 色と不透明度(10章)
    B.8 グラデーション(11章)
    B.9 2次元と3次元の変形(12章・13章)
    B.10 トランジションとアニメーション(14章)
    B.11 Flexboxレイアウト(15章)
    B.12 値と長さ(16章)
    B.13 グリッドレイアウト(17章)
    B.14 ブレンドモード、フィルター効果、マスキング(18章)
    B.15 CSSの将来(19章)

索引

コラム目次
	レスポンシブWebデザイン
	角度の単位
	利用可能なブラウザと以前の構文
	2次元変形の適用方法
	frとパーセンテージの比較