2026年5月2日
「文化祭でクラスのWebサイトを作りたいけど、何から始めればいいかわからない」と困っていませんか？
HTML（エイチティーエムエル）とCSS（シーエスエス）を使えば、初心者でも文化祭のWebサイトを作れます。特別なソフトを買う必要はありません。無料のツールだけで完成できます。
この記事では、完成イメージの決め方からHTMLの書き方、CSSでのデザイン、公開方法まで、ゼロからの手順を解説します。
HTMLの基本をまだ学んでいない人は「HTMLで最初のページを作ろう」を先に読んでおくとスムーズです。
完成イメージを決めよう
いきなりコードを書き始めるのではなく、まず「どんなページが必要か」を考えましょう。
必要なページの例
文化祭のWebサイトに必要なページは、だいたい次のとおりです。
- トップページ: 文化祭の名前、日時、場所
- イベント紹介: 各クラス・部活の出し物一覧
- タイムスケジュール: 時間割や順番
- アクセス: 学校の場所、最寄り駅からの行き方
- お問い合わせ: 実行委員の連絡先
紙に書いてみよう
パソコンを開く前に、紙とペンで「ワイヤーフレーム」を描きましょう。ワイヤーフレームとは、ページのレイアウト（配置）を簡単に描いた設計図です。
描くこと:
- ヘッダー（ページ上部）に何を置くか
- メインエリアに何を表示するか
- フッター（ページ下部）に何を書くか
- ナビゲーション（メニュー）の項目
完璧でなくてOKです。「だいたいこんな感じ」がわかれば十分です。チームで作る場合は、この段階でメンバーと共有しておきましょう。
必要なツールを準備する
Webサイトを作るために必要なツールは3つだけです。
1. テキストエディタ
コードを書くためのソフトです。VS Code（ブイエスコード）がおすすめです。無料で使えて、コードの色分け表示やエラー検出ができます。
VS Codeのインストール:
- 「Visual Studio Code」で検索する
- 公式サイトからダウンロードする
- インストーラーを実行する
2. ブラウザ
作ったページを確認するために使います。Google ChromeやFirefoxがおすすめです。HTMLファイルをブラウザにドラッグ&ドロップすれば表示できます。
3. フォルダ構成
ファイルを整理するためのフォルダを作りましょう。
school-festival/
├── index.html（トップページ）
├── style.css（デザイン）
├── events.html（イベント紹介）
└── images/（画像フォルダ）
├── logo.png
└── photo1.jpg
ポイント: ファイル名は半角英数字で、スペースを使わないようにしましょう。日本語のファイル名はエラーの原因になります。
HTMLで骨組みを作る
HTMLはWebページの「骨組み」を作る言語です。見出し、文章、画像、リンクなどの構造を定義します。
基本構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○○高校 文化祭2026</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>○○高校 文化祭2026</h1>
<nav>
<a href="index.html">トップ</a>
<a href="events.html">イベント</a>
</nav>
</header>
<main>
<section>
<h2>開催情報</h2>
<p>日時: 2026年9月20日（土）10:00〜16:00</p>
<p>場所: ○○高校 体育館・各教室</p>
</section>
<section>
<h2>出し物一覧</h2>
<ul>
<li>1年A組: お化け屋敷</li>
<li>1年B組: カフェ</li>
<li>2年A組: 縁日</li>
</ul>
</section>
</main>
<footer>
<p>© 2026 ○○高校文化祭実行委員会</p>
</footer>
</body>
</html>コードの解説
- header: ページの上部（タイトルやメニュー）
- nav: ナビゲーション（ページ間のリンク）
- main: ページのメインコンテンツ
- section: 内容のまとまり
- h1, h2: 見出し（h1が一番大きい）
- p: 段落（文章）
- ul, li: 箇条書きリスト
- footer: ページの下部（著作権表示など）
このコードをindex.htmlとして保存し、ブラウザで開くと文化祭のページが表示されます。
CSSで見た目を整える
CSSはWebページの「見た目」を整える言語です。色、フォント、レイアウトを指定します。
CSSの基本をまだ学んでいない人は「CSSで最初のスタイルを書こう」を参考にしてください。
文化祭ページのCSS例
/* 全体の設定 */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #fff8f0;
}
/* ヘッダー */
header {
background-color: #ff6b35;
color: white;
padding: 20px;
text-align: center;
}
/* ナビゲーション */
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}
/* メインコンテンツ */
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* セクション */
section {
margin-bottom: 30px;
}
/* フッター */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
}文化祭らしいデザインのコツ
- 明るい色を使う: オレンジ、黄色、赤など活気のある色がおすすめ
- フォントサイズを大きめに: スマホで見る人も多いので、文字は16px以上
- 余白をしっかり取る: 詰め込みすぎると読みにくい
- テーマカラーを決める: 2〜3色に絞ると統一感が出る
画像と動画を入れる
文化祭のページには写真やイラストが欠かせません。
画像の入れ方
<img src="images/poster.jpg" alt="文化祭ポスター" width="600">- src: 画像ファイルの場所
- alt: 画像が表示できないときの代替テキスト
- width: 画像の幅（ピクセル）
画像の詳しい使い方は「HTMLで画像を表示する方法」で学べます。
画像を準備するときの注意点
- ファイルサイズを小さくする: 大きすぎると読み込みが遅い。1枚あたり500KB以下が目安
- 横幅を揃える: 写真の横幅を統一すると見た目がきれい
- 著作権に注意: 自分で撮った写真か、フリー素材を使う
- 人の顔が写っている場合: 本人の許可を取る
画像のサイズ調整（CSS）
img {
max-width: 100%;
height: auto;
}この設定で、画面幅に合わせて画像が自動で縮小されます。スマホでも見やすくなります。
公開する方法
作ったWebサイトをインターネットに公開しましょう。GitHub Pages（ギットハブページズ）を使えば無料で公開できます。
公開の手順
- GitHubアカウントを作る（無料）
- 新しいリポジトリ（保管場所）を作る
- HTMLファイルとCSSファイルをアップロードする
- Settings → Pages → ソースを「main」に設定する
- 数分待つとURLが発行される
公開されたURLは「https://ユーザー名.github.io/リポジトリ名/」の形式です。このURLをクラスメイトや来場者に共有しましょう。
詳しい手順は「GitHub Pagesでサイトを公開する方法」で解説しています。
公開前のチェックリスト
- すべてのリンクが正しく動くか
- 画像が表示されているか
- スマホでも見やすいか
- 誤字脱字がないか
- 個人情報が載っていないか
チームで作業するコツ
文化祭のWebサイトは複数人で作ることが多いです。スムーズに進めるコツを紹介します。
ファイル分担
ページごとに担当を決めましょう。
- Aさん: トップページ（index.html）
- Bさん: イベント紹介ページ（events.html）
- Cさん: CSSデザイン（style.css）
- Dさん: 画像の準備と加工
命名ルールを決める
ファイル名やクラス名のルールを最初に決めておくと混乱しません。
- ファイル名: 半角英数字、ハイフン区切り（例: event-list.html）
- 画像名: 内容がわかる名前（例: class1a-cafe.jpg）
- CSSクラス名: 役割がわかる名前（例: event-card, schedule-table）
確認方法
- 毎日1回、全員でブラウザで確認する時間を作る
- 変更したら「何を変えたか」をメモに残す
- 公開前に全員でスマホとパソコンの両方で確認する
文化祭Webサイトの応用テクニックは「文化祭のWebサイトを作ろう」でさらに詳しく学べます。
まとめ
- ✅ まず紙にワイヤーフレームを描いて設計する
- ✅ VS Code・ブラウザ・フォルダの3つを準備する
- ✅ HTMLで骨組み（見出し・文章・リスト）を作る
- ✅ CSSで色・フォント・レイアウトを整える
- ✅ 画像はサイズを小さくして、altテキストを書く
- ✅ GitHub Pagesで無料公開できる
- ✅ チームではファイル分担と命名ルールを決める
▶ プレビュー
文化祭のWebサイト作りは、HTML/CSSを実践的に学べる最高の機会です。ぜひ挑戦してみてください。
🚀 HTML/CSSをもっと学ぼう！
文化祭のサイトが完成したら、次はもっと本格的なWebサイト作りに挑戦しましょう。このサイトでは、HTML・CSS・JavaScriptを無料で学べるコースを用意しています。
HTMLで最初のページを作ろう →