実務でコーディングするときは

• まずHTMLで全体（またはキリのいいブロックまで）を書き上げる
• CSSを付けつつデザイン通りに調整していく

という順でコーディングするので、今回はできればHTMLを書き上げてからCSSを書くという手順で挑戦してみてください！

• 完成形をイメージしてブロックを作る
• どこに何のスタイルを当てるか設計しつつ書く
• レスポンシブも見越してブロックを整理する

これをクセづけるとコードが綺麗になっていくので、レスポンシブにする時なども軽く追記するだけで済むようになります！

まずはセクションごとに分けてみよう

まずは大雑把に構成を掴めるとサイトのまとまりが分かりやすくなります。サイトを見た時に1〜6の見えない四角のエリアを意識しましょう！最初は見えないかもしれませんが、意識し続けているとそのうち見えるようになっていきますよ！

1. ヘッダー
2. メインビジュアル（キービジュアル）
3. アバウトセクション
4. メニューセクション
5. ショップセクション
6. フッターセクション

セクションの中身を分けてみよう（例：ヘッダーの場合）

セクションの関係が大まかに掴めたら、各セクションの中身を見ていきましょう！例えばヘッダーを見てみると、左側にロゴ、右側にメニューが並んでいることが分かります。さらに幅は100%ではなく画面の中央に止まっているので幅を決めるための枠があるようです。これを四角の枠で表すと次のようになります。

ここまでイメージできたら、あとはそのままHTMLに落とし込んでいくだけです！

セクションの中身を分けてみよう（例：アバウトセクションの場合）

アバウトセクションの場合は、見出しがあって、画像が左、テキストが右の横並びのコンテンツがあります。これを図で表現すると以下の通りです。

この構造を頭に入れつつHTMLがコーディングできるようになると、かなりコーディングしやすくなるはずです！

他のコンテンツもどういったパーツの集まりになっているかご自身でも確認してみてください。ここまでできれば、もう8割は完成したも同然です！設計書がある状態なので、あとは図面通りに作るだけ。

このレイアウトを考える作業は、実務でも重要な行程です。ぜひ、今のうちから手を動かす前に「パーツ分け」をするクセを付けましょう！

いつも通勤中に見てるサイトを頭の中で分解するとかでもOK。それだけでコーディング力は爆上がりします！スキマ時間でもできる練習なので、ぜひやってみて下さい。

DAY4で紹介したEmmetですが、みなさんちゃんと使えてますか？

改めて言いますが、Emmetはコーディングに欠かせません！！

Emmetの記法を使って、どんどんコーディングを効率化して行きましょう。「まだいまいち使えてない」という方は、↓の記事で復習してみてください！

• 「はじめて」でも簡単！Emmetの使い方とよく使うパターン集
• Emmet Cheat Sheet

コーディングの効率化には、VS Codeのショートカットキーも欠かせません！こういうのとかね↓

解説動画の中でもマルチカーソル（command+D）や行移動（option+↑↓キー）など使ってますが、頻繁に行う操作はショートカットキーを使えるようになりましょう。

VS Code の便利なショートカットキー

↑の参考記事はWindows用に書かれているので、Macユーザーは「Ctrl」を「Command」に読み替えればOK。

また、ショートカットキーを覚える時には、ショートカットキーの一覧を”すぐ”に見られる状態にしておくのがオススメです。

例えば、ショートカットキーのチートシートを

• パソコンのデスクトップの壁紙にする
• 印刷してデスクの目につくところに貼っておく

など工夫をしましょう。

VS Codeのショートカットキー一覧は「ヘルプ→キーボードショートカットキーの参照」から確認できますが少々使いづらいです。

そこで「VS Code キーボードショートカット おすすめ」などのキーワードで検索して、生産性が上がりそうなショートカットキーを調べてみましょう！

参考になりそうなものも貼っておきますね。

• Windows用のキーボードショートカット一覧
• MacOS用のキーボードショートカット一覧