関連サイト
出版社による関連ページが公開されています。
内容紹介
CSS3の機能を体系的にまとめ、サンプルを通してどのように機能するかを理解できる、CSS3のリファレンス＆活用本。
HTML5やスマートフォンの普及に合わせて、CSS3の活用も広がっています。
角丸や影、グラデーションなどの装飾はCSS3で設定するのが主流となり、Webフォントを活用してタイポグラフィを大胆に取り入れたデザインも増えています。アニメーションやトランスフォーム、縦書きなど、CSS3で設定できる表現は幅広く、アプリや電子書籍などの開発においても必要不可欠なものとなっています。
本書は基本、レイアウト、カラーアレンジと背景・罫線のデザイン、コンテンツのデザイン、特殊効果、インターフェイスに章立てし、主要なCSS3のモジュールやプロパティについて、まとめています。
また、新しい機能も次々と提案され、CSS3やCSS4として発展を続けています。これらについても、なるべく取り上げ、解説を行いました。
たとえば、2011～2012年の2年間に追加された主な機能だけでも、
- 条件規則
- ビューポートの設定
- リージョンレイアウト
- エクスクルージョン（除外）
- ボックスの形状の指定
- レスポンシブイメージ
- ハイフネーション
- マスク
- フィルタ
などが挙げられます。
機能ごとに、詳しい解説や使用サンプルを掲載。また、最新の主要ブラウザ(Firefox、Safari、Chrome、Opera、Internet Explorer)とスマートフォン(iOS のMobile Safari、Androidの標準ブラウザ)での対応状況も記載しています。
CSS3を体系的に掴み、その「使いどころ」を体得できる、Web制作者/デザイナー必携の1冊です。
【備考】
本書は『CSS3 スタンダード・デザインガイド』（2011年5月刊）を、CSS3の最新状況、および最新ブラウザ環境に対応させて、改訂増補したものです。
書誌情報
- 著者: エ・ビスコム・テック・ラボ
- 発行日: 2013-05-22
- 最終更新日: 2013-05-22
- バージョン: 1.0.0
- ページ数: 320ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
Webデザイナー、Web制作者
著者について
エ・ビスコム・テック・ラボ
さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、CD-ROM、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。
主な編著書： 『HTML5 スタンダード・デザインガイド』マイナビ刊
『スマートフォンサイトのためのHTML5+CSS3』同上
『XHTML/HTML+CSS スーパーレシピブック』同上
『WordPress3 サイト構築スタイルブック』同上
『WordPress3 デザイン＆カスタマイズ スタイルブック』同上
『Movable Type サイトデザイン＆レシピ事典』同上
『Dreamweaver+HTML5&CSS3レッスンブック』ソシム刊
『HTML5 & CSS3ステップアップブック』同上
『WordPressデザインブック3.x対応』同上
『HTML/XHTML＆スタイルシート レッスンブック』同上
『HTML/XHTML＆スタイルシート デザインブック』同上
目次
Chapter1 基本
文法
- スタイルシートの利用
セレクタ
- セレクタ
メディアクエリ
- メディアクエリ
条件規則
- 対応状況の判別
デバイス
- ビューポートの設定
ページメディア
- ページメディアの設定
ページ分割
- 改ページの指定
- 行の孤立の回避
Chapter2 レイアウト
ボックス
- ボックスの種類
- マージンの挿入
- パディングの挿入
- 横幅と高さの指定
- 横幅と高さの最小値・最大値
- ボックスの配置と回り込み
- 回り込みの解除
- オーバーフローしたコンテンツの表示
- 構成したボックスの表示・非表示
フレキシブルボックスレイアウト
- フレキシブルボックスレイアウト
- フレックスアイテムの可変設定
- フレックスアイテムの表示順
- フレキシブルボックスレイアウトの方向と改行
- フレキシブルボックスレイアウトの配置
グリッドレイアウト
- グリッドレイアウト
マルチカラムレイアウト
- マルチカラムレイアウト
- マルチカラムの段の間隔
- マルチカラムの段の区切り線
- マルチカラムの段にまたがる表示
- マルチカラムの段のバランス
- マルチカラムの改段・改ページ
リージョンレイアウト
- リージョンレイアウト
ポジションレイアウト
- ポジションレイアウト
- ボックスの重なり順
- コンテンツの表示範囲
Chapter3 カラーアレンジと背景・罫線のデザイン
カラー
- 文字の色
- ボックスの透明度
背景と罫線
- 背景色
- 背景画像
- 背景画像の表示スタイル
- 背景画像の表示位置
- 背景画像の固定対象
- 背景の表示エリア
- 背景画像の表示位置の基点
- 背景画像の表示サイズ
- 背景のデザイン
- 罫線の表示
- 角丸の表示
- 画像を使った罫線の表示
- 書字方向に合わせた罫線の表示
- 分断されたボックスの表示スタイル
- インライン要素の背景画像の表示
- ボックスのドロップシャドウ
画像
- 線形グラデーションの表示
- 円形グラデーションの表示
- 線形グラデーションの繰り返し
- 円形グラデーションの繰り返し
- グラデーションの表示
- HTML要素の画像化
- ２枚の画像の合成
- レスポンシブイメージ
- ボックスに合わせた画像サイズの調節
- ボックス内での画像の表示位置
Chapter4 コンテンツのデザイン
フォント
- 文字サイズの指定
- 文字の太さ
- 斜体
- 字形
- OpenTypeフォントの字形
- フォントの指定
- Web フォントの利用
- 文字のデザイン
- 文字サイズの自動調節
- iOSの文字サイズの自動調節
テキスト
- 字形の変換
- 改行コード・タブ・スペースの表示
- タブ幅の指定
- 禁則処理のルール
- 自動改行のルール
- 長い単語の改行ルール
- ノーブレークスペースの処理
- ハイフネーション
- ハイフネーションの制限
- 行揃えの指定
- 両端揃えの調節方法
- 最終行の行揃え
- 単語の間隔
- 文字の間隔
- １行目のインデント
テキストの装飾
- 下線・上線・取り消し線
- 下線の表示位置
- 圏点の表示
- 圏点の表示位置
- 文字のドロップシャドウ
- 文字のアウトライン
- 文字の色
- 欧文のレンダリング処理
- 文字のアンチエイリアス処理
行のレイアウト
- 行の高さの調節
- 垂直方向の位置揃え
書字方向
- 書字方向の指定
- 双方向アルゴリズムの変更
- 縦書き・横書きの指定
- 縦書きの中の文字の向き
ルビ
- ルビの表示位置
- ルビの位置揃え
リスト
- リストマークのデザイン
コンテンツの挿入と置換
- コンテンツの挿入・置換
- カウンターの挿入
- 引用符の種類
テーブル
- テーブルのキャプションの表示位置
- テーブルのレイアウト方法
- テーブルの罫線の表示
- テーブルの罫線の間隔
- テーブルの空セルの表示
Chapter5 特殊効果
トランスフォーム
- 2Ｄトランスフォーム
- 2Ｄトランスフォームの原点
- 3Ｄトランスフォーム
- 3Ｄトランスフォームの原点
- 子要素の3Ｄトランスフォーム
- 子要素の透視投影
- 投影中心のｘ軸・y軸方向の位置
- 裏面の表示
トランジション
- トランジション
アニメーション
- アニメーション
- アニメーションの再生・一時停止
- ディレイ中と再生後の表示
マスク
- マスク
- 分割画像によるマスク
- 図形によるマスク
フィルタ
- フィルタ
- 鏡像
Chapter6 インターフェース
インターフェース
- インターフェースセレクタ
- アウトラインのデザイン
- ボックスの大きさの算出方法
- ボックスのリサイズ
- テキストがオーバーフローしたときの表示
- カーソルの形状
- iOSのポップアップメニューを隠す
- ハイライト表示のカスタマイズ