Q&A
それが発生するソースコードを提示いただけますか.
初歩的な質問ですみません。
レスポンシブ対応のサイトを作る際、
@media screen and (max-width:750px){}
といった感じに書いた後、ブラウザのサイズを縮めたとき（あるいはスマホでサイトを閲覧したとき）に、画像のように右の方にスクロールが出来てしまいます。
何か解決策はないでしょうか。
練習用ですがコードを追記しました。
HTML
1<DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>練習</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/slicknav.min.css"> 8 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css"> 9 <link rel="stylesheet" href="css/style.css"> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 11</head> 12 13<body> 14 <header> 15 <a href="index.html"><img src="images/headertest.jpg"></a> 16 </header> 17 18 <nav> 19 <ul id="menu"> 20 <li><a href="index.html">Top</a></li> 21 <li><a href="#">Introduction</a></li> 22 <li><a href="#">Menu</a></li> 23 <li><a href="#">Contact</a></li> 24 </ul> 25 </nav> 26 27 <article> 28 <h1>ああああ</h1> 29 </article> 30 31 <aside> 32 <h1>いいいい</h1> 33 <img src="images/headertest.jpg"> 34 <img src="images/bannertext.jpg"> 35 </aside> 36 37 <footer> 38 <p>うううう</p> 39 </footer> 40 41 <script src="js/jquery-3.4.1.min.js"></script> 42 <script src="js/jquery.slicknav.min.js"></script> 43 <script src="js/script.js"></script> 44</body> 45</html> 46</DOCTYPE>
CSS
1@charset "utf-8"; 2 3body { 4 background-color: white; 5 width: 960px; 6 margin: 0 auto 0 auto; 7} 8 9/* ヘッダー */ 10header { 11 width: 960px; 12 background-color: antiquewhite; 13} 14header img { 15} 16@media screen and (max-width: 750px) { 17 header img { 18 width: 0; 19 height: 0; 20 } 21} 22 23/* ナビゲーションエリアの設定 */ 24nav { 25 text-align: center; 26 width: 960px; 27 background-color: azure; 28} 29nav ul li { 30 list-style: none; 31 display: inline-block; 32} 33nav ul li a { 34 text-align: center; 35 text-decoration: none; 36 width: 130px; 37 line-height: 70px; 38 overflow: hidden; 39 font-size: 24px; 40 font-weight:bold; 41 color: black; 42 background-color: aqua; 43} 44#menu { 45 display: none; 46} 47nav ul li a:hover { 48 background-color: black; 49 color: white; 50} 51 52@media screen and (min-width: 750px) { 53 #menu { 54 display: block; 55 } 56 .slicknav_menu { 57 display: none; 58 } 59} 60.slicknav_menu:before { 61 width: 180px; 62 height: 50px; 63 float: left; 64 background-image: ; 65 background-repeat: no-repeat; 66 background-position: center left; 67 background-size: 100%; 68 content: ""; 69 margin: 0 0 0 19px; 70} 71.slicknav_menu { 72 width: 100%; 73 position:absolute; 74 top: 0; 75 width: 100%; 76 z-index: 10000; 77 background-color: #280000; 78} 79 80/* 本文 */ 81article { 82 width: 760px; 83 background-color: beige; 84 padding: 0 0 1000px 0; 85 float: left; 86} 87article h1 { 88 font-size: 100px; 89} 90@media screen and (max-width: 750px) { 91 article { 92 width: 100%; 93 margin: 60px 0 0 0; 94 } 95} 96 97/* aside */ 98aside { 99 width: 200px; 100 background-color: blanchedalmond; 101 margin: 0; 102 float: right; 103} 104aside img { 105 display: inline-block; 106 width: 200px; 107} 108@media screen and (max-width: 750px) { 109 aside { 110 width: 100%; 111 } 112 aside img { 113 width: 27%; 114} 115 116/* footer */ 117footer { 118 clear: both; 119 width: 960px; 120 background-color: chartreuse; 121} 122footer p { 123 font-size: 30px; 124} 125
回答1件
0
ベストアンサー
とりあえず、これを試してください。
CSS
1#wrapper { 2 width:100%; 3 overflow:hidden; 4}
HTML
1<div id="wrapper"> 2 <header>から<footer>までを突っ込む。 3</div>
投稿2019/11/26 15:55
総合スコア1084
あなたの回答
tips
プレビュー
