# ホームページ制作初級者｜CSSで色・文字・余白を整える

## 学習目標
セレクターとプロパティ、ボックスモデルを理解し、読みやすい一貫した見た目へ整える。

## 1. CSS接続の確認記録

課題：styles.cssの背景色を一箇所変更し、読み込みの有無を確認する。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：

## 2. 共通スタイル

課題：menu-cardというclassを複数要素へ付け、一つの規則で同じ見た目にする。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：

## 3. 文字と色の設計表

課題：本文の行間を変えて比較し、価格と説明を文字の重みや配置でも区別する。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：

## 4. ボックスモデルの図

課題：カードのpaddingとmarginを別々に変え、要素パネルで領域を観察する。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：

## 5. ページのスタイルシート

課題：メニューをGridで並べ、本文全体へmax-widthと中央の余白を設定する。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：

## 6. 整えたHTMLとCSS

課題：同梱のCSSを読み、共通色と余白を変えて全体へ反映する。キーボードでもリンクを追う。

前提・環境：

手順：

期待結果：

実際の結果：

根拠・未確認：

レビューと修正：