--- title: "公開後にCSSが反映されない・スタイルが崩れるときの原因と直し方" description: "手元ではきれいなのに公開後にスタイルが崩れてしまった方向け。ファイルのパス指定やフォルダ構成が原因のケースがほとんどであることを踏まえ、見るべき箇所と直し方を順番に確認できます。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/css-not-applied" markdown: "https://giga-site.com/articles/css-not-applied/index.md" category: "トラブルシュート" publishedAt: "2026-06-21" updatedAt: "2026-06-25" readingMinutes: 6 --- # 公開後にCSSが反映されない・スタイルが崩れるときの原因と直し方 手元のブラウザではきれいに見えていたのに、公開したらCSSが当たらず文字や枠だけが並ぶ状態になった、という相談は少なくありません。多くはファイルの置き場所やパスの指定がずれていることが原因で、見るべき箇所はだいたい決まっています。この記事では、原因の切り分け方と、崩れを防いで公開し直すための手順を順番に説明します。 > Source HTML: https://giga-site.com/articles/css-not-applied > Article index: https://giga-site.com/articles/index.md ## まず疑うのは「CSSファイルが読み込めていない」状態 公開後にスタイルだけが当たらないとき、最初に確認したいのは、CSSファイルそのものがブラウザに届いているかどうかです。文字は表示されるのに余白も色もない、いわゆる「素のHTML」の見た目になっている場合、HTMLは取得できているがCSSの読み込みに失敗している可能性が高いといえます。 ブラウザの開発者ツールを開き、ネットワークの一覧でCSSファイルが404になっていないかを見てください。404が出ていれば、ファイルが存在しないか、HTMLからの参照先が間違っているかのどちらかです。原因の大半はこの「リンク切れ」に集約されます。 ## 原因の多くはパス指定のずれ 手元では動くのに公開すると崩れる、という典型パターンの多くはパスの指定に起因します。とくにルートからの絶対パス（先頭が「/」で始まる指定）は、ローカルの環境と公開先でフォルダ構成が変わると意図した場所を指さなくなりがちです。 ファイル名の大文字小文字の違いも見落としやすい落とし穴です。手元のパソコンでは大文字小文字を区別せず開けても、公開環境では区別される場合があり、「Style.css」と書いて実体が「style.css」だと読み込みに失敗します。次のような点を順に確認すると原因を絞り込めます。 - CSSへのリンクは相対パス（例: 「./style.css」「css/style.css」）で書く - ファイル名の大文字小文字がHTMLの記述と実体で一致しているか確認する - link要素のhref、img要素のsrcのスペルミスがないか見直す - CDNなど外部CSSに依存している場合はそのURLが生きているか確認する ## 症状別チェック表 公開後にCSSが反映されない・スタイルが崩れるときは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。 確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。 - 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する - 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る - 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける - 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する ## パス以外で崩れる主なケース パスが正しいのに崩れる場合は、別の原因を疑います。複数のCSSやインラインの記述が競合して、意図しない方が優先されているケース。あるいは古い表示がブラウザに残っているだけ、というケースもあります。 とくに更新直後はキャッシュが残りやすいため、スーパーリロード（強制再読み込み）やシークレットウィンドウで開き直すと、実際の最新状態を確認できます。下記を切り分けの目安にしてください。 - スーパーリロードやシークレットウィンドウで最新状態を確認する - CSSの記述順や詳細度の競合で上書きされていないか見る - スマホで崩れる場合はviewportのmeta指定があるか確認する - JavaScriptで描画する要素なら、外部スクリプトが読み込めているかも併せて確認する ## 崩れを防いで公開し直す手順 原因を直したら、関連ファイルをまとめて公開し直すのが確実です。CSSや画像を一式そろえてZIPにまとめ、相対パスのまま公開すると、フォルダ構成が保たれてリンク切れが起きにくくなります。 ギガサイト便を使う場合、HTML一式をZIPにまとめてアップロードでき、サーバー構築やデプロイ設定なしで認証付きの共有URLとして公開できます。次の手順で崩れにくい形に整えられます。 1. HTML・CSS・画像を1つのフォルダにまとめ、参照を相対パスにする 2. フォルダをZIPに圧縮する 3. ギガサイト便のトップにZIPをドロップしてアップロードする 4. 発行された共有URLを開き、スタイルが当たっているか確認する 5. 崩れが残るなら原因を直し、同じURLのままファイルを差し替える ## 修正と確認を繰り返すときに役立つこと CSSの不具合は一度で直りきらず、確認と修正を何度か往復することがよくあります。そのたびに新しいURLが発行されると、共有相手にリンクを送り直す手間が増えます。 同じURLのままファイルを差し替えられる仕組みがあると、修正後の確認をスムーズに回せます。ギガサイト便では公開URLを保ったまま中身だけ更新でき、レビュー相手に毎回リンクを送り直す必要がありません。表示確認のためだけにまず試すなら、登録なしでトップにファイルをドロップしてその場で共有URLを発行することもできます（匿名公開はnoindex・7日間の公開期限・IPレート制限つき）。 ## よくある質問 ### CSSが反映されないのはなぜですか 最も多い原因は、HTMLからCSSへのパス指定がずれていて読み込みに失敗していることです。ブラウザの開発者ツールでCSSファイルが404になっていないかを確認してください。ファイル名の大文字小文字の違いや、相対パスと絶対パスの取り違えもよくある原因です。 ### ローカルでは正しく表示されるのに公開すると崩れます ローカルと公開先でフォルダ構成が変わると、ルートからの絶対パスが意図した場所を指さなくなることがあります。CSSや画像への参照を相対パスに直すと崩れにくくなります。大文字小文字が区別される環境もあるため、記述と実際のファイル名が一致しているかも確認してください。 ### 修正したのに表示が変わりません 古い表示がブラウザのキャッシュに残っている可能性があります。スーパーリロード（強制再読み込み）や、シークレットウィンドウで開き直して最新状態を確認してください。それでも変わらない場合は、更新したファイルが実際に公開先へ反映されているかを見直します。 ### CSSや画像をまとめて公開するにはどうすればよいですか HTML・CSS・画像を1つのフォルダにまとめ、参照を相対パスにしてZIPに圧縮します。ギガサイト便ならそのZIPをアップロードするだけで、フォルダ構成を保ったまま共有URLとして公開でき、リンク切れによる崩れを防ぎやすくなります。 ### 原因が分からないときはどこから確認すべきですか？ まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。 ## 関連記事 - [書いたCSSが別のスタイルに上書きされて当たらないときの対処](https://giga-site.com/articles/css-specificity-not-applied/index.md) - [CSS・JSアニメーションが動かないときの対処](https://giga-site.com/articles/css-animation-not-working/index.md) - [CSS変数（カスタムプロパティ）が反映されないときの対処](https://giga-site.com/articles/css-variable-not-working/index.md) - [CSSファイルが読み込まれずスタイルが全く当たらないときの対処（相対パス）](https://giga-site.com/articles/css-not-loading-relative-path/index.md) - [フォントが太字・斜体にならないときの対処](https://giga-site.com/articles/webfont-bold-not-applied/index.md) - [影（box-shadow）や角丸が効かないときの原因と対処](https://giga-site.com/articles/shadow-or-border-radius-not-applied/index.md) ```json { "@context": "https://schema.org", "@type": "Article", "headline": "公開後にCSSが反映されない・スタイルが崩れるときの原因と直し方", "description": "手元ではきれいなのに公開後にスタイルが崩れてしまった方向け。ファイルのパス指定やフォルダ構成が原因のケースがほとんどであることを踏まえ、見るべき箇所と直し方を順番に確認できます。", "datePublished": "2026-06-21", "dateModified": "2026-06-25", "mainEntityOfPage": "https://giga-site.com/articles/css-not-applied", "url": "https://giga-site.com/articles/css-not-applied", "inLanguage": "ja", "image": "https://giga-site.com/og-image.png", "articleSection": "トラブルシュート", "author": { "@type": "Organization", "name": "ギガサイト便" }, "publisher": { "@type": "Organization", "name": "ギガサイト便" }, "mainEntity": [ { "@type": "Question", "name": "CSSが反映されないのはなぜですか", "acceptedAnswer": { "@type": "Answer", "text": "最も多い原因は、HTMLからCSSへのパス指定がずれていて読み込みに失敗していることです。ブラウザの開発者ツールでCSSファイルが404になっていないかを確認してください。ファイル名の大文字小文字の違いや、相対パスと絶対パスの取り違えもよくある原因です。" } }, { "@type": "Question", "name": "ローカルでは正しく表示されるのに公開すると崩れます", "acceptedAnswer": { "@type": "Answer", "text": "ローカルと公開先でフォルダ構成が変わると、ルートからの絶対パスが意図した場所を指さなくなることがあります。CSSや画像への参照を相対パスに直すと崩れにくくなります。大文字小文字が区別される環境もあるため、記述と実際のファイル名が一致しているかも確認してください。" } }, { "@type": "Question", "name": "修正したのに表示が変わりません", "acceptedAnswer": { "@type": "Answer", "text": "古い表示がブラウザのキャッシュに残っている可能性があります。スーパーリロード（強制再読み込み）や、シークレットウィンドウで開き直して最新状態を確認してください。それでも変わらない場合は、更新したファイルが実際に公開先へ反映されているかを見直します。" } }, { "@type": "Question", "name": "CSSや画像をまとめて公開するにはどうすればよいですか", "acceptedAnswer": { "@type": "Answer", "text": "HTML・CSS・画像を1つのフォルダにまとめ、参照を相対パスにしてZIPに圧縮します。ギガサイト便ならそのZIPをアップロードするだけで、フォルダ構成を保ったまま共有URLとして公開でき、リンク切れによる崩れを防ぎやすくなります。" } }, { "@type": "Question", "name": "原因が分からないときはどこから確認すべきですか？", "acceptedAnswer": { "@type": "Answer", "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。" } } ] } ```