デプロイコース
✓ 2 3 4
2 STEP 2 / 4

公開できる形に整える

⏱ 約30分 やってみよう 1 クイズ 3

🎯 このレッスンで学ぶこと

  • 公開後にCSSや画像が消える2大原因がわかります。
  • 絶対パスと相対パスの違いを、公開後の挙動として理解できます。
  • 大文字・小文字の違いが公開後だけ問題になる理由がわかります。
  • 自分のフォルダを公開できる形にチェックできます。
⚠️ このレッスンが一番大事です。 「自分のパソコンでは完璧に見えていたのに、公開したらデザインが全部消えた」—— これは初めての公開でほぼ全員が一度は踏みます。原因は2つだけで、公開する前に潰せます。

📂 まず、フォルダの形を確認する

公開するフォルダは、こういう形になっているのが基本です。

my-site/
├── index.html      ← 必ずこの名前。トップページになる
├── style.css
└── img/
    └── photo.png
⚠️ index.html という名前は必須です。 top.html や ホームページ.html だと、 URLを開いたときにページが表示されず404になります。 index.html は「そのフォルダを開いたとき最初に表示されるファイル」という決まった名前です。
💡 フォルダごと公開されます： index.html だけ置いても、CSSや画像が同じフォルダに無ければ読み込めません。 フォルダの中身をまるごと公開すると考えてください。

🚨 原因① パスの先頭に / を付けている

CSSや画像を読み込むとき、こう書いていませんか？

<link rel="stylesheet" href="/style.css">
<img src="/img/photo.png">

先頭の / は「ドメインのいちばん上から探す」という意味です。 ここが落とし穴で、レッスン1で見たとおり、あなたのURLはこうなります。

https://ユーザー名.github.io/my-site/

つまりドメインのいちばん上は https://ユーザー名.github.io/ であって、 あなたの my-site フォルダではありません。 /style.css と書くと、ブラウザは https://ユーザー名.github.io/style.css を探しに行き、そこには何もないので404になります。

実際に確かめた結果がこちらです（/my-site/ の下で配信したとき）：

書き方 ブラウザが探しに行く先 結果
href="/style.css" /style.css 404（見つからない）
href="style.css" /my-site/style.css 200（OK）
src="/img/a.png" /img/a.png 404（見つからない）
src="img/a.png" /my-site/img/a.png 200（OK）

直し方はかんたんです。先頭の / を消すだけ。

<!-- ❌ 公開すると読み込めない -->
<link rel="stylesheet" href="/style.css">
<img src="/img/photo.png">

<!-- ✅ 公開しても読み込める -->
<link rel="stylesheet" href="style.css">
<img src="img/photo.png">
💡 なぜ自分のPCでは動いていたの？ file:// で開くと / は「パソコンの一番上のフォルダ」を指すため、 たまたま見つかったり、そもそもCSSが効いていないことに気づかなかったりします。 ローカルで見えていることは、公開後の保証になりません。

🚨 原因② 大文字・小文字が違う

これはもっと気づきにくい原因です。次のコードを見てください。

<!-- ファイルの実際の名前は Style.css（大文字のS） -->
<link rel="stylesheet" href="style.css">

WindowsやMacでは、これは動いてしまいます。 多くのパソコンのファイルシステムは大文字と小文字を区別しないため、 Style.css を style.css と書いても開けてしまうのです。

ところが、GitHub Pages のサーバーは大文字と小文字を厳密に区別します。 Style.css というファイルを style.css と書いて呼ぶと、 サーバーは「そんなファイルは無い」と判断して404を返します。

⚠️ これが「自分のPCでは完璧なのに公開すると崩れる」の正体です。 ローカルでどれだけ確認しても発見できません。名前を正確に揃えるしかありません。

よくある食い違いの例：

  • ファイルが Photo.PNG なのに photo.png と書いている
  • フォルダが Img なのに img/ と書いている
  • ファイルが style.CSS（拡張子が大文字）

おすすめの対策：はじめから全部小文字にする。 ファイル名・フォルダ名を小文字の半角英数字とハイフンだけにしておけば、この問題は起きません。

✅ index.html  style.css  img/photo.png  main-visual.jpg
❌ Index.html  Style.CSS  IMG/Photo.PNG  メイン画像.jpg
⚠️ 日本語のファイル名も避けましょう。 写真.png のような名前はURLに変換されるときに文字化けして読み込めないことがあります。 半角英数字にしておくのが安全です。

✅ 公開前チェックリスト

自分のフォルダを開いて、1つずつ確認しましょう。ここで潰しておけば、公開後にあわてずに済みます。

  • フォルダの直下に index.html がある（名前はこのとおり）
  • HTMLの中の href と src に、先頭が / のものが1つも無い
  • ファイル名・フォルダ名がすべて半角小文字（日本語・スペースが無い）
  • HTMLに書いた名前と、実際のファイル名の大文字小文字が完全に一致している
  • CSSや画像が、HTMLと同じフォルダ（またはその下）に入っている
  • 個人情報・他人の写真・パスワードが含まれていない（レッスン1）

🔍 一括で確認するコツ

VS Code を使っているなら、フォルダを開いて検索（Windows: Ctrl + Shift + F / Mac: Command + Shift + F）で href="/ と src="/ を検索してみてください。 1件も出てこなければ、原因①はクリアです。

href="/
src="/

見つかったものは、先頭の / を消せばOKです。

💡 外部のURLはそのままでOK： https:// で始まっているもの（Webフォントや外部の画像など）は 別のサイトを指しているので、変更しないでください。消すのは / で始まるものだけです。

⚠️ よくあるミス

  • ./style.css はOK？ — OKです。./ は「今のフォルダ」という意味で、style.css と同じ結果になります。ダメなのは / だけで始まるものです。
  • ../ を使っている — 「1つ上のフォルダ」の意味です。公開フォルダの外に出てしまうとファイルが存在しないので、公開するフォルダの中で完結するように直しましょう。
  • ファイル名にスペースが入っている — my photo.png のようなスペースはURLで %20 に変換され、トラブルのもとです。my-photo.png のようにハイフンにしましょう。

📝 まとめ

  • ✅ 公開後にCSS・画像が消える原因はほぼ2つ
  • ✅ 原因①：/ で始まるパス → 先頭の / を消す
  • ✅ 原因②：大文字小文字の食い違い → 全部小文字に統一する
  • ✅ どちらもローカルでは気づけないので、公開前にチェックする
  • ✅ index.html という名前は必須

✅ このレッスンが終わったら

チェックリストが全部OKになったら、いよいよ公開します。

次のレッスン: 公開する →

このレッスンは役に立ちましたか？

目次
    他の質問を見る → 詰まった？質問する

    ⚠️ よくあるエラー

    ← デプロイコース一覧に戻る
    𝕏 シェア LINE シェア
    次のレッスン: 公開する →