はじめに

サイトにjQueryを拡張するライブラリ（プラグイン）の一種でjQuery UIを利用しダイアログを表示しようとしたときに出たエラーです。

HTMLのheader部分にライブラリを読み込むため、以下のような記述をプラスし


<link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />

今回はherokuを利用してデプロイしました。

エラー内容

そうするとクリックしてもダイアログがうまく表示されず。

検証ツールでコンソールを見てみると赤文字でエラーの表示がでてました。

Mixed Content: The page at 'https://home-game-center.herokuapp.com/' was 
loaded over HTTPS, 
but requested an insecure stylesheet 'http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css'.
This request has been blocked; the content must be served over HTTPS.

「httpからのリンクなんで読み込めませんよ」とのことのようです。実際そのページだけ必要なものが読み込めていない。

調べてみると、『HTTPSとHTTPの混合サイトで外部リンクが読み込めない』みたいです。

解決策

解決策としては
『（’https:/ or ‘http:/）は省略できる』
とのことなので記述を以下のようにしました。


<link type="text/css" rel="stylesheet"
  href="//code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />

href=のあとのhttp:を省略して再度デプロイすると本番環境でも正常にダイアログが出て解決しました！

しかし今度はローカルではうまく動作せずになりましたが（涙）

参考

リンクの http: や https: を省略して現在のプロトコルでリンク先にアクセスさせる
・https://qiita.com/arai-wa/items/d9b73539898d658b58c5