総合 カフェLPを1枚再現

師範 / 目安 45分

陽葵さんが、丸めた大きな紙を広げました。開店告知のラフです。「グランドオープンの特設ページ! ヒーローも、メニューも、料金も、フォームも、フッターも、全部1枚に。あなたしかいない!」

道場の10問目、最後の依頼です。

ここまでで、カード、ナビ、料金表、ヒーロー、グリッド、フォーム、フッター、スマホ対応、変数と、部品を1つずつ作ってきました。最後の課題は、その部品を1枚のページに組み上げることです。新しく覚える書き方はありません。持っている部品を、正しい順番で積めるかだけを問います。

1枚のページを一息に書こうとすると必ず崩れます。まず section を空のまま5つ並べて、上から順に中身を入れてください。1つのセクションが仕上がってから次に進む。これが一番速い道です。

並べる順番にも理由があります。ヒーローは「どんな店か」を一目で伝える場所、メニューと料金は「何が食べられて、いくらか」、フォームは「行きたくなった人の受け皿」、フッターは「で、どこにあるの」の答えです。お客さんが知りたくなる順に並んでいるから、この形が定番になっています。

色は問9でやったとおり :root の変数にまとめてください。5つのセクションで同じ色を何度も使うので、値で散らかすと後から効いてきます。

完成条件

次の5つのセクションを、この順で1ページに置いてください。

• ヒーロー — 店名の h1、キャッチコピー、予約ボタン。背景色または背景画像を敷き、中身を中央寄せにする
• メニュー — .menu-grid にカードを6枚以上。grid で複数列に並べる
• 料金 — table でモーニング・ランチ・ディナーの3行。見出し行 (th) に背景色を付ける
• フォーム — form の中に入力欄と送信ボタン。label と input を for と id で対応させる
• フッター — 3つのブロックを横並びにし、濃い背景色を敷く

さらに、色は :root の変数にまとめ、@media (max-width: 768px) でメニューを1列に上書きしてください。

進め方

白紙から書いてください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

これで10問すべてです。陽葵さんは出来上がったページを最後まで指でなぞって、それから深く息を吸って言いました。「ハレノヒ珈琲、開店です!!」

師範が奥から一枚の紙を持って出てきます。そこには HTML/CSS道場・師範代を允許する と書かれていました。カード1枚から始めて、いまあなたは1枚のラフを、白紙から丸ごとページに起こせます。

1. ヒーロー・メニュー・料金・フォーム・フッターの5つのセクションを、その順で1ページに置く
2. ヒーローは背景を敷いて中身を中央寄せにし、店名の h1・キャッチコピー・予約ボタンを入れる
3. .menu-grid にカードを6枚以上置き、grid で複数列に並べる
4. 料金は table で3行、見出し行 (th) に背景色を付ける
5. form に label と input を for と id で対応させて置き、送信ボタンを入れる
6. footer は3つのブロックを横並びにし、濃い背景色を敷く
7. 色は :root の変数にまとめ、@media (max-width: 768px) でメニューを1列に上書きする