HTML5&CSS3 デザインブック SAMPLE

Chapter 1Webページにおける段組み

• 1-2ボックスを横に並べる
• • ボックスを横に並べる
  • 横に並べるボックスを変更する - BOX1&BOX2
  • 横に並べるボックスを変更する - BOX3&BOX4
  • 横に並べるボックスを変更する - BOX1～BOX4
  • 横に並べるボックスの数を変更する - BOX1～BOX3
  • 横に並べるボックスの数を変更する - BOX1～BOX4
  • COLUMNclearfixの仕組み（テキストの回り込みを解除したときの表示）
• 1-3ボックスを分割する
• • ボックスを分割する （２）
  • ボックスを分割する （３）
  • ボックスの分割数を増やす
• 1-4ボックスの横幅を指定する
• • ボックスの横幅の指定 - 2分割
  • ボックスの横幅の指定 - 3分割
  • ボックスの横幅の指定 - 7:3
  • ボックスの横幅の指定 - 2:1:1
  • COLUMN横幅の合計が100%を超えるとどうなるか
  • COLUMNカラム落ちの現象を利用するときの注意 - 100%
  • COLUMNカラム落ちの現象を利用するときの注意 - clear
  • COLUMN片方のボックスの横幅をピクセルで固定する - BOX2の横幅を固定
  • COLUMN片方のボックスの横幅をピクセルで固定する - BOX3の横幅を固定
• 1-5ボックスの並び順を指定する
• • ボックスの並び順の指定 - left
  • ボックスの並び順の指定 - right
  • ボックスの並び順の指定 - left/right
• 1-6レスポンシブWebデザインを設定する
• • レスポンシブWebデザインの基本
  • レスポンシブWebデザインの応用 - P.48
  • レスポンシブWebデザインの応用 - P.52
  • 中間のステップを追加する - BOX2とBOX3の横並びを解除
  • 中間のステップを追加する - BOXBとBOX4の横並びを解除
  • COLUMNレスポンシブWebデザインで重複した設定を１つにまとめる
  • COLUMN中間のステップをカラム落ちで実現する
  • COLUMNボックスを重ねてレイアウトする

Chapter 2Webページを作成する準備

• 2-1パーツの準備
• • 2-1-1 サイト名
  • 2-1-2 記事
  • 2-1-3 メニュー （縦並び）
  • 2-1-4 メニュー （横並び）
  • 2-1-5 コピーライト
• 2-2Webページの準備
• • sample.html
  • style.css

Chapter 3ブログ・ニュース系サイトのコンテンツページ

• 3-1レイアウトの基本構造を作る
• 3-2ボックスの中にコンテンツを入れる
• 3-3レイアウトの調整を行う
• 3-4レスポンシブWebデザインの調整を行う
• • 3-4-1 調整に必要な@mediaの設定を追加する
  • 3-4-2 ナビゲーションメニューをコンパクトにする
  • 3-4-3 サイト名と記事のタイトルをコンパクトにする
  • 3-4-4 サブメニューを２段組みにする
  • 3-4-5 レイアウト全体の横幅を固定する
• 3-5パーツの追加と修正
• • 3-5-1 Webフォントによるサイト名の表示
  • 3-5-2 記事の投稿日にアイコンを付けて表示する
  • 3-5-3 記事の分類をラベルの形で表示する
  • 3-5-4 記事に小見出しを追加する
  • 3-5-5 リストマーク付きのメニューにする
  • 3-5-6 サムネイル画像付きのメニューにする
  • 3-5-7 サムネイル画像にテキストを重ねたメニューにする
  • 3-5-8 フラットなSNSのシェアボタンを追加する
  • COLUMNシェアボタンの設定
  • 3-5-9 関連記事メニューを追加する
• 3-6ナビゲーションバーとフッターを横幅いっぱいに表示する

Chapter 4ブログ・ニュース系サイトのトップページ

• 4-1トップページの作成
• 4-2パーツの追加と修正
• • 4-2-1 ページネーションを追加する
  • 4-2-2 円形のバッジを追加する
  • COLUMNクラス名の変更やマークアップの調整

Chapter 5ビジネスサイト風のトップページ

• 5-1レイアウトの基本構造を作る
• 5-2ボックスの中にコンテンツを入れる
• 5-3レイアウトの調整を行う
• • COLUMN各ボックスに背景色を付けたデザイン
• 5-4レスポンシブWebデザインの調整を行う
• • 5-4-1 調整に必要な@mediaの設定を追加する
  • 5-4-2 ナビゲーションメニューをコンパクトにする
  • 5-4-3 日付の下にテキストが入り込まないようにする
  • 5-4-4 レイアウト全体の横幅を固定する
  • COLUMN大きい画面でもヘッダー画像を横幅いっぱいに表示する場合
• 5-5パーツの追加と修正
• • 5-5-1 サイト名を画像で表示する
  • 5-5-2 サイト名の画像を高解像度化する
  • 5-5-3 パーツを罫線で囲んだデザインにする
  • 5-5-4 SNSメニューを追加する
  • 5-5-5 吹き出しの形で補足説明を追加する
  • 5-5-6 コンテンツの概要を追加する
  • COLUMNpaddingを使った概要の間隔の調整
  • 5-5-7 ヘッダー画像にキャッチコピーを重ねる
• 5-6ナビゲーションメニューをトグル型にする
• • COLUMNクラス名の変更やマークアップの調整

Chapter 6ビジネスサイト風のコンテンツページ

• 6-1コンテンツページの作成
• 6-2パーツの追加と修正
• • 6-2-1 記事のデザインを調整する
  • 6-2-2 パンくずリストを追加する
  • 6-2-3 メニューを罫線で囲んだデザインにする
  • COLUMNマルチカラムの機能を利用した段組み

APPENDIXInternet Explorer 8に対応する

• • Chapter 3のサンプル
  • Chapter 4のサンプル
  • Chapter 5のサンプル
  • Chapter 6のサンプル