CSSグリッドで作る HTML5&CSS3 レッスンブック SAMPLE

Chapter 1 HTMLでマークアップする

• 1-3 HTMLの基本設定
• 1-4 パーツの記述

※ブラウザの画面サイズを確認する

Chapter 2 CSSでレイアウトをはじめる

• 2-2 CSSを用意する
• 2-3 グリッドを作成する
• 2-4 パーツの配置を調整する

Chapter 3 パーツの見栄えを整える - 基本

• 3-1 フォントの設定を行う
• 3-2 ヘッダー（サイト名）の見栄えを整える
• 3-3 ナビゲーションメニューのリンクを横に並べる
• 3-4 ナビゲーションメニューのリンクの見栄えを整える

Chapter 4 パーツの見栄えを整える - ボックス

• 4-1 ヒーローイメージの大きさや明るさを調整する
• 4-2 タイトルの見栄えを整える
• 4-3 サブタイトルの見栄えを整える
• 4-4 リンクをボタンの形にする

Chapter 5 パーツの見栄えを整える - 応用

• 5-1 記事一覧を２列にレイアウトする
• 5-2 フッターをバーの形にする
• 5-3 Webフォントを利用する
• 5-4 文法チェックを行う

Chapter 6 レスポンシブにする

• 6-3 PC版のグリッドを作成する
• 6-4 パーツの配置や見栄えを整える
• 6-5 より大きい画面での見栄えを整える
• 6-6 モバイル版とPC版のレイアウトを切り替える

グリッドの活用とレイアウトのアレンジ

• ６分割にした列の活用（１）：
  タイトルとサブタイトルのバランスを変えたもの
• ６分割にした列の活用（２）：
  半透明な黒色のボックスを追加したもの
• 行のライン名の活用：
  緊急通知を追加したもの
• 自動配置の活用：
  記事一覧に記事を追加したもの

Chapter 7 ページを増やす

• 7-1 記事ページを作成する
• 7-2 記事とメニューを追加する
• 7-3 記事の見栄えを整える
• 7-4 アイコンフォントを利用する
• 7-5 サブメニューの見栄えを整える
• 7-6 レスポンシブにする
• 7-7 テキストの自動拡大機能を無効化する
• 7-8 サイト名にトップページへのリンクを設定する

記事のデザインアレンジ

• 画像にテキストを回り込ませたレイアウト
  （floatを「left」と指定した場合）
• 画像にテキストを回り込ませたレイアウト
  （floatを「right」と指定した場合）
• 背景に透かし画像を入れたデザイン

Chapter 8 テーブルとフォームを作成する

• 8-1 テーブルを作成する
• 8-2 投稿フォームを作成する
• 8-3 投稿フォームの見栄えを整える