@media screen and (max-width:〇〇px)のとき

初歩的な質問ですみません。
レスポンシブ対応のサイトを作る際、

@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

sasnight

2019/11/26 14:26

それが発生するソースコードを提示いただけますか.

sunred7083

2019/11/26 14:58

コードを追加しました

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず、これを試してください。

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

LibertyBell3

総合スコア1084

sunred7083

2019/11/26 22:15

これで解決しました。ありがとうございました。

LibertyBell3

2019/11/26 22:39

いえいえ、解決してなによりです。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

@media screen and (max-width:〇〇px)のとき

関連した質問