カフェのメニューページを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

HTMLとCSSの2ファイルを作ろう

index.html と style.css を作成し、CSSを読み込みましょう。

💡 ヒント
index.html と style.css を同じフォルダに作り、<link> タグでCSSを読み込みます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Cafe SWP</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

  </body>
</html>
2

ヘッダーを作ろう

<body> の中に、カフェ名とキャッチコピーのヘッダーを作ってください。

💡 ヒント
<div class="header"> の中に <h1> でカフェ名、<p> でキャッチコピーを書きます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<div class="header">
  <h1>☕ Cafe SWP</h1>
  <p>おいしいコーヒーとスイーツのお店</p>
</div>
3

メニューカードのHTMLを書こう

メニューの入れ物 <div class="menu"> の中に、4つのメニューカードを書いてください。メニュー内容は自由に変えてOKです。

💡 ヒント
<div class="menu"> の中に <div class="menu-card"> を4つ並べます。各カードに商品名（h3）・価格・説明を書きます。

参考: HTML レッスン6

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<div class="menu">
  <div class="menu-card">
    <h3>ブレンドコーヒー</h3>
    <p class="price">¥400</p>
    <p>香り豊かなオリジナルブレンド</p>
  </div>
  <div class="menu-card">
    <h3>カフェラテ</h3>
    <p class="price">¥500</p>
    <p>ミルクたっぷりのまろやかな味</p>
  </div>
  <div class="menu-card">
    <h3>チーズケーキ</h3>
    <p class="price">¥450</p>
    <p>濃厚でなめらかな自家製ケーキ</p>
  </div>
  <div class="menu-card">
    <h3>チョコパフェ</h3>
    <p class="price">¥600</p>
    <p>チョコ好きにはたまらない一品</p>
  </div>
</div>
4

フッターを追加しよう

メニューの下にフッターを追加してください。

💡 ヒント
<div class="footer"> の中に <p> でコピーライトを書きます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<div class="footer">
  <p>&copy; 2026 Cafe SWP</p>
</div>
5

ヘッダーとフッターのCSSを書こう

style.css に、ヘッダーとフッターのスタイルを書いてください。カフェらしい茶色の背景にしましょう。

💡 ヒント
background で背景色、color で文字色、text-align:center で中央揃え、padding で余白を指定します。

参考: CSS レッスン3

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

* { box-sizing: border-box; margin: 0; }
body { font-family: sans-serif; background: #f9f5f0; color: #333; }

.header {
  background: #5c3d2e;
  color: #fff;
  text-align: center;
  padding: 24px;
}
.header h1 { font-size: 1.6rem; }
.header p { font-size: 0.9rem; opacity: 0.8; margin-top: 4px; }

.footer {
  background: #5c3d2e;
  color: #fff;
  text-align: center;
  padding: 16px;
  font-size: 0.8rem;
  margin-top: 24px;
}
6

メニューをFlexboxで横並びにしよう

.menu にFlexboxを設定して、カードを横並びにしてください。flex-wrap: wrap で折り返しも有効にしましょう。

💡 ヒント
.menu に display:flex, flex-wrap:wrap, gap を指定します。

参考: CSS レッスン5

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
}
7

メニューカードをデザインしよう

各カードに白背景・角丸・影をつけ、価格を赤色で目立たせてください。

💡 ヒント
background, border-radius, padding, box-shadow でカードらしい見た目にします。flex: 1 1 200px で均等幅にできます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

.menu-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  flex: 1 1 200px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.menu-card h3 { color: #5c3d2e; margin-bottom: 4px; }
.menu-card .price { font-weight: bold; color: #c0392b; font-size: 1.1rem; margin-bottom: 8px; }
.menu-card p { font-size: 0.85rem; color: #666; }
8

ブラウザで確認して完成！

ファイルを保存してブラウザで確認しましょう。カードが横並びになっていて、ウィンドウを狭めると折り返されれば完成です！

💡 ヒント
ウィンドウ幅を狭めると、カードが折り返されるのも確認してみましょう。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

完成！ヘッダー・メニューカード・フッターが表示されていればOKです。
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら