このステップの目的
ページ全体を「小さなパーツ」に分けて整理することで、あとからスタイルを当てたり、同じパーツを何度も使ったりしやすくします。
checklistやることリスト
- パーツを探そう
ページの中で「同じ形」「同じ役割」の部分を見つけます。（例：ヘッダー、メインビジュアル、カード型の紹介欄、フッター） - HTMLに名前（クラス）を付けよう
そのパーツに分かりやすい名前をつけておきます。（例：.site-header,.hero-image,.feature-card,.site-footer） - ファイルを分ける（応用）
WordPressならget_header()やget_footer()を使って、ヘッダー・フッターだけ別ファイルにすると管理が楽になります。
lightbulbどうして大事？かんたん解説
- まとめて書ける
- 同じパーツは一度だけスタイルを書けば、ページ内のすべてに反映できます。
- 見通しがよくなる
- ファイルやコードがごちゃごちゃせず、あとで見返しやすいです。
かんたんコード例
<body>
<!-- ヘッダー -->
<header class="site-header">
…ロゴやメニュー…
</header>
<!-- メインビジュアル -->
<section class="hero-image">
…大きな写真やキャッチコピー…
</section>
<!-- 紹介カード -->
<section class="features">
<div class="feature-card">…</div>
<div class="feature-card">…</div>
</section>
<!-- フッター -->
<footer class="site-footer">
…連絡先やコピーライト…
</footer>
</body>warningよくある間違い
- 同じパーツに違う名前をつけてしまう
- 後で探せなくなるので、統一した名前にしましょう。
- パーツが細かすぎる／大きすぎる
- ひとつのまとまりとして「見た目で区切れる範囲」を意識しましょう。
チェックポイント
✅ 同じ見た目の部分に同じクラス名を使っている
✅ HTMLが「パーツごと」にブロックでまとまっている
✅ CSSも「パーツ名」でスタイルをまとめている