スマホ対応のためにメディアクエリでサイドバーをdisplay:noneしたいのですがユーザーエージェントが絡んでできません

前提・実現したいこと

自分のサイトをスマホ対応しようと思い、メディアクエリでスマホの幅のときにサイドバーを消そうと思ったので、それをCSSのdisplay:noneで消そうとしたのですが、スマホの幅にしてもサイドバーが消えません（消えないというよりは、装飾とかが全くない状態で本文記事の上部に書かれてしまう）。

Chromeの機能で調べてみたら、user agent stylesheetが何故か勝手にサイドバーについてしまっていて、勝手にdisplay:blockが設定されていました。それをリセットCSSやnormalize.cssで上書きしようとも試みましたがやっぱり上手く行かず、user agentのほうも上書きできません。

該当のソースコード

HTML
1<body>
2<div class="main">
3<header>
4<h1>（h1）</h1>
5</header>
6<article>
7<nav>
8<h2>メニュー</h2>
9<ul>
10<li><a href="index.php">トップページ</a></li>
11</ul>
12<h3>サイドバー見出し1</h3>
13<ul>
14<li><a href="">リンク1</a></li>
15<li><a href="">リンク2</a></li>
16</ul>
17<h3>サイドバー見出し2</h3>
18<ul>
19<li><a href="">リンク1</a></li>
20<li><a href="">リンク2</a></li>
21<li><a href="">リンク3</a></li>
22<li><a href="">リンク4</a></li>
23</ul>
24<h3>サイドバー見出し3</h3>
25<ul>
26<li><a href="">リンク1</a></li>
27<li><a href="">リンク2</a></li>
28<li><a href="">リンク3</a></li>
29</ul>
30<h2>サイドバー見出し4</h2>
31<ul>
32<li><a href="">リンク1</a></li>
33<li><a href="">リンク2</a></li>
34<li><a href="">リンク3</a></li>
35</ul>
36</nav>
37<div class="article2">
38(本文記事内容)
39</div>
40<div class="clear"></div>
41</article>
42<footer>
43Copyright © 2020 Misato Aoba All Rights Reserved.
44</footer>
45</div>
46</body>

CSS
1@import "normalize.css";
2
3*{
4    margin:0px;
5    padding:0px;
6}
7
8body{
9    background-color: #ffc;
10    font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
11    font-weight: 500;
12    font-size: 18px;
13}
14
15a{
16    color:#333;
17    text-decoration: none;
18}
19a:hover{
20    text-decoration: underline;
21}
22
23.main{
24    margin:0.5em auto;
25    padding:0px;
26    width:1200px;
27    border:1px solid #fff;
28    background-color: #fff;
29}
30
31p{
32    margin:0.4em;
33}
34
35@media screen and (max-width:480px){
36    .main{
37        width:480px;
38    }
39    nav h2,nav h3,nav ul,nav li,nav div.googlesearch{
40        display: none !important;
41    }
42    div.article2{
43        width:480px;
44    }
45    div.clear{
46        display:none;
47    }
48}
49
50@media screen and (min-width:1200px){
51    .main{
52        width:1200px;
53    }
54    nav{
55        float: left;
56        margin:0.6em 0.2em;
57    }
58    nav a{
59        color:#333;
60    }
61    nav h2{
62        font-size:1.4em;
63        color:white;
64        background-color:#5D99FF;
65        font-weight:normal;
66        padding:0.1em 0.3em;
67    }
68    nav h3{
69        font-size:1.1em;
70        color:white;
71        background-color:#75A9FF;
72        font-weight:normal;
73        padding:0.1em 0.3em;
74        margin-left: 0.2em;
75        border-radius: 0px 20px 20px 0px;
76    }
77    nav ul{
78        margin:0.3em 0px;
79    }
80    nav li{
81        list-style: none;
82        background-color:white;
83        border-style:solid;
84        border-color:#8EF1FF;
85        border-width:0px 0px 1px 5px;
86        padding:0.4em 0px 0.4px 0.2em;
87        margin:0px 0.2em 0px 0.2em;
88    }
89    nav li a{
90        text-decoration: none;
91        display:block;
92    }
93    nav div.googlesearch{
94        width:100%;
95        max-width: 270px;
96        margin:0px auto;
97    }
98    div.article2{
99        width:900px;
100        float: right;
101    }
102    div.clear{
103        clear:both;
104    }
105}

Lhankor_Mhy

2020/08/24 05:51

「サイドバー」とは nav h2,nav h3,nav ul,nav li,nav div.googlesearch と div.clear のことですよね？ご提示のコードを試してみましたが、480px以下のブレイクポイントで「サイドバー」は非表示になり、「本文記事の上部に書かれてしまう」ということを起きませんでした。おそらく、ご提示いただいていない部分のコードに問題があるのだと思います。

aoba_misato

2020/08/24 07:32

はい、ほぼほぼ間違いないです。もっと簡単に言うと、navタグの中全てになります... しかしながら、今もう一度コードを確認してもやはりエラーになりそうなプログラムはここに書いてないこと以外にはなさそうです。また、モバイルファーストでCSSを書き換えて、PCのときにdisplay:blockをすれば行けるかもとも思いましたが、それだと逆にPCでサイドバーが表示されなくなってしまいます。

Lhankor_Mhy

2020/08/24 08:21 編集

https://jsfiddle.net/Lhankor_Mhy/9ct5yzf6/ ↑サンプルを作りました。 aoba_misatoさんの環境では、このサンプルでも「本文記事の上部に書かれてしまう」現象が再現しますか？

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

回答2件

自己解決

あまり時間がなくここに書くことができていなかったのですが、自己解決してしまいました。また慣れておらずすみません。

HTML
1<meta name="viewport" content="width=device-width">

をhead内に入れたら非表示にできました。恐らく自分がChromeの機能（F12で機能するやつ）を使っていたのが原因だったのかもしれません。

あと、メディアクエリの数値がおかしいというのも自己解決の過程で発覚して訂正しました。

回答を下さった方、本当に申し訳ございません。

投稿2020/09/04 15:16

aoba_misato

総合スコア0

メディアクエリの数値がおかしいですね。

css
1@media screen and (max-width:480px){...}
2@media screen and (min-width:1200px){...}

書かれているコードは、最大480pxまでのメディアクエリと、最小1200px以上のメディアクエリなので、481px~1199までのブラウザ幅では何もcssが摘要されない状態ですね。

"min-width:1200px"を"min-width:481px"にするだけで、cssは適用されるようになりますよ。

メディアクエリの使い方をよく理解しましょうね。

投稿2020/09/03 22:31

geta

総合スコア241

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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