フレキシブルボックスで作る HTML5&CSS3 レッスンブック SAMPLE

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

• 1-3 HTMLの基本設定
• 1-4 ブロックとパーツを追加する

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

• 2-3 CSSを用意する
• 2-4 ブロックの背景に色を付ける
• 2-5 ブロック内に余白を入れる

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

Chapter 3 記事の見栄えを整える

• 3-1 フォントの設定を行う
• 3-2 記事をカード型のデザインにする
• 3-3 画像を追加する
• 3-4 アイコンフォントを利用する

Chapter 4 ヘッダーとフッターの見栄えを整える

• 4-1 Webフォントを利用する
• 4-2 リンクを設定する
• 4-3 ナビゲーションメニューを追加する
• 4-4 ナビゲーションメニューのリンクを横に並べる

Chapter 5 サブメニューの見栄えを整える

• 5-1 サブメニューを追加する
• 5-2 サブメニューをカード型のデザインにする
• 5-3 プロフィールの見栄えを整える
• 5-4 注目記事メニューの見栄えを整える

Chapter 6 レスポンシブにする

• 6-3 パーツの横幅を調整する
• 6-4 記事の見栄えを整える
• 6-5 サイト名とナビゲーションメニューを両端に並べる
• 6-6 モバイル版とPC版のレイアウトを切り替える
• 6-7 より大きい画面での見栄えを整える
• 6-8 テキストの自動拡大機能を無効化する

Chapter 7 トップページを作成する

• 7-1 トップページの作成
• 7-2 ブロックとパーツを追加する
• 7-3 ヒーローイメージの画像を表示する
• 7-4 ヒーローイメージのテキストの見栄えを整える
• 7-5 リンクをボタンの形にする
• 7-6 記事一覧の記事を２列に並べたレイアウトにする
• 7-7 トップページをレスポンシブにする

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

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

記事のデザインアレンジ

• 画像にテキストを回り込ませたレイアウト
  （floatを「left」と指定した場合）
• 画像にテキストを回り込ませたレイアウト
  （floatを「right」と指定した場合）
• ネガティブマージンで画像の横幅を大きくする