総仕上げ——1ページ、作り切る

ついに最終章です。この章では、新しいことをほとんど学びません。かわりに、これまでの全部——意味のあるHTML、ボックスモデル、Flexbox、Grid、レスポンシブ、部品——を総動員して、1枚のWebページをゼロから完成させます。

作るのは、架空のオンライン学習サービスのLP(ランディングページ)です。ヘッダーがあり、目を引くメッセージがあり、サービス紹介のカードが並び、フッターで締まる——「ちゃんとしたWebサイト」の基本形。チャプター1で「これを作れるようになる」と約束した、あのゴールです。

いきなり書かない——まず「分解」する

プロがページを作るとき、最初にやるのはコードを書くことではありません。ページを部品に分解することです。今回のLPは、上から4つのブロックでできています。

• ヘッダー(header): サイト名と、ナビゲーションメニュー。
• ヒーロー(hero): ページを開いた瞬間に目に入る、大きなメッセージとボタンの区画。
• サービス紹介(section): 3枚のカード。
• フッター(footer): コピーライト。

見覚えがありますね。ヘッダーとメニューはチャプター10(Flexbox)、カードはチャプター11、ボタンはチャプター14で、もう作っています。つまりこのLPは「新作」ではなく、あなたが持っている部品の組み立てなんです。

骨組み(HTML)から書く

チャプター1の約束——「まず構造、あとから見た目」——を最後まで守ります。まずHTMLだけで骨組みを書きます。

チャプター6で学んだ「役割のタグ」(header / main / section / footer)で全体を区切り、その中にこれまでの部品を配置しています。<nav> だけ初登場ですが、もう読めるはずです——「ナビゲーション(メニュー)のまとまり」という役割タグです。この時点でプレビューを見ると、素っ気ない縦積みの文字列のはず。それで正解です。骨組みは完成しました。

見た目を、上から順に組む

CSSは、ページの上から順に(=部品ごとに)書いていきます。一気に全部書かず、1ブロック仕上げてはプレビューで確認——これが実務でも基本のリズムです。

ヘッダー。ロゴを左、メニューを右に分ける——チャプター10で予告した space-between の出番です。