---
title: "外部CDNのCSS・JSが読み込めないときの対処"
description: "CDNからCSSやJSを読み込む構成にしたらデザインが崩れて機能が動かなくなった方向け。URLの誤りやHTTPSの混在・バージョン指定の問題を原因ごとに整理し、確認と修正の手順を把握できます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/external-cdn-not-loading"
markdown: "https://giga-site.com/articles/external-cdn-not-loading/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-22"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 外部CDNのCSS・JSが読み込めないときの対処

ライブラリのCSSやJavaScriptをCDNから読み込む構成は手軽ですが、ギガサイト便で公開するとデザインが崩れたり機能が動かなかったりすることがあります。原因はCDNのURLの誤りやHTTPSの混在、バージョン指定の問題などです。この記事では症状の切り分けから、自分でできる確認、ギガサイト便での対処手順、そして安定して公開するための予防策までを順に説明します。

> Source HTML: https://giga-site.com/articles/external-cdn-not-loading
> Article index: https://giga-site.com/articles/index.md

## 症状の確認：崩れか無反応かを見る

デザインが崩れている場合はCSSの読み込みに失敗している可能性が高く、ボタンや動きが反応しない場合はJavaScriptの読み込みに失敗していると考えられます。どちらが効いていないかで原因の見当が変わります。

開発者ツールのネットワークタブを開き、CDNから読み込むファイルが正常に取得できているか、エラーになっていないかを確認してください。これが切り分けの基本です。

## よくある原因：URLの誤りと混在コンテンツ

もっとも多いのは、CDNのURLが間違っている、または古くて存在しなくなっているケースです。バージョン番号の指定ミスやタイプミスで404になっていることがあります。

次に多いのが、HTTPSのページからHTTPのCDNを読み込もうとして混在コンテンツとしてブロックされる問題です。また、ローカルでファイルを開いて確認していたときには動いていたものが、公開環境では別の挙動になることもあります。

- CDNのURLが間違っている、または古い
- バージョン指定が存在しないものになっている
- HTTPのCDNを読み込んでブロックされている
- 読み込み順が逆でライブラリ未定義のまま処理が走る

## 症状別チェック表

外部CDNのCSS・JSが読み込めないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

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

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

## 自分でできる確認：ネットワークタブで状態を見る

ネットワークタブでCDNのファイルが404やブロックになっていないか確認します。404ならURLの誤り、ブロックなら混在コンテンツが疑われます。

URLを直接ブラウザのアドレスバーに貼り付けて開いてみると、そのファイルが実在するか手早く確認できます。表示されなければURLが間違っています。HTTPSのURLになっているかも合わせて見ておきましょう。

## ギガサイト便での対処手順

CDNに依存せず確実に動かしたい場合は、CSSやJavaScriptのファイルをダウンロードして自分のZIPに同梱し、相対パスで読み込む方法が有効です。これなら外部の都合に左右されず安定します。

以下の手順で見直してください。CDNを使い続ける場合はHTTSのURLに統一します。

1. 必要なCSS・JSファイルをダウンロードしてフォルダにまとめる
2. HTMLの読み込み先を相対パスに書き換える
3. CDNを使う場合はHTTPSのURLに統一する
4. ライブラリの読み込み順が正しいか確認する
5. フォルダごとZIPに圧縮してギガサイト便で公開する
6. 発行URLを開いてデザインと動作を確認する

## 予防：依存ファイルは同梱して安定させる

共有先の環境やネットワークによっては外部CDNにアクセスできないこともあります。重要なページでは、依存するCSSやJavaScriptをZIPに同梱しておくと、外部要因に左右されず安定して表示できます。

CDNを使う場合でも、必ずHTTSのURLにそろえ、公開前にネットワークタブで全ファイルが正常に読み込まれることを確認してから公開する習慣をつけましょう。

## よくある質問

### 公開したらデザインだけ崩れました。

CDNから読み込むCSSの取得に失敗している可能性が高いです。開発者ツールのネットワークタブで該当ファイルが404やブロックになっていないか確認してください。URLの誤りか混在コンテンツが主な原因です。

### CDNを使わずに済ませる方法はありますか。

必要なCSSやJavaScriptをダウンロードして自分のZIPに同梱し、相対パスで読み込めば、外部CDNに依存せず公開できます。ギガサイト便はZIPでまとめて公開できるためこの方法が有効です。

### 混在コンテンツのエラーが出ます。

HTTPSのページからHTTPのCDNを読み込むとブロックされます。CDNのURLをHTTPSに変えるか、ファイルを自分のZIPに含めて相対パスで読み込むことで解決します。

### ライブラリが未定義というエラーが出ます。

読み込み順が逆になっている可能性があります。ライブラリ本体を先に読み込み、それを使う自作スクリプトを後に読み込むようにHTML内の順序を見直してください。

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

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

## 関連記事

- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [外部APIが呼べない・データが出ないときの対処](https://giga-site.com/articles/external-api-not-working/index.md)
- [CSSファイルが読み込まれずスタイルが全く当たらないときの対処（相対パス）](https://giga-site.com/articles/css-not-loading-relative-path/index.md)
- [reCAPTCHAが表示されない・認証できないときの確認点](https://giga-site.com/articles/recaptcha-not-loading/index.md)
- [Stripeの決済ボタンやCheckoutが表示されないときの対処](https://giga-site.com/articles/stripe-checkout-not-loading/index.md)
- [Mixed Content警告でhttpリソースがブロックされるときの対処](https://giga-site.com/articles/mixed-content-blocked/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "外部CDNのCSS・JSが読み込めないときの対処",
  "description": "CDNからCSSやJSを読み込む構成にしたらデザインが崩れて機能が動かなくなった方向け。URLの誤りやHTTPSの混在・バージョン指定の問題を原因ごとに整理し、確認と修正の手順を把握できます。",
  "datePublished": "2026-06-22",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/external-cdn-not-loading",
  "url": "https://giga-site.com/articles/external-cdn-not-loading",
  "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": "CDNから読み込むCSSの取得に失敗している可能性が高いです。開発者ツールのネットワークタブで該当ファイルが404やブロックになっていないか確認してください。URLの誤りか混在コンテンツが主な原因です。"
      }
    },
    {
      "@type": "Question",
      "name": "CDNを使わずに済ませる方法はありますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "必要なCSSやJavaScriptをダウンロードして自分のZIPに同梱し、相対パスで読み込めば、外部CDNに依存せず公開できます。ギガサイト便はZIPでまとめて公開できるためこの方法が有効です。"
      }
    },
    {
      "@type": "Question",
      "name": "混在コンテンツのエラーが出ます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTTPSのページからHTTPのCDNを読み込むとブロックされます。CDNのURLをHTTPSに変えるか、ファイルを自分のZIPに含めて相対パスで読み込むことで解決します。"
      }
    },
    {
      "@type": "Question",
      "name": "ライブラリが未定義というエラーが出ます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "読み込み順が逆になっている可能性があります。ライブラリ本体を先に読み込み、それを使う自作スクリプトを後に読み込むようにHTML内の順序を見直してください。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```