1. 書籍情報

CSS3 スタンダード・デザインガイド

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

CSS3 スタンダード・デザインガイド

2011年06月 毎日コミュニケーションズ刊
B5変型 320ページ / 978-4839938291

はじめに

CSS3はCSS2.1に新しい機能を追加したもので、これまでは画像やJavaScriptを利用して表現するしかなかったWebページのデザインを、スタイルシートだけで簡単に設定できるようになっています。たとえば、CSS3で追加された主な機能には以下のようなものがあります。

こうした機能は主要なブラウザでサポートされ、Webページでの利用も広がっています。また、HTML5との組み合わせや、Webアプリ、電子書籍などの開発においても必要不可欠なものとなりつつあります。

そこで、本書ではCSS2.1から引き継がれた機能も含めて、CSS3の機能を体系的にまとめ、サンプルを通してどのように機能するかを習得できるように構成しました。

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

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

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

もくじ

Chapter 1 基本

セレクタ
   セレクタ
   iOSのポップアップメニューを隠す
   ハイライト表示の指定
文法
   スタイルシートの種類
メディアクエリ
   メディアクエリ
ページメディア
   ページメディアの設定
   改ページの指定
   行の孤立の回避

Chapter2 レイアウト

ボックスモデル
   ボックスの種類
   マージンの挿入
   パディングの挿入
   横幅と高さの指定
   横幅と高さの最小値・最大値
   ボックスの配置と回り込み
   回り込みの解除
   オーバーフローしたコンテンツの表示
   表示の有無
フレキシブルボックスレイアウト
   フレキシブルボックスレイアウト
グリッドレイアウト
   グリッドレイアウト
マルチカラムレイアウト
   マルチカラムによる段組み
   マルチカラムの段の間隔
   マルチカラムの段の区切り線
   マルチカラムの段にまたがる表示
   マルチカラムの段のバランス
   マルチカラムの改段・改ページ
ポジショニング
   ボックスの表示位置の指定
   ボックスの重なり順

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

カラー
   文字の色
   ボックスの透明度
背景と罫線
   背景色
   背景画像
   背景画像の表示スタイル
   背景画像の表示位置
   背景画像の固定対象
   背景の表示エリア
   背景画像の表示位置の基点
   背景画像の表示サイズ
   背景のデザイン
   罫線の表示
   角丸の表示
   画像を使った罫線の表示
   書字方向に合わせた罫線の表示
   ボックスが途切れるときの表示
   インライン要素の背景画像の表示
   ボックスのドロップシャドウ
画像
   線形グラデーションの表示
   円形グラデーションの表示
   線形グラデーションの繰り返し
   円形グラデーションの繰り返し
   グラデーションの表示
   HTML要素の画像化
   ボックスに合わせた画像サイズの調節
   ボックス内での画像の表示位置

Chapter4 コンテンツのデザイン

フォント
   文字サイズの指定
   文字の太さ
   斜体
   字形の切り替え
   フォントの指定
   Web フォントの利用
   文字のデザイン
   文字サイズの自動調節
   Mobile Safariの文字サイズの自動調節
テキスト
   字形の変換
   改行コード・タブ・スペースの表示
   タブ幅の指定
   禁則処理のルール
   自動改行のルール
   長い単語の改行ルール
   ノーブレークスペースの処理
   行揃えの指定
   両端揃えの調節方法
   最終行の行揃え
   単語の間隔
   文字の間隔
   数字やアルファベットの前後の余白
   1行目のインデント
   下線・上線・取り消し線の表示
   下線の表示位置
   圏点の表示
   圏点の表示位置
   文字のドロップシャドウ
   文字のアウトライン
   文字の色
   欧文のレンダリング処理
   文字のアンチエイリアス処理
行のレイアウト
   行の高さの調節
   インライン要素の位置揃え
書字方向
   書字方向の指定
   双方向アルゴリズムの変更
   縦書き・横書きの指定
ルビ
   ルビの表示位置
   ルビの位置揃え
リスト
   リストマークのデザイン
コンテンツの挿入と置換
   コンテンツの挿入・置換
   カウンターの挿入
   引用符の指定
   画像の切り抜き
テーブル
   テーブルのキャプションの表示位置
   テーブルの表示方法
   テーブルの罫線の表示
   テーブルの罫線の間隔
   テーブルの空セルの表示

Chapter5 特殊効果

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

Chapter6 インターフェース

インターフェース
   インターフェースセレクタ
   アウトラインのデザイン
   ボックスの大きさの算出方法
   ボックスのリサイズ

APPENDIX

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

プロパティ&ブラウザ対応一覧