2026年4月23日
文化祭のウェブサイトを自分で作ってみよう
文化祭・学園祭のウェブサイトを作りたいけど、作り方がわからない——そんな中学生・高校生のための記事です。HTMLとCSSの基本がわかれば、クラスの出し物紹介やタイムテーブルを載せたページを自分で作れます。
この記事では、コピペで使えるテンプレートコード付きで、文化祭サイトの作り方をステップバイステップで解説します。
完成すると、こんなページが作れます。
- ヘッダー（文化祭名・日時）
- 出し物一覧（カード型レイアウト）
- タイムテーブル（表形式）
- アクセス情報（フッター）
ステップ1：HTMLで骨格を作る
まず index.html と style.css の2ファイルを作り、以下のHTMLを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>〇〇高校 文化祭 2026</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="hero">
<h1>🎪 〇〇高校 文化祭 2026</h1>
<p>9月20日（土）・21日（日） 10:00〜16:00</p>
</header>
<section class="events">
<h2>出し物一覧</h2>
<div class="card-list">
<div class="card">
<h3>🍩 1-A ドーナツ屋さん</h3>
<p>手作りドーナツを販売します！</p>
<p class="place">📍 1階 教室</p>
</div>
<div class="card">
<h3>👻 2-B お化け屋敷</h3>
<p>本格的なお化け屋敷です。怖いよ！</p>
<p class="place">📍 2階 教室</p>
</div>
<div class="card">
<h3>🎸 軽音楽部 ライブ</h3>
<p>体育館でバンド演奏をします！</p>
<p class="place">📍 体育館</p>
</div>
</div>
<p class="mt-3">🔥 <InlineLink href="/blog/vscode-setup/">VS Codeのインストール方法</InlineLink>で実践してみましょう。</p>
</section>
<section class="timetable">
<h2>タイムテーブル</h2>
<table>
<tr><th>時間</th><th>イベント</th><th>場所</th></tr>
<tr><td>10:00</td><td>開会式</td><td>体育館</td></tr>
<tr><td>11:00</td><td>軽音楽部ライブ</td><td>体育館</td></tr>
<tr><td>13:00</td><td>ダンス部パフォーマンス</td><td>中庭</td></tr>
<tr><td>15:30</td><td>閉会式</td><td>体育館</td></tr>
</table>
<p class="mt-3">💡 <InlineLink href="/blog/web-programming-roadmap/">学習ロードマップ</InlineLink>で基礎を確認できます。</p>
</section>
<footer class="footer">
<p>📍 〇〇高校（〇〇県〇〇市〇〇町1-1）</p>
<p>© 2026 〇〇高校 文化祭実行委員会</p>
</footer>
</body>
</html>💡 学校名・出し物・タイムテーブルは自分の文化祭に合わせて書き換えてください。カードを増やしたいときは <div class="card">...</div> をコピーして追加するだけです。
ステップ2：CSSでデザインする
style.css に以下を書きます。文化祭らしい華やかなデザインになります。
* { box-sizing: border-box; margin: 0; }
body { font-family: sans-serif; background: #fff8f0; color: #333; }
.hero {
background: linear-gradient(135deg, #ff6b6b, #ffa502);
color: #fff;
text-align: center;
padding: 48px 24px;
}
.hero h1 { font-size: 2rem; margin-bottom: 8px; }
.hero p { font-size: 1.1rem; opacity: 0.9; }
.events, .timetable { max-width: 800px; margin: 0 auto; padding: 32px 24px; }
h2 { font-size: 1.4rem; color: #333; margin-bottom: 16px; text-align: center; }
.card-list { display: flex; flex-wrap: wrap; gap: 16px; }
.card {
background: #fff;
border-radius: 12px;
padding: 20px;
flex: 1 1 220px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.card h3 { color: #ff6b6b; margin-bottom: 8px; }
.card .place { font-size: 0.85rem; color: #888; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 10px 12px; text-align: left; }
th { background: #ff6b6b; color: #fff; }
.footer {
background: #333;
color: #fff;
text-align: center;
padding: 24px;
margin-top: 32px;
font-size: 0.9rem;
}
.footer p + p { margin-top: 4px; opacity: 0.7; }
@media (max-width: 600px) {
.card-list { flex-direction: column; }
.hero h1 { font-size: 1.5rem; }
}ステップ3：自分の文化祭に合わせてカスタマイズ
テンプレートをそのまま使ってもOKですが、以下のポイントをカスタマイズするとオリジナル感が出ます。
- 色を変える：
#ff6b6b（赤系）を学校のスクールカラーに変更 - 出し物カードを増やす：
<div class="card">をコピーして追加 - 画像を追加する：カードの中に
<img src="photo.jpg" alt="説明">を追加 - 地図を埋め込む：Google Maps の埋め込みコードをフッターに追加
作ったサイトを公開しよう
完成したサイトは GitHub Pages を使えば無料でインターネットに公開できます。URLをクラスのグループLINEやポスターに載せれば、みんなに見てもらえます。
JavaScriptでカウントダウンタイマーやスライドショーを追加する方法は、文化祭サイトにJavaScriptで動きをつけよう！で解説しています。
🔗 あわせてHTMLとは？初心者向け解説もチェックしてみましょう。
文化祭サイトに載せるべきコンテンツ
文化祭サイトに何を載せればいいか迷ったら、以下のコンテンツを参考にしてください。
必須コンテンツ
- 文化祭の日時と場所
- 出し物の一覧（クラス名・内容・場所）
- タイムスケジュール（ステージ発表の時間など）
- アクセス方法（最寄り駅からの道順）
- 注意事項（持ち込み禁止物、駐車場の有無など）
あると嬉しいコンテンツ
- 各出し物の紹介ページ（写真つき）
- マップ（校内の配置図）
- フォトギャラリー（準備の様子）
- カウントダウン（当日までの残り日数）
- SNSへのリンク
コンテンツは多すぎても少なすぎてもいけません。来場者が「知りたい情報にすぐたどり着ける」ことを意識しましょう。
文化祭サイトを作るスケジュール
文化祭の1〜2ヶ月前から準備を始めるのがおすすめです。スケジュールの目安を紹介します。
2ヶ月前：企画と設計
どんなページが必要か、どんなデザインにするかを決めます。紙にラフスケッチを描いて、ページの構成を考えましょう。担当者を決めて、誰が何を作るか分担します。
1ヶ月前：制作開始
HTMLとCSSでページを作り始めます。まずはトップページと出し物一覧ページから作りましょう。デザインは後から調整できるので、まずは情報を載せることを優先します。
2週間前：コンテンツ追加と確認
各クラスから出し物の情報や写真を集めて、ページに追加します。スマホで表示を確認して、文字が小さすぎないか、ボタンが押しにくくないかをチェックします。
1週間前：公開とテスト
GitHub Pagesなどでサイトを公開します。友達に見てもらって、リンク切れや誤字がないか確認してもらいましょう。QRコードを作って、ポスターに載せる準備もします。
当日：更新対応
当日にスケジュール変更があれば、すぐにサイトを更新します。担当者のスマホからでも更新できるように、事前に手順を確認しておきましょう。
チームで作るときのコツ
文化祭サイトは一人で作るより、チームで分担するのがおすすめです。
- デザイン担当：色やレイアウトを決める
- コーディング担当：HTMLとCSSを書く
- コンテンツ担当：文章や写真を集める
- 確認担当：スマホやパソコンで表示をチェックする
GitHubを使えば、複数人で同時に作業できます。誰がどのファイルを編集しているかがわかるので、作業が重複しません。
文化祭が終わったあとも、サイトはそのまま残しておきましょう。来年の文化祭実行委員が参考にできますし、自分のポートフォリオとしても使えます。「去年はこんなサイトを作りました」と見せられれば、次の年はもっと良いサイトを作るモチベーションにもなります。
まとめ
- ✅ HTML で骨格（ヘッダー・出し物カード・タイムテーブル・フッター）を作る
- ✅ CSS でデザイン（グラデーション・カード型レイアウト・レスポンシブ対応）
- ✅ テンプレートコードをコピーして、自分の文化祭に合わせて書き換えるだけ
- ✅ GitHub Pages で無料公開できる
あわせて読みたい記事
- 文化祭サイトにJavaScriptで動きをつけよう！ — カウントダウン・スライドショーの追加
- 文化祭サイトをスマホ対応にする方法 — レスポンシブデザイン入門
- 文化祭のデジタル看板をHTMLで作ろう！ — 教室のタブレットに表示
- 文化祭のアンケートフォームを作ろう！ — 来場者アンケートの作り方