ご覧いただきありがとうございます。
現在、作成したテンプレートのレスポンシブデザインを作成しております。
通常のデザインが、要素内に背景画像を設定し、その上に本文を載せるというものになっているので、そのまま画面サイズに応じて縮小させたいのですが、背景画像は縮小できたものの本文が背景を設置した要素を避けて、下に表示(下の要素と重なって表示)されてしまいます。
色々調べましたがどうも改善できそうにないのでどなたかお力を貸していただけないでしょか。
画像はスマホでみた場合の現在の状態です。
HTML・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="sstemp1.css"> <title>template sample</title> </head> <body> <div id="top"> <!--ここからヘッダー--> <header> <div class="header-menu"> <ul class="menu-list"> <li><a href="#about">about</a></li> <li><a href="#main">main</a></li> <li><a href="#bookmark">bookmark</a></li> <li><a href="#other">other</a></li> <li><a href="#contact">contact</a></li> </ul> </div> <div class="header-top"> <div class="header-contents"> <h1><a href="">Web Site Title</a></h1> <p>この背景画像のサイズは800x500ピクセルです。</p> </div> </div> </header> <!--ここまでヘッダー--> <!--ここからコンテンツ--> <div id="contents"> <div id="about" class="contents-style"> <div class="contents-menu"> <h2>about</h2> </div> </div> <div class="up"><a href="#">△</a></div> <div id="main" class="contents-style"> <div class="contents-menu"> <h2>main</h2> </div> <div class="contents-top"> <h3>novel</h3> </div> </div> <div class="up"><a href="#">△</a></div> <div id="bookmark" class="contents-style"> <div class="contents-menu"> <h2>bookmark</h2> </div> </div> <div class="up"><a href="#">△</a></div> <div id="other" class="contents-style"> <div class="contents-menu"> <h2>other</h2> </div> </div> <div class="up"><a href="#">△</a></div> <div id="contact" class="contents-style"> <div class="contents-menu"> <h2>contact</h2> </div> </div> <div class="up"><a href="#">△</a></div> </div> <!--ここまでコンテンツ--> <!--ここからフッター--> <footer></footer> <!--ここまでフッター--> </div> </body> </html>
●CSS●
@charset "utf-8"; * { box-sizing: border-box; } body { font-size: 15px; color: rgb(140,120,93); font-family: '游ゴシック体', 'Yu Gothic', 'YuGothic', 'MS ゴシック', sans-serif; font-weight: 500; background-image: url(img/back.jpg) } body p { margin: 0px; } body a { color: rgb(90,80,100); text-decoration: none; border-bottom:2px dotted rgb(90,80,100); transition: .5s; } body a:hover { opacity: 0.4; } #top { width: 800px; margin: 80px auto; } /*ここからヘッダー*/ header { margin-bottom: 100px; } .menu-list { width: 100%; margin: 0; padding: 0; overflow: hidden; } .menu-list li{ list-style: none; float: left; width: 20%; text-align: center; vertical-align: middle; display:table-cell; background-color: rgba(140,120,93,0.7); } .menu-list li a { display: inline-block; padding: 10px; width: 100%; height: 100%; color: rgba(255,255,255,0.8); border: none; } .menu-list li a:hover { background-color: rgba(0,0,0,0.6); } .header-top { height: 500px; background-image: url(img/illust3.png); background-color: rgba(255,255,255,0.6); } .header-contents { padding: 10px; width: 400px; } .header-contents h1 { font-family: 'Times New Roman', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'MS ゴシック', sans-serif; } /*ここまでヘッダー*/ /*ここからコンテンツ*/ .contents-style { margin-top: 80px; padding: 0px; } .contents-style h2 { margin: 0; padding: 1px 10px; color: rgba(255,255,255,0.8); background-color: rgba(140,120,93,0.7); } .contents-top { padding: 10px; background-color: rgba(255,255,255,0.6); background-size: cover; } .contents-top h3 { padding: 0; margin: 0; } .up { text-align: right; } /*ここまでコンテンツ*/ /*ここからフッター*/ /*ここまでフッター*/ /*ここからサンプルページCSS*/ .page-sample { width: 90%; margin: 0 auto; padding: 15px 15px; background-color: rgba(255,255,255,0.6); } .page-sample h3 { margin-top: 0; } /*ここまでサンプルページCSS*/ /*ここからレスポンシブデザイン*/ @media (max-width:800px) { #top { width: 95%; margin: 0 auto; } .header-top { background-image: none; } .header-top { height: 0; padding-top: 62.5%; background-image: url(img/illust3.png); -webkit-background-size: contain; } .header-contents { width: 100%; } .menu-list li{ width: 20%; } /*ここまでレスポンシブデザイン*/
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/25 13:22