本文へスキップします。

【参】モーダルJS:読み込み
書籍DB:詳細

CSS3開発者ガイド モダンWebデザインのスタイル設計(第2版)

CSS3開発者ガイド モダンWebデザインのスタイル設計(第2版)

  • 著者Peter Gasston牧野 聡
  • 定価3,520円 (本体3,200円+税)
  • 判型B5変
  • 352頁
  • ISBN978-4-87311-725-6
  • 発売日2015/07/03
  • 発行元オライリー・ジャパン

CSS3の最新技術動向を知る!

世界的ベストセラー書“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とパーセンテージの比較