学校行事の告知ページを作ろう

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

HTMLファイルとCSSファイルを作成しよう

event.html と style.css を作成し、HTMLからCSSを読み込みましょう。

💡 ヒント
event.html と style.css の2ファイルを同じフォルダに作ります
📝 模範解答を見る

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文化祭2026</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
2

ヘッダーを作ろう

ページ上部にヘッダーを作り、行事名と日時を表示しましょう。CSSで背景色を付けます。

💡 ヒント
headerタグで囲み、h1で行事名、pで日時を書きます

参考: CSS レッスン3

📝 模範解答を見る

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

<header>
  <h1>🎵 文化祭2026</h1>
  <p>10月15日（土）9:00〜16:00</p>
</header>
3

情報カードをFlexboxで横並びにしよう

日時・場所・入場料の3つの情報カードをFlexboxで横並びにしましょう。

💡 ヒント
親要素にdisplay:flex、各カードにflex:1を指定します

参考: CSS レッスン5

📝 模範解答を見る

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

<div class="info">
  <div><strong>📅 日時</strong>10月15日（土）</div>
  <div><strong>📍 場所</strong>体育館・各教室</div>
  <div><strong>🎫 入場</strong>無料</div>
</div>
4

タイムテーブルを表で作ろう

タイムテーブルを表で作りましょう。時間・イベント名・場所の3列です。

💡 ヒント
tableタグの中にtr（行）、th（見出し）、td（データ）を書きます

参考: HTML レッスン4

📝 模範解答を見る

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

<table>
  <tr><th>時間</th><th>イベント</th><th>場所</th></tr>
  <tr><td>9:00</td><td>開会式</td><td>体育館</td></tr>
  <tr><td>10:00</td><td>バンド演奏</td><td>体育館</td></tr>
  <tr><td>12:00</td><td>模擬店</td><td>各教室</td></tr>
</table>
5

CSSでデザインを整えよう

CSSでヘッダー・カード・表のスタイルを整えましょう。

💡 ヒント
ヘッダーの背景色、カードのborder-radius、表のborder-collapseを設定します
📝 模範解答を見る

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

header { background: #0f766e; color: #fff; padding: 24px; text-align: center; }
.info { display: flex; gap: 16px; margin: 16px 0; }
.info div { flex: 1; background: #fff; padding: 16px; border-radius: 8px; text-align: center; border: 1px solid #ddd; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background: #0f766e; color: #fff; }
6

全体のレイアウトを仕上げよう

bodyの背景色とmainの中央寄せを設定して完成です！

💡 ヒント
mainタグにmax-widthとmargin: 0 autoを指定して中央寄せします
📝 模範解答を見る

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

body { font-family: sans-serif; margin: 0; background: #f5f5f5; }
main { max-width: 600px; margin: 24px auto; padding: 0 16px; }
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら