レスポンシブで画像が出ません。

実現したいこと

スマホ対応のレスポンシブの作成

前提

ポートフォリオを作成しております。
cssにスマホのレスポンシブを設定しようとしておりますが、
背景画像が表示されません。
また、背景以外の画像も表示されていません。

該当のソースコード HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>株式会社</title> </head> <body> <header class="flex"> <div class="delay-time01 box fadeIn"> <span id="tex"> <b>ク</b> </span> </div> <div class="delay-time02 box fadeIn"> <span id="tex"> <b>ロ</b> </span> </div> <div class="delay-time03 box fadeIn"> <span id="tex"> <b>ス</b> </span> </div> </header>

<div class="navbar">
  <ul class="nav-lists delay-time07 fadeIn">
    <img src="images/renraku.png" art="予約画面">
    <li>概要</li>
    <li><a href="index.html">トップページ</a></li>
    <li><a href="start.html">結成経緯</a></li>
    <li><a href="list.html">懸賞金リスト</a></li>
    <li><a href="mail.html">連絡画面</a></li>
  </ul>
</div>

<div class="contents">
  <aside>
    <div class="flexbox">
      <div class="delay-time08 box2 fadeIn">
        <div class="color-box2">
          <img src="images/kurokawa.png" art="クロカワ">
        </div>
        <h3>クロカワ</h3>
      </div>

      <div class="list-content">
        <div class="delay-time08 box3 fadeIn">
          <div class="color-box3">
            <img src="images/dada.png" art="ダダ">
          </div>
          <h3>ダダ</h3>
        </div>
  
        <div class="delay-time08 box3 fadeIn">
          <div class="color-box3">
            <img src="images/gyaru.png" art="ギャル">
          </div>
          <h3>アイカワ</h3>
        </div>
      </div>
    </div>
  </aside>

  <main>
    <div class="flexbox">
      <div class="delay-time08 box2 fadeIn">
        <div class="color-box1">
          <img src="images/peach.png" art="スモモ">
        </div>
        <h2>スモモ</h2>
      </div>

      <div class="list-content">
        <div class="delay-time08 box3 fadeIn">
          <div class="color-box3">
            <img src="images/morita.png" art="モリタ">
          </div>
          <h3>モリタ</h3>
        </div>
  
        <div class="delay-time08 box3 fadeIn">
          <div class="color-box3">
            <img src="images/kazi.png" art="カジ">
          </div>
          <h3>カジ</h3>
        </div>
      </div>
    </div>
  </main>

  <aside>
    <div class="flexbox">
      <div class="delay-time08 box2 fadeIn">
        <div class="color-box2">
          <img src="images/takada.png" art="タカダ">
        </div>
        <h3>タカダ</h3>
      </div>

      <div class="list-content">
        <div class="delay-time08 box3 fadeIn">
          <div class="color-box3">
            <img src="images/aida.png" art="アイダ">
          </div>
          <h3>アイダ</h3>
        </div>
  
        <div class="delay-time08 box3 fadeIn">
          <div class="color-box3">
            <img src="images/crew.png" art="社員">
          </div>
          <h3>社員の皆さん</h3>
        </div>
      </div>
    </div>
  </aside>
</div>

<footer>
  <h4>Copyright(C) CROSS ALL RIGHTS RESERVED.</h4>
</footer>

</body> </html>

該当のソースコード CSS

●背景のソースコード●

body {
width: 1425px;
margin:0 auto;
background-image:url(images/kuro.jpeg);
background-repeat: repeat;
background-position: center;
background-size: 30%;
}

header{
height: 150px;
width: 100%;
background-image:url(images/good.jpeg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}

.navbar {
width: 100%;
height: 50px;
background-color: white;
background-image:url(images/money.png);
background-repeat: repeat;
background-position: center;
background-size: 15%;
}

.navbar img {
width: 150px;
height: 50px;
border-radius: 50%;
}

footer{
height: 50px;
width: 100%;
background-image:url(images/good.jpeg);
text-align: center;
color:white;
}

●表示されない画像のソースコード●

.box2{
width: 300px;
height: 300px;
padding:10px 50px;
margin: 20px;
background-image:url(images/haisha.jpeg);
background-repeat:no-repeat;
background-size: cover;
color: black;
box-sizing:border-box;
}

.box3{
width: 200px;
height: 200px;
padding:10px 50px;
margin: 10px;
background-image:url(images/haisho.jpeg);
background-repeat:no-repeat;
background-size: cover;
color: black;
box-sizing:border-box;
flex-wrap: nowrap;
}

☆レスポンシブ☆

@media screen and (max-width: 520px) {
body {
font-size: 13px;
width: 50%;
}

main{
width: 100%;
margin-left: 0;
margin-bottom: 30px;
}

aside{
position: static;
width: 100%;
}

img {
width: 100%;
}
}

試したこと

background-sizeを追加・編集しても効果がありませんでした。

補足情報

文字は表示され、アニメーションも動いていたので、やはりcssに問題があるかと思います。

m.ts10806

2023/03/13 22:33

それぞれのファイルの配置はどうなっているのでしょう。

2ckD

2023/03/14 16:50

html、CSS、imagesディレクトリがすべて同じディレクトリにある必要がありますね。

shimonishi

2023/03/17 02:57

コメントして頂いた方々、ありがとうございました。仕事の都合上、返信が遅れてしまった事、お詫び申し上げます。 html・CSS・imagesは全てロリポップにて、同じフォルダ内に入れております。 imagesはそのフォルダ内で別のファイルとして入れております。パソコンからなら正しく表示され、スマホだと文字だけが表示されるので、 cssのレスポンシブの表記が間違っている、もしくは表記が足りないと思います。皆様のご意見を何卒お待ちしております。

m.ts10806

2023/03/17 03:09

質問は編集できます。文字での説明よりその階層が分かるキャプチャなどご提示ください。

2ckD

2023/03/18 10:07

相対パスの書き方に問題があると疑っていましたが、そうではなさそうですね。 class名にfade inとあるので、提示されているコード以外にCSS・JSがあるのでしょうけど、そこら変に原因があるのかもしれません...

回答1件

コメントして頂いた方々、ありがとうございました。
仕事の都合上、返信が遅れてしまった事、お詫び申し上げます。

html・CSS・imagesは全てロリポップにて、同じフォルダ内に入れております。
imagesはそのフォルダ内で別のファイルとして入れております。
パソコンからなら正しく表示され、スマホだと文字だけが表示されるので、
cssのレスポンシブの表記が間違っている、もしくは表記が足りないと思います。

皆様のご意見を何卒お待ちしております。

投稿2023/03/15 05:29

shimonishi