---
title: "CSSファイルが読み込まれずスタイルが全く当たらないときの対処（相対パス）"
description: "公開した途端にスタイルがまったく当たらなくなった経験はありませんか。linkタグのhrefに書いた相対パスが公開後のディレクトリ構成とずれているとき、素のHTMLになってしまう理由と、パスのずれを素早く見つけて直すまでの手順を整理しています。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/css-not-loading-relative-path"
markdown: "https://giga-site.com/articles/css-not-loading-relative-path/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# CSSファイルが読み込まれずスタイルが全く当たらないときの対処（相対パス）

ローカルでは整っていたのに、公開したら一切スタイルが当たらず素のHTMLになってしまう。多くはlinkタグのhrefの相対パスが、公開後のディレクトリ構成とずれていることが原因です。この記事では、パスのずれを見つけて直すまでの手順を整理します。

> Source HTML: https://giga-site.com/articles/css-not-loading-relative-path
> Article index: https://giga-site.com/articles/index.md

## スタイルが全く当たらないときに最初に疑うこと

ボタンも余白も色も一切効かず、文字だけが縦に並ぶ状態は、CSSが1ファイルも読めていないサインです。一部だけ崩れるのとは違い、まるごと無装飾なときはセレクタの問題ではなく、CSSファイルそのものが取得できていないと考えるのが近道です。

原因の大半は、linkタグのhrefに書いたパスと、公開後のファイル配置がかみ合っていないことです。ローカルではファイルを直接開いて相対位置が一致していても、公開環境のルートやフォルダ階層が違うと同じパスが別の場所を指してしまいます。

## 相対パスの基準を正しく理解する

相対パスは、それを書いたHTMLファイルの位置を基準に解釈されます。style.css とだけ書けば同じフォルダ、css/style.css ならサブフォルダ、../style.css なら一つ上の階層を指します。先頭にスラッシュを付けた /css/style.css はサイトのルートからの絶対パスになり、意味が変わります。

ZIPで配布する構成では、index.html と CSS の相対位置がそのまま保たれるかどうかが鍵です。HTMLをサブフォルダに入れ替えたり、CSSだけ別フォルダへ移動したりすると、href の記述は変えていなくても指す先がずれます。

ルート基準の絶対パス（/で始まるパス）は、公開先の階層構成が想定と違うと外れやすいので、一時共有のZIPでは原則として相対パスで揃えると移植性が高くなります。

## 症状別チェック表

CSSファイルが読み込まれずスタイルが全く当たらないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## 読み込み失敗を確認用URLで切り分ける手順

推測で直すより、実際に何を取りに行って失敗しているかを確認すると確実です。公開後の確認用URLを開き、次の順でたどります。

1. ページを開いてF12で開発者ツールを出し、Networkタブを表示する
2. 再読み込みして、style.css の行が赤字や404になっていないか確認する
3. そのリクエストのURLを見て、実際に取りに行ったパスを確かめる
4. ファイルツリー上のCSSの本当の場所と、取りに行ったパスを突き合わせる
5. ずれていればlinkタグのhrefを実配置に合わせて修正する

## 大文字小文字とファイル名のずれも見落とさない

ローカルのWindowsやmacOSはファイル名の大文字小文字を区別しないことが多いため、Style.css を style.css と書いても手元では開けてしまいます。ところが公開環境では区別されることがあり、その場合だけ404になります。

拡張子の重複（style.css.txt のような保存ミス）や、全角スペースの混入、ZIP化したときに余計な親フォルダが一段増えてしまうケースもよくある原因です。リンクが指す名前と、実ファイルの名前を一文字ずつ照合すると確実です。

## 直したら同じURLで差し替えて再確認する

パスを直したら、相手に見える環境でCSSが当たっているかを必ず確かめます。手元のプレビューだけでは、公開時の階層構成の違いを再現しきれないことがあるためです。

ギガサイト便はCSSやJS、画像を含むZIPをそのままドロップでき、相対位置を保ったまま 〇〇.giga-site.com で公開されます。同じURLのままファイルを差し替えられるので、href を直したZIPを上げ直すだけで、リンクを送り直さずに相手へ最新版を確認してもらえます。Networkタブでstyle.cssが200で返っているかを見れば、解決したかどうかが一目で分かります。

## よくある質問

### ローカルでは当たるのに公開すると当たりません。なぜですか

ローカルではHTMLとCSSの相対位置が一致しているため動きますが、公開後にフォルダ階層やルートが変わると同じパスが別の場所を指します。Networkタブで実際に取りに行ったURLを確認するとずれが分かります。

### hrefは / で始めるべきですか

一時共有のZIPでは相対パスで揃える方が安全です。/で始まる絶対パスは公開先のルート構成に依存するため、想定と違う階層に置かれると外れやすくなります。

### Networkタブにstyle.cssが出てこないときは何を見ますか

そもそもリクエストが飛んでいない場合は、linkタグが正しく書かれているか、rel=stylesheetが付いているか、コメントアウトされていないかを確認します。HTML側でlinkタグ自体が読まれていない可能性があります。

### ファイル名は合っているのに404になります

大文字小文字の違い、拡張子の二重付け、全角スペースの混入、ZIP化で親フォルダが一段増えたなどが疑われます。リンクの記述と実ファイル名を一文字ずつ照合してください。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [fetchで相対パスのファイルが404になるときの原因と対処](https://giga-site.com/articles/fetch-relative-path-404/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [CSS・JSアニメーションが動かないときの対処](https://giga-site.com/articles/css-animation-not-working/index.md)
- [書いたCSSが別のスタイルに上書きされて当たらないときの対処](https://giga-site.com/articles/css-specificity-not-applied/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSSファイルが読み込まれずスタイルが全く当たらないときの対処（相対パス）",
  "description": "公開した途端にスタイルがまったく当たらなくなった経験はありませんか。linkタグのhrefに書いた相対パスが公開後のディレクトリ構成とずれているとき、素のHTMLになってしまう理由と、パスのずれを素早く見つけて直すまでの手順を整理しています。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/css-not-loading-relative-path",
  "url": "https://giga-site.com/articles/css-not-loading-relative-path",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ローカルでは当たるのに公開すると当たりません。なぜですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ローカルではHTMLとCSSの相対位置が一致しているため動きますが、公開後にフォルダ階層やルートが変わると同じパスが別の場所を指します。Networkタブで実際に取りに行ったURLを確認するとずれが分かります。"
      }
    },
    {
      "@type": "Question",
      "name": "hrefは / で始めるべきですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "一時共有のZIPでは相対パスで揃える方が安全です。/で始まる絶対パスは公開先のルート構成に依存するため、想定と違う階層に置かれると外れやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "Networkタブにstyle.cssが出てこないときは何を見ますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "そもそもリクエストが飛んでいない場合は、linkタグが正しく書かれているか、rel=stylesheetが付いているか、コメントアウトされていないかを確認します。HTML側でlinkタグ自体が読まれていない可能性があります。"
      }
    },
    {
      "@type": "Question",
      "name": "ファイル名は合っているのに404になります",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "大文字小文字の違い、拡張子の二重付け、全角スペースの混入、ZIP化で親フォルダが一段増えたなどが疑われます。リンクの記述と実ファイル名を一文字ずつ照合してください。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```