世界的ベストセラー書“The Book of CSS3”待望の邦訳。本書では難解なCSS3仕様を平易な言葉で解説し、一般に広く使われているモダンなブラウザとCSS3で何ができるかを明らかにしながら数年先を見越した最先端のWebデザインを追求します。良いデザインの原則に焦点を当て、実践的なサンプルを豊富に使って解説しているので、読者は無理なくCSSのスキルを向上できます。ウェブ開発の中でスタイルを設計しながらどんなデザインにしてやろうかと考える開発者は必読。気絶するほど美しいリッチなウェブを作れるようになります。うまく魅せないCSSなんてCSSじゃない!
CSS3開発者ガイド 第2版
―モダンWebデザインのスタイル設計
Peter Gasston 著、牧野 聡 訳
- TOPICS
- Web , HTML/CSS
- 発行年月日
- 2015年07月
- PRINT LENGTH
- 352
- ISBN
- 978-4-87311-725-6
- 原書
- The Book of CSS3, 2nd Edition
- FORMAT
- PDF EPUB
関連ファイル
目次
目次 賞賛の声 はじめに まえがき 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とパーセンテージの比較