---
title: "Mixed Content警告でhttpリソースがブロックされるときの対処"
description: "HTTPSのページなのに画像やスクリプトが表示されずConsoleに「Mixed Content」と出て頭を抱えているすべての人へ。ブラウザがhttpリソースをブロックする仕組みから、該当箇所の特定と修正・回避策の選び方まで具体的に説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/mixed-content-blocked"
markdown: "https://giga-site.com/articles/mixed-content-blocked/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Mixed Content警告でhttpリソースがブロックされるときの対処

HTTPSで公開したページなのに、一部の画像やスクリプトが表示・実行されず、Consoleに「Mixed Content」と出る。これはhttpsのページからhttpのリソースを読もうとしてブラウザがブロックしている状態です。この記事では原因と、httpsへ統一して直す手順をまとめます。

> Source HTML: https://giga-site.com/articles/mixed-content-blocked
> Article index: https://giga-site.com/articles/index.md

## Mixed Contentとは何か

Mixed Content（混在コンテンツ）とは、httpsで配信されているページの中に、httpで読み込もうとしているリソースが混ざっている状態を指します。ページ自体は暗号化されているのに、一部のファイルだけ暗号化されていない経路で取りに行くため、ブラウザが安全のために止めます。

リソースの種類によって扱いが分かれます。スクリプトやスタイルなどページの動作に関わるものは強くブロックされ、画像などは警告にとどまることもありますが、近年のブラウザはまとめて止める方向に厳しくなっています。

## なぜブロックされるのか

httpsはページと利用者の間の通信を暗号化し、改ざんや盗み見を防ぎます。ところがその中にhttpの読み込みが一つでもあると、そこだけ第三者に書き換えられる余地が生まれ、ページ全体の安全性が崩れます。これを防ぐためにブラウザが混在を拒否します。

つまりMixed Contentはバグではなく、安全のための仕様です。直し方も「httpの読み込みをやめてhttpsに統一する」という方向で考えるのが正しく、ブラウザ側の警告を無視する方法を探すのは筋が良くありません。

## 症状別チェック表

Mixed Content警告でhttpリソースがブロックされるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

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

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

## httpの読み込みを見つけて直す手順

どのリソースがhttpで読まれているかを特定し、httpsに置き換えます。次の順で進めると漏れがありません。

1. F12でConsoleを開き、Mixed Contentの警告に書かれたURLを控える
2. そのURLがhttp://で始まっていることを確認する
3. HTML・CSS・JS内でそのURLを検索し、http://をhttps://に書き換える
4. src="http://" だけでなくCSSのurl()やfetch先も同様に確認する
5. 置き換え後に再読み込みし、警告が消えてリソースが表示・実行されるか確かめる

## https化できない外部リソースの扱い

参照先がhttpsに対応していない場合、URLをhttpsに変えただけでは取得できません。その外部サービスがhttpsのエンドポイントを提供していないか確認し、なければ自分のファイルとして取り込んでZIPに同梱し、相対パスで読み込む方法に切り替えます。

プロトコルを省略した //example.com/... のような書き方は、ページがhttpsなら自動でhttpsになりますが、参照先がhttps非対応だと結局取得できません。最終的には参照先がhttpsで配信できることが前提になります。

## https前提の環境で確認する

Mixed Contentはhttpsで配信されたページでしか起きないため、ローカルでファイルを直接開いて確認しているだけでは見落としがちです。本番がhttpsなら、確認もhttps環境で行うのが確実です。

ギガサイト便は共有URLがHTTPSで自動配信されるため、httpの読み込みが残っていればその場でブラウザが警告を出してくれます。HTMLやZIPをドロップして 〇〇.giga-site.com で開き、Consoleを確認しながらhttp://を一つずつhttps://に直していけます。同じURLのまま差し替えられるので、修正版をすぐ再検証できます。

## よくある質問

### 画像だけ表示されないのもMixed Contentですか

httpsのページからhttpで画像を読み込んでいれば、その可能性があります。Consoleにmixed contentの警告が出ていれば該当です。スクリプトやスタイルほど強くは止まりませんが、近年は画像も止まる傾向です。

### URLをhttpsに変えるだけで直りますか

参照先がhttpsに対応していれば直ります。対応していない場合は取得できないため、ファイルを自分側に取り込んでZIPに同梱し、相対パスで読み込む方法に切り替えてください。

### // で始まるパスにすれば解決しますか

プロトコル相対パスはページがhttpsなら自動でhttpsになりますが、参照先がhttps非対応だと取得できません。最終的には参照先がhttpsで配信できることが必要です。

### ブラウザの警告を無効化して回避できますか

回避は推奨しません。Mixed Contentは安全のための仕様であり、利用者ごとに設定も変わります。httpsに統一して根本から直す方が、誰の環境でも正しく表示されます。

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

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

## 関連記事

- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)
- [外部CDNのCSS・JSが読み込めないときの対処](https://giga-site.com/articles/external-cdn-not-loading/index.md)
- [mixed content（混在コンテンツ）とは？httpsページの警告](https://giga-site.com/articles/what-is-mixed-content/index.md)
- [http混在（mixed content）のセキュリティリスク](https://giga-site.com/articles/mixed-content-security/index.md)
- [overflow:hiddenで中身が切れて見えないときの対処](https://giga-site.com/articles/overflow-hidden-content-cut/index.md)
- [CSPでJS/CSSがブロックされるときの対処](https://giga-site.com/articles/content-security-policy-blocking/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Mixed Content警告でhttpリソースがブロックされるときの対処",
  "description": "HTTPSのページなのに画像やスクリプトが表示されずConsoleに「Mixed Content」と出て頭を抱えているすべての人へ。ブラウザがhttpリソースをブロックする仕組みから、該当箇所の特定と修正・回避策の選び方まで具体的に説明します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/mixed-content-blocked",
  "url": "https://giga-site.com/articles/mixed-content-blocked",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "画像だけ表示されないのもMixed Contentですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "httpsのページからhttpで画像を読み込んでいれば、その可能性があります。Consoleにmixed contentの警告が出ていれば該当です。スクリプトやスタイルほど強くは止まりませんが、近年は画像も止まる傾向です。"
      }
    },
    {
      "@type": "Question",
      "name": "URLをhttpsに変えるだけで直りますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "参照先がhttpsに対応していれば直ります。対応していない場合は取得できないため、ファイルを自分側に取り込んでZIPに同梱し、相対パスで読み込む方法に切り替えてください。"
      }
    },
    {
      "@type": "Question",
      "name": "// で始まるパスにすれば解決しますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "プロトコル相対パスはページがhttpsなら自動でhttpsになりますが、参照先がhttps非対応だと取得できません。最終的には参照先がhttpsで配信できることが必要です。"
      }
    },
    {
      "@type": "Question",
      "name": "ブラウザの警告を無効化して回避できますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "回避は推奨しません。Mixed Contentは安全のための仕様であり、利用者ごとに設定も変わります。httpsに統一して根本から直す方が、誰の環境でも正しく表示されます。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```