作って学ぶ
HTML＆CSS
モダンコーディング

Pages　完成ページ

• トップページ
• コンテンツページ

Chapter 1　ヘッダー

• 両端に配置するレイアウト【Flexboxで設定するケース（１）】
  • アイテム数が３つ以上になった場合
• 両端に配置するレイアウト【Flexboxで設定するケース（２）】
  • アイテム数が３つ以上になった場合
• 両端に配置するレイアウト【CSS Gridで設定するケース】
  • アイテム数が３つ以上になった場合（１）
  • アイテム数が３つ以上になった場合（２）
  • アイテム数が３つ以上になった場合（３）
• 横幅と左右の余白【widthで調整するケース】
  • min()関数を使わない場合
• 横幅と左右の余白【paddingで調整するケース】
  • 左右の余白を固定サイズにした場合
• 横幅と左右の余白【CSS Gridで調整するケース】
  • 余白側でサイズを調整する場合
• ヘッダーを画面上部に固定するレイアウト【position:stickyで設定するケース】

Chapter 2　ヒーロー

• 縦横中央に配置するレイアウト【CSS Gridで設定するケース】
  • 縦横中央に配置するアイテムが１つだけの場合
• 縦横中央に配置するレイアウト【Flexboxで設定するケース】
  • 縦横中央に配置するアイテムが１つだけの場合
• 画像にテキストを重ねるレイアウト【背景画像で表示するケース】
• 画像にテキストを重ねるレイアウト【<img>で表示するケース】
• 画面幅に合わせて変わるフォントサイズ【clamp()で設定するケース】
  • 画面幅375～1366pxにかけてなめらかに変化させた場合
• テキストの拡大表示とアクセシビリティ
  • 拡大でフォントサイズが小さくなるケース【clamp()】
  • 拡大でフォントサイズが小さくなるケース【@media】

Chapter 3　画像とテキスト

• 画像とテキストを横並びにするレイアウト【Flexboxで設定するケース】
  • アイテムの配置を逆にする場合
• 画像とテキストを横並びにするレイアウト【CSS Gridで設定するケース】
  • アイテムの配置を逆にする場合 【order】
  • アイテムの配置を逆にする場合 【direction】

Chapter 4　記事一覧

• タイル状に並べるレイアウト【CSS Gridで設定するケース】
  • アイテムの間隔を調整する場合
  • アイテム数を５件にした場合
  • アイテム数を２件にした場合
  • アイテムの配置を指定した場合
• タイル状に並べる列の数がコンテナの横幅に応じて変わるレイアウト【CSS Gridで設定するケース】
  • アイテム数を３件にした場合【auto-fit】
  • アイテム数を３件にした場合【auto-fill】
• タイル状に並べるレイアウト【Flexboxで設定するケース】
  • アイテムの間隔を調整する場合（A）
  • アイテムの間隔を調整する場合（B）
  • アイテムの間隔を調整する場合（C）
• タイル状に並べる列の数がコンテナの横幅に応じて変わるレイアウト【Flexboxで設定するケース】
  • 余剰スペースをなくす場合

Chapter 5　フッター

• 自在に配置を変更するレイアウト【CSS Gridで設定するケース】
  • grid-template-columnsとgrid-template-rowsを省略した場合
  • 配置をエリアでコントロールする場合
  • 空行を入れて余白サイズを大きくする場合
• 自在に配置を変更するレイアウト【Flexboxで設定するケース】
• 中身に合わせたサイズで横並びにするレイアウト【Flexboxで設定するケース】
  • 必要に応じて折り返しを入れる場合
  • 中央揃えにする場合
• 中身に合わせたサイズで横並びにするレイアウト【CSS Gridで設定するケース】
  • 必要に応じて折り返しを入れる場合
• クリッピングパスで切り抜く【clip-path】
  • 六角形に切り抜く

Chapter 6　記事

• 記事本文に段落以外の要素を追加したときの表示を確認してみる（STEP 6-8）
• 記事本文のレイアウト【marginで設定するケース】
  • ブラウザ標準の上下マージンで画像を挿入した場合
  • 画像の上下に50ピクセルの余白を入れた場合
• 記事本文のレイアウト【CSS Grid / Flexboxで設定するケース】
  • CSS Gridで設定した場合
  • Flexboxで設定した場合
• レスポンシブイメージ【<img>のsrcset/sizes属性】
• レスポンシブイメージ【<picture>とWebP】

Chapter 7　プラン＆フッター

• カード型UIのレイアウト【CSS Gridで設定するケース】
  • カードの数を変えても対応できるようにする場合
  • 複数行でレイアウトする場合
• カード型UIのレイアウト【Flexboxで設定するケース】
  • カードの数を変える場合
  • 複数行でレイアウトする場合
• カードの中身を上下に揃えて配置するレイアウト【Flexboxで設定するケース】
• カードの中身を上下に揃えて配置するレイアウト【CSS Gridで設定するケース】
• 画像の遅延読み込み【<img>のloading属性】

Chapter 8　ナビゲーション

• オーバーレイの形で表示するレイアウト【positionで設定するケース】
  • Aの場合
  • Bの場合
• ハンバーガーメニューのボタンのアニメーション
  • Hamburgers
• 各種オンラインチェックツール
  • モバイルフレンドリーテスト
  • PageSpeed Insights
  • HTMLの文法チェック

PDF　簡易リファレンス

• コンテナクエリ
• Flexboxの基本
• CSS Gridの基本
• CSS Gridの基本 【３列×２行】