質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

制作したwebページが表示されない

kyozo
kyozo

総合スコア3

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0グッド

0クリップ

203閲覧

投稿2023/01/25 03:41

編集2023/01/25 04:14

前提

HTML5で自社ホームページを作成中です。
Free CSSというサイトからベースとなるファイルをDLし、編集し公開しようと思っております。
選んだデザインは下記です。
https://www.free-css.com/free-css-templates/page198/istria-1

実現したいこと

問題なく表示されるように公開をしたい。

発生している問題・エラーメッセージ

実際にサーバにアップロードすると、ソースコードは確認できるが通常通り表示されない。

<body>に設定したカラーが表示されるのみ。

WEBブラウザで確認したエラーログは下記です。

Mixed Content: The page at 'https://ドメイン/test/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'. This request has been blocked; the content must be served over HTTPS. jquery.matchHeight-min.js:11 Uncaught ReferenceError: jQuery is not defined at jquery.matchHeight-min.js:11:366 (anonymous) @ jquery.matchHeight-min.js:11 animsition.min.js:8 Uncaught ReferenceError: jQuery is not defined at animsition.min.js:8:149 at animsition.min.js:8:157 (anonymous) @ animsition.min.js:8 (anonymous) @ animsition.min.js:8 ドメイン/:1 Mixed Content: The page at 'https://ドメイン/test/' was loaded over HTTPS, but requested an insecure script 'http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'. This request has been blocked; the content must be served over HTTPS. jquery.parallax-scroll.js:1 Uncaught ReferenceError: $ is not defined at jquery.parallax-scroll.js:1:1 (anonymous) @ jquery.parallax-scroll.js:1 owl.carousel.min.js:47 Uncaught ReferenceError: jQuery is not defined at owl.carousel.min.js:47:415 (anonymous) @ owl.carousel.min.js:47 jquery.cbpQTRotator.min.js:11 Uncaught ReferenceError: jQuery is not defined at jquery.cbpQTRotator.min.js:11:2229 (anonymous) @ jquery.cbpQTRotator.min.js:11 (index):237 Uncaught ReferenceError: $ is not defined at (index):237:5 (anonymous) @ (index):237 (index):251 Uncaught ReferenceError: $ is not defined at (index):251:2 (anonymous) @ (index):251 functions.js:11 Uncaught ReferenceError: $ is not defined at functions.js:11:1

試したこと

Modernizrの機能を使用したことがなかったため、ここの箇所に問題があるのかと思い最新のファイルに更新したり、Modernizrの機能を削除しましたが状況は変わりませんでした。

キャッシュのクリア、各種ブラウザで表示を試みましたが状況は変わらずでした。

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

補足情報(FW/ツールのバージョンなど)

最終的に自分で編集したものに何か問題があるのかと思い、未編集のまま一度サーバへアップロードしたところ、そもそもの段階でサーバへアップロードしても表示がされませんでした。

ローカルでは問題なく表示できていたので、いざサーバへアップロードしたところ表示されなかったので困っております。
このテンプレートの使用を諦めればよいのですが、一度社内でこのテンプレートを使用すると決定になったため、どうにかして表示できるよう解決したいです。
ご教示お願いいたします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

y_waiwai

2023/01/25 03:52

通常通り表示されない、とは、どういうふうに表示されるんでしょうか
AbeTakashi

2023/01/25 03:53

WEBブラウザのコンソールに何かログが出ていないか? サーバのエラーログに何か出ていないか?などを最初に確認すべきかと思います。その内容を見ても原因が分からない場合は、質問文にその内容を追記してください。現状の質問内容だけだと第三者には雲をつかむような話で、何が起きてるか分からないです。
kyozo

2023/01/25 03:55

<body>に設定したカラーが表示されるのみです。 設定した画像やテキストが表示されない状況です。 choromeの検証機能やソースコード表示では確認できます。
kyozo

2023/01/25 04:00

AbeTakashiさん ご指摘ありがとうございます。 すみません、エラーの確認をしておりませんでした。 めちゃくちゃエラーでておりました...! Mixed Content: The page at 'https://ドメイン/test/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'. This request has been blocked; the content must be served over HTTPS. jquery.matchHeight-min.js:11 Uncaught ReferenceError: jQuery is not defined at jquery.matchHeight-min.js:11:366 (anonymous) @ jquery.matchHeight-min.js:11 animsition.min.js:8 Uncaught ReferenceError: jQuery is not defined at animsition.min.js:8:149 at animsition.min.js:8:157 (anonymous) @ animsition.min.js:8 (anonymous) @ animsition.min.js:8 ドメイン/:1 Mixed Content: The page at 'https://ドメイン/test/' was loaded over HTTPS, but requested an insecure script 'http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'. This request has been blocked; the content must be served over HTTPS. jquery.parallax-scroll.js:1 Uncaught ReferenceError: $ is not defined at jquery.parallax-scroll.js:1:1 (anonymous) @ jquery.parallax-scroll.js:1 owl.carousel.min.js:47 Uncaught ReferenceError: jQuery is not defined at owl.carousel.min.js:47:415 (anonymous) @ owl.carousel.min.js:47 jquery.cbpQTRotator.min.js:11 Uncaught ReferenceError: jQuery is not defined at jquery.cbpQTRotator.min.js:11:2229 (anonymous) @ jquery.cbpQTRotator.min.js:11 (index):237 Uncaught ReferenceError: $ is not defined at (index):237:5 (anonymous) @ (index):237 (index):251 Uncaught ReferenceError: $ is not defined at (index):251:2 (anonymous) @ (index):251 functions.js:11 Uncaught ReferenceError: $ is not defined at functions.js:11:1
AbeTakashi

2023/01/25 04:08

↑ は質問文に追記してください(ここは見ない人がいるので)。 ですが、原因は明白ですね。 「This request has been blocked; the content must be served over HTTPS.」ですので、まずはそちらを対応されるべきかと思います。
kyozo

2023/01/25 04:11

質問文の方に追記します! 度々すみません。ご教示いただきありがとうございます。 原因のご指摘もありがとうございます。
AbeTakashi

2023/01/25 04:17

素直にhttps化するか、jsをCDNからとってくるのをやめて同じサーバ内に置くかすれば直りそうな気はしますね。うまく解決したら自己解決としていただくといいかと思います。
kyozo

2023/01/25 04:38

解決しました! httpsで経由したアドレスに修正したらあっさり表示されました...!!!! ご丁寧にご教示いただき本当にありがとうございます>< 助かりました。 エラー表示の知識が不足していたためすぐに特定できませんでしたが、Abeさんのおかげで解決することができました。 本当にありがとうございます。

回答1

1

自己解決

ブラウザで確認したエラーログ
「This request has been blocked; the content must be served over HTTPS.」
上記のエラーを解消することで解決しました。

DLしたテンプレートが古いものだったため、googleのCDNのURLをhttpsのものに修正し、無事に表示させることができました。

投稿2023/01/25 04:41

kyozo

総合スコア3

AbeTakashi😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。