今回作ったもの
バラバラに並んだカフェページのHTMLを、役割に合わせたタグでグループ化しました。
学んだポイント
headerとfooterは、ページの始まりと終わりを表すタグです。sectionは、見出しを持つ内容のまとまりに使います。divは、見た目やレイアウトを整える入れ物として使います。
ハンズオンを再現してみよう
STEP 1：作業前の表示を確認する
配布用ファイルを展開します。
index.htmlをLive Serverで開きます。
見出し・文章・画像が上から順に並び、ページの見た目が整っていないことを確認します。
style.cssは完成しているため、今回は編集しません。
STEP 2：ヘッダーを作る
.logoと.nav-listを<header class="header">で囲みます。
保存すると、ロゴとナビゲーションが横並びになります。
STEP 3：HEROとABOUTをsectionで囲む
キャッチコピー、説明文、ボタンを<section class="hero">で囲みます。
ABOUTの見出し、画像、文章は<section class="about">で囲みます。
保存するたびに、背景色や余白が変わることを確認します。
STEP 4：MENU全体をsectionで囲む
MENUの見出しから3枚目のカードの文章までを、<section class="service">で囲みます。
この段階では、カードはまだ縦に並んでいます。
STEP 5：カードをdivでグループ化する
3枚分のカード全体を<div class="card-list">で囲みます。
画像・商品名・説明文の1セットを、<div class="card">で囲みます。
3枚すべてを囲むと、カードが白い箱に入り、横並びになります。
STEP 6：フッターを作る
ページ一番下の.copyrightを<footer class="footer">で囲みます。
保存すると、コピーライトの背景と余白が整います。
セルフチェック
- HERO、ABOUT、MENUが別々の
sectionになっている .card-listの中に3つの.cardが入っている- 開きタグと閉じタグの数が合っている
- 答え合わせ用と同じ見た目になっている
参加できなかった方へ
まずは配布用のindex.htmlを開き、グループ化されていない状態を確認しましょう。
次に、header、section、div、footerを1つずつ追加しましょう。
表示が整わないときは、答え合わせ用のindex_answer.htmlと見比べましょう。