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

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

詳細はこちら
HTML

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

CSS

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

Q&A

解決済

1回答

451閲覧

オフラインでは見えるのに、サーバーに上げると写真(.cover)がネット上で見えなくなります

KeisukeCasey

総合スコア14

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/11/22 06:43

タイトルの通りです。.coverの写真が真っ白になってしまいます。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<title>MMMMMM MMMMMMM</title> 5<meta charset="UTF-8"> 6<link rel="stylesheet" href="style.css"> 7</head> 8 9<body> 10<ul> 11<li><a href="#a0">Home</a></li> 12<li><a href="#a1">Logo</a></li> 13<li><a href="#a2">Brochure Booklet</a></li> 14<li><a href="#a3">Bookcover</a></li> 15<li><a href="#a4">Poster</a></li> 16<li><a href="#a5">Photography</a></li> 17<li><a href="#a6">Product</a></li> 18</ul> 19 20<div id=a0 class="cover"> 21<img src="img/cover.jpg" alt="cover" width="100%" height="Auto" class="coverphoto"> 22 23<div class="name">MMMMM MMMM<br>MMMMMM 24</div> 25 26<div class="introduction">M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM M MMMMM MMMMMMMMM MMMMMMMMMMMMM. 27</div> 28<div class="footnote">Copyright © <?php echo date("Y"); ?> MMMMM MMMM - All rights reserved.</div> 29</div> 30 31<div class="work"> 32MMMMM 33</div> 34</body> 35</html>

CSS

1<style type="text/css"> 2 3.cover{ 4position:relative; 5bottom:100vh; 6left:100vw; 7z-index:2; 8} 9 10.name{ 11position:absolute; 12color:tomato; 13font-size:45px; 14left:45px; 15top:45%; 16z-index:3; 17} 18 19.introduction{ 20background-color:rgba(0,0,0,0.5); 21color:white; 22font-size:12px; 23height:auto; 24width:57%; 25padding:60px 60px 60px 60px; 26text-align:left; 27position:absolute; 28bottom:150px; 29right:0px; 30z-index:4; 31} 32 33.footnote{ 34position: absolute; 35bottom:0; 36z-index:5; 37background-color:black; 38font-size:12px; 39color:white; 40width:100vw; 41padding:20px; 42margin:0; 43text-align:center; 44} 45 46.work{ 47top:100vh; 48position:absolute; 49margin:0; 50z-index:1; 51}

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

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

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

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

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

Takumiboo

2019/11/22 07:07

サーバ上でも同じディレクトリ構造、ファイル配置は維持できているのでしょうか。
KeisukeCasey

2019/11/22 12:30

同じディレクトリ構造、ファイル配置できてます。 質問にミスがあったので、一旦締め切って再度質問し直します。
Takumiboo

2019/11/22 13:43

質問は編集できますよ
guest

回答1

0

ベストアンサー

.coverのidに、「"」が付いていないのが悪さしてませんか?
あと、cssでvh,vwを多く使われてますが、positionでvh使うと画面の大きさ分移動するので消えているように見えているのかもしれません。

投稿2019/11/22 07:28

uemaSR

総合スコア257

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

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

KeisukeCasey

2019/11/22 12:31

質問にミスがあったので、一旦締め切って再度質問し直します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問