外間かおり「HTML&CSS3 レイアウトブック」

CONTENTS
本書の構成
サンプルファイルのダウンロード

chapter1 要素の指定と基本デザイン
1段組の内容と要素のマークアップ
階層をdivタグでマークアップする
ページ全体と見出しをCSSで指定する
コンテンツのCSS指定
ナビゲーションメニューのCSS指定
各ボックスのクラス名と対応するHTML5の新要素
文字の表示スタイルを変えるプロパティ
borderの種類と例
フロートのクリアについて

chapter2 1段組レイアウト
可変幅レイアウト
固定幅レイアウト
ヘッダー画像入り固定幅レイアウト
ヘッダー画像入り可変幅レイアウト
CSSのセレクタについて

chapter3 2段組レイアウト
2段組にするページの構成と基本デザイン
固定幅2段組レイアウト
サイドバー固定幅2段組レイアウト
リストマークの値
リスト記号の画像とテキストの上下が合わない場合
CSSの優先順位
CSSのショートハンド

chapter3 3段組レイアウト
固定幅3段組レイアウト
中央が可変幅の3段組レイアウト
コメントの利用方法
特殊な文字を表示する
インライン表示される要素とボックス表示される要素

chapter5 トップページレイアウト
1段組のトップページ
上1段・下2段組のトップページ
上1段・下3段組のトップページ
上2段・下3段組のトップページ
コンテンツと背景をページ中央に配置するには
SNSの情報をWebページに組み込む
HTMLの新しい規格HTML5とは

chapter6 CSS3を使ったボックスレイアウト
幅固定のフレキシブルボックスを指定する
幅可変のフレキシブルボックスを指定する
ボックスの並ぶ方向を変える
両サイドバーの3段組レイアウトにする
グリッドレイアウトでボックスを配置する
ベンダーフレフィックスとは
商品一覧フレキシブルボックスレイアウトで配置する

chapter7 CSS3を使ったマルチカラムレイアウト
幅固定レイアウトのマルチカラム
幅可変レイアウトのマルチカラム
段間と区切り線を設定する
見出しが複数の段落をまたがるようにする
IEを振り分けるコンディショナルコメント
段数とコラム幅を同時に指定するには
擬似要素のCSSでの記述
古いIEでもCSS3を使えるようにするCSS3PIE

chapter8 CSS3を使ったボックスのデザイン
背景色を半透明にする
ボックスに影を付ける
ボックスを角丸にする
ボックスの周りを画像ボーダーで囲む
アコーディオンで開くボックスにする
タグで切り替えるボックスにする
CSS3で追加された背景色の値
ボックスシャドウのバリエーション
角丸ボーダーの繰り返し方法
border-imageの書式について
transitionを利用したアニメーション指定

chapter9 CSSを使ったテキストコンテンツのデザイン
先頭の1文字をデザインする
ルビをつける
縦書きにする

chapter10 CSSを使ったタイトルデザイン
Webフォントを利用したタイトルテキスト
@font-faceで指定するWebフォント
タイトルテキストに影を付ける
タイトルに複数の背景画像を指定する
タイトルの背景をグラデーションにする
タイトルのテキストを1文字ずつ傾ける
テキストシャドウのバリエーション
テキストに輪郭線を付ける(Chrome、Safariのみ)
テキストを背景画像で塗りつぶす(Chrome、Safariのみ)
CSS3から追加されたbackgroundのプロパティ
グラデーションのバリエーション
transformプロパティを利用した変形

chapter11 ボタンとナビゲーションのデザイン
立体感のあるボタンを作る
ロールオーバーでアニメーションするボタン
ナビゲーションバーを作る
プルダウンメニュー付きナビゲーションバー
ドック風メニューを作る
infiniteとaltermateについて

chapter12 CSSを使った画像のデザイン
フォトギャラリーを作る
画像の縁をイメージボーダーにする
ChromeとSafariにのみ有効な画像のスタイル

chapter13 テーブルのデザイン
角丸のテーブルを作る
見出し行を固定したテーブルを作る
セルを密着させるプロパティ
グラデーション作成に便利なサイト

chapter14 CSSを使ったフォームのデザイン
美しく使いやすいフォームをデザインする
ChromeとSafari用にフォームパーツを自由にデザインする

chapter15 デバイスごとにデザインを変更する
デザインを切り替える仕組みを作る
スマートフォン用のデザインを作成する
タブレット用のデザインを作成する
PC用のデザインを作成し表示を確認する
デバイスの解像度とCSSピクセルの比率
スマートフォン用のページでアドレスバーの表示を消す
スマートフォン用に小さい画像を読み込む
スマートフォンでテロップを流す

CSS プロパティ INDEX
HTML INDEX
キーワード INDEX

コメント