2026年4月27日
文化祭サイト、スマホで見たら崩れていませんか？
文化祭のサイトを作ったけど、スマホで見たら文字が小さすぎたり、レイアウトが崩れたりしていませんか？
来場者の多くはスマホでサイトを見ます。パソコンでは綺麗に見えても、スマホで崩れていたら情報が伝わりません。
この記事では、「文化祭のウェブサイトを作ろう！」で作ったサイトを、スマホでも見やすくする方法を解説します。レスポンシブデザインの基本を、文化祭サイトの実例で学びましょう。
HTMLの基本がまだの人は、HTMLで最初のページを作ろうから始めましょう。CSSの書き方がわからない人は、最初のCSSで基礎を確認できます。
レスポンシブデザインとは、1つのHTMLファイルで、PCでもスマホでもタブレットでも見やすく表示する技術のことです。画面の幅に応じてレイアウトを自動で切り替えます。
スマホ対応に必要な3つの設定
ステップ1: viewport（ビューポート）を設定する
HTMLの <head> に次の1行を追加するだけで、スマホでの表示が大きく改善します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">この設定がないと、スマホでもPC用の幅（1000px以上）で表示されるため、文字がとても小さくなります。
viewportの設定は、レスポンシブデザインの第一歩です。この1行がないと、どんなにメディアクエリを書いてもスマホで正しく表示されません。HTMLファイルを作ったら、最初にこの行を入れる習慣をつけましょう。
ステップ2: メディアクエリでスマホ用のCSSを書く
メディアクエリ（@media）を使うと、「画面幅が768px以下のとき」だけ適用されるCSSを書けます。
/* PC用（通常のCSS） */
.cards {
display: flex;
gap: 24px;
}
/* スマホ用（768px以下で適用） */
@media (max-width: 768px) {
.cards {
flex-direction: column;
}
}これで、PCでは横並び、スマホでは縦並びになります。
768pxという数値は「ブレイクポイント」と呼ばれます。この値を境に、PCレイアウトとスマホレイアウトを切り替えます。768pxはiPadの横幅に近い値で、多くのサイトで使われている定番の数値です。
ブレイクポイントは1つだけでなく、複数設定することもできます。たとえば480px以下でさらに小さいスマホ用のスタイルを追加する、といった使い方です。
ステップ3: 固定幅をやめて相対単位を使う
width: 960px のような固定幅を指定していると、スマホでは画面からはみ出します。代わりに max-width と % を使いましょう。
/* NG: 固定幅 */
.container { width: 960px; }
/* OK: 最大幅 + 相対指定 */
.container { max-width: 960px; width: 90%; margin: 0 auto; }画像にも同じ考え方が使えます。imgタグにmax-width: 100%を指定すると、画面幅より大きい画像も自動で縮小されます。これだけで画像のはみ出しを防げます。
img {
max-width: 100%;
height: auto;
}heightをautoにすると、縦横比が保たれたまま縮小されます。画像が歪む心配がありません。
文化祭サイトのビフォー/アフター
ビフォー（スマホ対応前）
- 出し物カードが横に3枚並んだまま → スマホでは文字が読めないほど小さい
- ナビゲーションのリンクが横一列 → スマホでは画面からはみ出す
- タイムテーブルの表が横に長い → スマホでは横スクロールが必要
アフター（スマホ対応後）
- 出し物カードが縦に1枚ずつ並ぶ → スマホでも読みやすい
- ナビゲーションが縦並びのメニューに変わる → タップしやすい
- タイムテーブルが見やすいサイズに調整される → スクロールなしで読める
ナビゲーションのCSS変更
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
gap: 8px;
}
}出し物カードのCSS変更
@media (max-width: 768px) {
.cards {
flex-direction: column;
}
.card {
width: 100%;
}
}タイムテーブルのCSS変更
@media (max-width: 768px) {
table { font-size: 14px; }
th, td { padding: 8px 4px; }
}ポイントは、スマホ用のCSSでは「横並びを縦並びに変える」「幅を100%にする」「フォントサイズを調整する」の3つです。この3つを意識するだけで、ほとんどのレイアウト崩れは解決できます。
メディアクエリの中に書くCSSは、通常のCSSと同じ書き方です。特別な文法はありません。「画面幅が狭いときだけ上書きする」と考えるとわかりやすいです。
スマホ表示を確認する方法
実際にスマホで確認する前に、パソコンの開発者ツールでシミュレーションできます。
- 開発者ツールを開く（F12）
- 左上のスマホアイコン（Toggle device toolbar）をクリック
- 画面上部でデバイスを選ぶ（iPhone SE、Galaxy S8 など）
- 表示が崩れていないか確認する
確認ポイント:
- 文字が小さすぎないか（最低16px推奨）
- ボタンやリンクがタップしやすい大きさか（最低44px × 44px推奨）
- 横スクロールが発生していないか
- 画像がはみ出していないか（img に max-width: 100% で防げる）
開発者ツールでの確認に加えて、実際のスマホでも必ず確認しましょう。シミュレーションでは問題なくても、実機ではタッチ操作の感覚が違うことがあります。
友達のスマホでも見てもらうと、自分では気づかない問題が見つかることがあります。iPhoneとAndroidの両方で確認できると理想的です。
まとめ
- ✅ viewport の meta タグを追加するだけで、スマホ表示が大きく改善する
- ✅ メディアクエリ（@media）でスマホ用のCSSを書く
- ✅ 固定幅（px）をやめて、max-width + % を使う
- ✅ カードやナビは flex-direction: column で縦並びにする
- ✅ 開発者ツールのデバイスモードで表示を確認する
- ✅ 画像には max-width: 100% を指定してはみ出しを防ぐ
- ✅ シミュレーションだけでなく実機でも確認する
あわせて読みたい記事
- 文化祭のウェブサイトを作ろう！ — 文化祭サイトの基本的な作り方
- 文化祭サイトにJavaScriptで動きをつけよう！ — カウントダウン・スライドショーの追加
- 文化祭のデジタル看板をHTMLで作ろう！ — 教室に表示するデジタル看板
- 文化祭のアンケートフォームを作ろう！ — 来場者アンケートの作り方
- レスポンシブデザインの作り方 — レスポンシブの基礎を詳しく学ぶ
- CSSメディアクエリの使い方 — @mediaの詳しい書き方
- CSSフレックスボックス入門 — Flexboxの基礎