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

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

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

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

2つのファイルは必ず同じフォルダに置いてください。

別のフォルダだと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>

ヘッダーを作ろう

ページ上部にヘッダーを作り、行事名と日時を表示しましょう。

<header> はページのヘッダー部分を表すセマンティックタグです。

div でも動きますが、header を使うと「ここがページの冒頭」と機械にも伝わります。

中間確認: ブラウザで開いてタイトルと日時が表示されることを確認しましょう。

まだCSSを書いていないので白い背景に黒い文字ですが、内容が表示されていればOKです。

💡 ヒント

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

参考: CSS レッスン3

📝 模範解答を見る

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

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

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

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

Flexbox の最小知識:

親要素に display: flex を指定すると、子要素が横並びになります。

gap: 16px で子要素間の隙間を設定します。

flex: 1 で各カードを均等幅にします。

<main> タグはページのメインコンテンツを表すセマンティックタグです。

中間確認: ブラウザで3つのカードが横並びに表示されることを確認しましょう。

まだCSSを書いていない場合は縦に並びます。Step 5 でCSSを書くと横並びになります。

💡 ポイント: gap プロパティはFlexboxの子要素間の隙間を一括指定できる便利なプロパティです。

💡 ヒント

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

参考: CSS レッスン5

📝 模範解答を見る

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

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

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

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

<main> の中、情報カードの下に追加します。

中間確認: ブラウザで表が表示されることを確認しましょう（まだ枠線はありません）。

th（見出し行）は太字で表示されます。td（データ行）は通常の文字です。

行を増やしたいときは <tr>...</tr> を追加するだけです。

列数（th/td の数）は全ての行で揃えましょう。揃っていないと表が崩れます。

💡 ヒント

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>

CSSでデザインを整えよう

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

border-collapse: collapse は表の枠線を1本にまとめる設定です。

これがないと二重線になります。

.info strong で情報カードのラベル部分を緑色にして目立たせます。

確認: ヘッダーが緑背景、カードが白背景で横並び、表に枠線がついていればOKです。

.info strong { display: block } でラベルとテキストを上下に分けて表示しています。

th に背景色をつけると、見出し行がデータ行と区別しやすくなります。

💡 ヒント

ヘッダーの背景色、カードのborder-radius、表のborder-collapseを設定します

📝 模範解答を見る

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

header { background: #0f766e; color: #fff; padding: 24px; text-align: center; }
h1 { margin: 0 0 8px; }
.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; }
.info strong { display: block; color: #0f766e; margin-bottom: 4px; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background: #0f766e; color: #fff; }

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

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

margin: 24px auto の auto は「左右の余白を均等にする」= 中央寄せです。

max-width で最大幅を制限しないと auto が効かないので注意。

body { margin: 0 } でブラウザのデフォルト余白を消すと、ヘッダーが画面端まで広がります。

完成確認: ヘッダーが画面幅いっぱい、メインコンテンツが中央寄せで表示されれば完成です！

ブラウザの幅を狭くしても、max-width のおかげでコンテンツが見やすく保たれます。

広い画面では中央に寄り、狭い画面では幅いっぱいに広がります。

💡 ヒント

mainタグにmax-widthとmargin: 0 autoを指定して中央寄せします

📝 模範解答を見る

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

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

発展: ページを充実させよう

余裕があれば、以下に挑戦してみましょう！

イベント追加: タイムテーブルに3つ以上のイベントを追加する

注意事項: h2 + ul で注意事項セクションを追加する

レスポンシブ: @media でスマホ表示時にカードを縦並びにする

flex-direction: column で横並びを縦並びに変更できます。

完成したら友達に見せてみましょう！実際の学校行事の告知に使えるクオリティです。

自分の学校の行事に合わせて内容を変えてみるのもおすすめです。

体育祭、合唱コンクール、修学旅行の案内ページなど、応用は無限大です！

💡 ヒント

イベント追加、注意事項セクション、レスポンシブ対応に挑戦！

📝 模範解答を見る

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

<!-- 注意事項セクションの例 -->
<h2>⚠️ 注意事項</h2>
<ul>
  <li>上履きを持参してください</li>
  <li>駐車場はありません</li>
  <li>ゴミは各自持ち帰りましょう</li>
</ul>

<!-- レスポンシブ対応（スマホで縦並び） -->
@media (max-width: 600px) {
  .info { flex-direction: column; }
}

🎯

📚 使う技術を学ぶ

⚠️ つまずいたら

スタイルが反映されない — CSSファイルが読み込まれていない
画像が表示されない — 画像パスが間違っている
スマホで表示が小さい — viewport meta タグがない
エラーメッセージの読み方