🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
サーバ

サーバは、 クライアントサーバモデルにおいてクライアントからの要求に対し 何らかのサービスを提供するプログラムを指す言葉です。 また、サーバーソフトウェアを稼動させているコンピュータ機器そのもののことも、 サーバーと呼ぶ場合もあります。

HTML

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

CSS

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

Q&A

解決済

1回答

513閲覧

オフラインで見える写真がサーバーに入れてオンラインで見ると写真が見えなくなる

KeisukeCasey

総合スコア14

サーバ

サーバは、 クライアントサーバモデルにおいてクライアントからの要求に対し 何らかのサービスを提供するプログラムを指す言葉です。 また、サーバーソフトウェアを稼動させているコンピュータ機器そのもののことも、 サーバーと呼ぶ場合もあります。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/11/25 02:26

class=coverで指定している背景写真がオフラインでは見えるのに、オンラインでは見えなくなってしまう現象に悩まされています。サーバはエックスサーバーを使っています。コードのせいでしょうか?
かれこれ2日間悩んでいるのですが自己解決できず...HTML、CSS、サーバにお詳しい方、お知恵を拝借したくお手数ですがどうぞよろしくお願いします。

イメージ説明

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<title>TARO TEST TEST 1</title> 5<meta charset="UTF-8"> 6<link rel="stylesheet" href="Question.css"> 7</head> 8 9<body> 10 11<div> 12<img src="img/cover.jpg" alt="cover" width="100%" height="Auto" class="cover"> 13 14<div class="name">TARO TEST<br>TEST1 15</div> 16 17<div class="introduction">This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_. 18</div> 19<div class="footnote">Copyright © <?php echo date("Y"); ?> TEST TEST - All rights reserved.</div> 20</div> 21 22 23<div class="oddnumber"> 24 <h1>1. CONTENT</h1> 25 <p>This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text_This is a test text.</p> 26 <img src="img/Turkish.jpg" alt="test example1" width="35%" height="auto" class=img2> 27</div> 28 29</body> 30</html>

CSS

1<style type="text/css"> 2 3.cover{ 4position:relative; 5z-index:2; 6background-position: center center; 7background-repeat: no-repeat; 8background-attachment: fixed; 9background-size: cover; 10background-color: #464646; 11} 12 13.name{ 14position:absolute; 15color:tomato; 16font-size:45px; 17left:45px; 18top:45%; 19z-index:3; 20} 21 22.introduction{ 23background-color:rgba(0,0,0,0.5); 24color:white; 25font-size:12px; 26height:auto; 27width:57%; 28padding:60px 60px 60px 60px; 29text-align:left; 30position:absolute; 31bottom:150px; 32right:0px; 33z-index:4; 34} 35 36.footnote{ 37position: absolute; 38bottom:0; 39z-index:5; 40background-color:black; 41font-size:12px; 42color:white; 43width:100vw; 44padding:20px; 45margin:0; 46text-align:center; 47} 48 49.oddnumber{ 50text-align:center; 51margin:0px; 52padding: 150px; 53background-image: linear-gradient(To Bottom, #fdfcfb 0%, lightgrey 80%); 54z-index:1; 55} 56 57img.img2{ 58margin:10px; 59} 60 61body{ 62padding:0; 63margin:0; 64} 65 66</style>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2019/11/25 02:28

ブラウザのコンソールにエラーは出ていませんか?
m.ts10806

2019/11/25 02:52

オフラインではPHPは動作しないんでは
KeisukeCasey

2019/11/25 03:44

>maisumakun様 コンソールにエラーが出てました。まさしくcover.jpgの画像に関するところで、↓のようにコメントが出てました。 Failed to load resource: the server responded with a status of 404 (Not Found)
guest

回答1

0

ベストアンサー

状況がよくわからないですね

class=coverで指定している背景写真がオフラインでは見える

class=coverがついてるimgのことですかね?
imgは背景ではないと思いますけど・・・
単純にimgディレクトリに画像ファイルがおかれてないだけでは?

投稿2019/11/25 03:17

yambejp

総合スコア116661

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KeisukeCasey

2019/11/25 03:38

>class=coverがついてるimgのことですかね? そうです >単純にimgディレクトリに画像ファイルがおかれてないだけでは? 別の画像(赤色の四角の画像)が同じimgフォルダに入ってるのですが、そちらはオンラインでも表示されているため置き場所の問題ではないのかな...と思っています。
yambejp

2019/11/25 03:49

ブラウザの開発ツールで確認してみてください404エラーがでているのでは?
KeisukeCasey

2019/11/25 04:05

コンソールにエラーが出てました。まさしくcover.jpgの画像に関するところで、↓のようにコメントが出てました。 Failed to load resource: the server responded with a status of 404 (Not Found)
yambejp

2019/11/25 04:08 編集

404はまさに「Not Found」つまり「そんなファイルはないよ」ですから パスやファイル名が間違えているか、そもそもそのファイルがないかのどちらかでしょう まずは「置き場所の問題ではないのかな」という思い込みを捨てるところから始めてください
KeisukeCasey

2019/11/25 04:16

原因がわかってしまいました。 ファイル名のcover.jpgがCover.jpgになるべきでした。 今、自分のアホさ加減に泣いています。 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問