ページの構造と実装順を考えよう
コードを書く前に、完成画面をHTMLの大きなまとまりへ分けます。この工程を行うと、どこから実装すればよいか判断しやすくなります。
このLessonのゴール
- 完成画面をセクションに分けられる
- 内容に合ったHTML要素を選べる
- HTMLからJavaScriptまでの実装順を決められる
画面を箱として考える
最初は文字サイズや余白を見ず、内容のまとまりを探します。
body
├── header
│ ├── logo
│ └── nav
├── main
│ ├── hero
│ ├── about
│ ├── menu
│ ├── news
│ ├── shop
│ └── contact
└── footer
headerやmainはページの役割を表すHTML要素です。見た目を作るためだけに要素を選ばないようにします。
class名を考える
class名は、色や位置よりも役割が分かる名前にします。
| 役割が分かる名前 | 変更に弱い名前 |
|---|---|
.hero-title | .large-text |
.menu-card | .white-box |
.shop-information | .right-area |
デザインが変わっても役割が変わらなければ、class名を変更せずに使えます。
実装する順番
この課題では次の順番で進めます。
- HTMLだけで全コンテンツを書く
- Reset CSSと共通CSSを適用する
- 上から順にPC版を整える
- スマートフォン版を整える
- JavaScriptで操作を加える
- 複数の画面幅で確認する
CSSを書きながらHTMLを何度も作り直すより、先に内容と構造を完成させると作業を整理できます。
実際に試してみよう
紙またはテキストファイルへ、8つのセクションと使うHTML要素を書き出してください。各セクションへ必要なclass名も1つ以上考えます。
完了条件
header、main、footerの関係を整理したmain内のセクションを順番に書き出した- 見た目ではなく役割を表すclass名を考えた
- HTMLから確認までの実装順を説明できる
まとめ
実務コーディングでは、書き始める前の分解が重要です。次のLessonでは、この設計をもとにHTML全体を組み立てます。