実現したいこと
スマホ対応のレスポンシブの作成
前提
ポートフォリオを作成しております。
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></body> </html><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>
該当のソースコード 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に問題があるかと思います。
