サイドメニューの表示を、スマホ画面の大きさにしているときは非表示にし、メインコンテンツのみを画面いっぱいに表示させたい

初めまして。
現在、HTML及びCSSを用いて自作サイトの作成を行っているものです。

スマホ画面（640px)の大きさまで縮小した時に、

       <div class="left-column">
         コンテンツ

       </div>

以下のソースコード

       <div class="right-column">

         <h3>人気記事</h3>

       </div>

の部分を非表示にし、左側の"left-column"の部分を画面いっぱいに表示させるようにしようとしています。

ところが、ナビゲーションメニューと同じように、画面の大きさによって切り替えがうまくできません。スマホ画面の大きさにしても、サイドメニューが表示されてしまいます。

スマホ画面の大きさではメインコンテンツだけ表示、PC画面ではメインコンテンツとサイドメニューの両方を表示させるように切り替えるためにはどのようにすればよいでしょうか。

どのようにソースコードを修正すればよいのか、気になる箇所などございましたらご指摘いただけると嬉しいです。

どうぞよろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4   <meta charset="utf-8">
5   <meta name="robots" content="noindex,nofollow">
6   <title>ああああああ</title>
7
8   <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
10   <link rel="stylesheet" href="stylesheet.css">
11
12   <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
13   <script>
14   $(function() {
15      const hum = $('#hamburger, .close')
16      const nav = $('.sp-nav')
17      hum.on('click', function(){
18         nav.toggleClass('toggle');
19      });
20   });
21   </script>
22</head>
23<body>
24   <header>
25      <h1>
26         <a href="/">ああああああ</a>
27      </h1>
28      <nav class="pc-nav">
29         <ul>
30            <li><a href="#">ホーム</a></li>
31            <li><a href="#">カテゴリー</a>
32
33              <ul>
34                <li><a href="">Child1</a></li>
35                <li><a href="">Child2</a></li>
36                <li><a href="">Child3</a></li>
37                <li><a href="">Child4</a></li>
38                <li><a href="">Child5</a></li>
39              </ul>
40            </li>
41
42            <li><a href="#">掲示板</a></li>
43            <li><a href="#">自己紹介</a></li>
44            <li><a href="#">連絡先</a></li>
45         </ul>
46      </nav>
47      <nav class="sp-nav">
48         <ul>
49           <li><a href="#">ホーム</a></li>
50           <li><a href="#">カテゴリー</a></li>
51           <li><a href="#">掲示板</a></li>
52           <li><a href="#">自己紹介</a></li>
53           <li><a href="#">連絡先</a></li>
54            <li class="close"><span>閉じる</span></li>
55         </ul>
56      </nav>
57      <div id="hamburger">
58         <span></span>
59      </div>
60
61   </header>
62   <div class="main-visual">
63     <div id="wrapper">
64       <div class="left-column">
65         コンテンツ
66
67       </div>
68
69       <div class="right-column">
70
71         <h3>人気記事</h3>
72
73       </div>
74
75    </div>
76   </div>
77
78   <!-- footer -->
79
80  <footer>
81    <div class="footer-p">© All rights reserved by ああああああ</div>
82  </footer>
83
84</body>
85</html>
86
87

CSS
1@charset "utf-8";
2* {
3   box-sizing: border-box;
4}
5body {
6   margin: 0;
7   padding: 0;
8   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
9   background-color: rgba(0,0,0,0.85);
10   letter-spacing : 0.2em;
11}
12header {
13   z-index: 30;
14   padding: 30px 4% 10px;
15   position: fixed;
16   top: 0;
17   width: 100%;
18   background-color: rgba(0,0,0,1);
19   display: flex;
20   align-items: center;
21}
22h1 {
23   margin: 0; padding: 0;
24   font-size: 20px;
25}
26
27h3::before {
28  position: absolute;
29  content: '';
30  top: 100%;
31  left: 0;
32  border: none;
33  border-bottom: solid 15px transparent;
34  border-right: solid 20px rgb(149, 158, 155);
35}
36
37a {
38   text-decoration: none;
39   color: #fff;
40}
41nav {
42   margin: 0 0 0 auto;
43}
44ul {
45   list-style: none;
46   margin: 0;
47   display: flex;
48}
49li {
50   margin: 0 0 0 15px;
51   font-size: 14px;
52}
53.main-visual {
54   display: flex;
55   justify-content: center;
56   align-items: flex-start;
57   height: calc(100vh - 70px);
58   background: url('main_visual.jpg') top center / cover no-repeat;
59}
60
61@media screen and (min-width: 640px) {
62
63.right-column {
64  padding: 30px 10px;
65  width: 25%;
66  border: 1px solid #4b4b4b;
67  margin-left: 1%;
68  background-color: rgba(255,255,255,0.9);
69  box-shadow: 2px 2px 4px;
70  border-radius: 15px;
71}
72
73h3 {
74  position: relative;
75  padding: 0.5em;
76  background: #a6d3c8;
77  color: white;
78}
79
80}
81.sp-nav {
82   display: none;
83}
84
85@media screen and (max-width: 640px) {
86   .pc-nav {
87      display: none;
88   }
89   .sp-nav {
90      z-index: 1;
91      position: fixed;
92      top: 0;
93      left: 0;
94      width: 100%;
95      height: 100vh;
96      display: block;
97      width: 100%;
98      background: rgba(0, 0, 0, .8);
99      opacity: 0;
100      transform: translateY(-100%);
101      transition: all .2s ease-in-out;
102   }
103   #hamburger {
104      position: relative;
105      display: block;
106      width: 30px;
107      height: 25px;
108      margin: 0 0 0 auto;
109   }
110   #hamburger span {
111      position: absolute;
112      top: 50%;
113      left: 0;
114      display: block;
115      width: 100%;
116      height: 2px;
117      background-color: #4b4b4b;
118      transform: translateY(-50%);
119   }
120   #hamburger::before {
121      content: '';
122      display: block;
123      position: absolute;
124      top: 0;
125      left: 0;
126      width: 100%;
127      height: 2px;
128      background-color: #4b4b4b;
129   }
130   #hamburger::after {
131      content: '';
132      display: block;
133      position: absolute;
134      bottom: 0;
135      left: 0;
136      width: 70%;
137      height: 2px;
138      background-color: #4b4b4b;
139   }
140
141
142   /*スマホメニュー*/
143   .sp-nav ul {
144      padding: 0;
145      display: flex;
146      flex-direction: column;
147      justify-content: center;
148      height: 100%;
149   }
150   .sp-nav li {
151      margin: 0;
152      padding: 0;
153   }
154   .sp-nav li span {
155      font-size: 15px;
156      color: #fff;
157   }
158   .sp-nav li a, .sp-nav li span {
159      display: block;
160      padding: 20px 0;
161   }
162   /*-閉じるアイコンー*/
163   .sp-nav .close {
164      position: relative;
165      padding-left: 20px;
166   }
167   .sp-nav .close::before {
168      content: '';
169      position: absolute;
170      top: 50%;
171      left: 0;
172      display: block;
173      width: 16px;
174      height: 1px;
175      background: #fff;
176      transform: rotate( 45deg );
177   }
178   .sp-nav .close::after {
179      content: '';
180      position: absolute;
181      top: 50%;
182      left: 0;
183      display: block;
184      width: 16px;
185      height: 1px;
186      background: #fff;
187      transform: rotate( -45deg );
188   }
189   .toggle {
190      transform: translateY( 0 );
191      opacity: 1;
192   }
193   .main-visual {
194      padding: 0 4%;
195   }
196   
197}
198
199footer {
200  width: 100%;
201  height: 70px;
202  text-align: center;
203  padding: 20px 0;
204  background-color: rgba(0,0,0,1);
205  color: #fff;
206  font-size: 0.7rem;
207}
208
209
210#wrapper {
211    width: 100%;
212    margin: 80px auto 0;
213    display: flex;
214    flex-wrap: wrap;
215}
216
217.left-column {
218  padding: 30px 10px;
219  width: 70%;
220  border: 1px solid #4b4b4b;
221  margin-left: 2%;
222  background-color: rgba(255,255,255,0.9);
223  box-shadow: 2px 2px 4px;
224  border-radius: 15px;
225}
226
227
228/*ナビゲーションメニューの階層装飾*/
229
230.pc-nav li li {
231    height: 0;
232    opacity: 0;
233    overflow: hidden;
234    transition: opacity　.5s;
235}
236.pc-nav li li a {
237    border-top: 1px solid #eee;
238}
239
240.pc-nav li:hover > ul > li {
241    height: 2rem;
242    opacity: 1;
243    overflow: visible;
244}
245
246
247.pc-nav li li a {/*子階層*/
248    line-height: 2rem;
249    background: #00305c;
250    display: block;
251}
252.pc-nav li li:hover a {
253    background: #004789;
254    display: block;
255}
256
257.pc-nav > ul ul {
258  flex-direction: column;
259  padding-left: 0;
260}
261
262.pc-nav > ul ul > li {
263  margin-left: 0;
264}
265
266.pc-nav > li > ul:before{/*子階層*/
267    border: 5px solid transparent;
268    border-top: 5px solid #fff;
269    content: "";
270    right: 1rem;
271    position: absolute;
272    top: 1rem;
273    transform: translateY(-40%);
274}
275
276
277footer {
278  width: 100%;
279  height: 70px;
280  text-align: center;
281  padding: 20px 0;
282  background-color: rgba(0,0,0,1);
283  color: #fff;
284}
285
286

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

回答2件

right-column以外で<h3></h3>の装飾部分適応させたい
かつ、max-width:640pxの時でもH3の装飾部分を適応させたいなら

@media screen and (min-width: 640px) {}
に入っている
h3 {
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;
}
を外に出してあげればOKかと。
例えばh3::before {}の上とか。

メディアクエリ及びcss記述における優先順位を一度把握した方が良いと思います。

投稿2020/07/27 07:15

wing283

総合スコア123

ベストアンサー

メディアクエリの中に該当するcssをそれぞれ記述してあげれば良いのでは？
あと、max-width:640pxならmin-widthは641pxとした方が無難かと。


@media screen and (min-width: 641px) {

.right-column {
  padding: 30px 10px;
  width: 25%;
  border: 1px solid #4b4b4b;
  margin-left: 1%;
  background-color: rgba(255,255,255,0.9);
  box-shadow: 2px 2px 4px;
  border-radius: 15px;
}
.left-column {
  padding: 30px 10px;
  width: 70%;
  border: 1px solid #4b4b4b;
  margin-left: 2%;
  background-color: rgba(255,255,255,0.9);
  box-shadow: 2px 2px 4px;
  border-radius: 15px;
}
}
@media screen and (max-width: 640px) {

   .right-column {
      display: none;
   }
   .left-column {
      padding: 30px 10px;
      width: calc(100% - (20px + 2%));
      border: 1px solid #4b4b4b;
      margin-left: 2%;
      background-color: rgba(255,255,255,0.9);
      box-shadow: 2px 2px 4px;
      border-radius: 15px;
   }
}

投稿2020/07/27 06:09

wing283

総合スコア123

ypk

2020/07/27 06:25 編集

ありがとうございます。 >max-width:640pxならmin-widthは641pxとした方が無難かと。ご指摘ありがとうございます。確かにそうですね、、、教えてくださったソースコードで試してみたところ、無事に実行したいことができました。ありがとうございます。しかし、H3の装飾部分のCSSが消えてしまっています、、、これはどのように対応すればよいでしょうか。どうぞよろしくお願いいたします。

wing283

2020/07/27 07:58

right-column以外で<h3></h3>の装飾部分適応させたいかつ、max-width:640pxの時でもH3の装飾部分を適応させたいなら @media screen and (min-width: 640px) {} に入っている h3 { position: relative; padding: 0.5em; background: #a6d3c8; color: white; } を外に出してあげればOKかと。例えばh3::before {}の上とか。メディアクエリ及びcss記述における優先順位を一度把握した方が良いと思います。

wing283

2020/07/27 07:59

先ほど回答の方に答えてしまいました。すみません。

ypk

2020/07/27 08:27

ご丁寧にありがとうございます。やってみます。

ypk

2020/07/27 08:34

下記のようなCSSに変更をしてみたところ、「人気記事」の文言が残ってしまいます、、、右側のコラムが消えているのですが、、、、お手数ですが、どのように対処すればよいでしょうか。どうぞよろしくお願いいたします。 @charset "utf-8"; * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳＰゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: rgba(0,0,0,0.85); letter-spacing : 0.2em; } header { z-index: 30; padding: 30px 4% 10px; position: fixed; top: 0; width: 100%; background-color: rgba(0,0,0,1); display: flex; align-items: center; } h1 { margin: 0; padding: 0; font-size: 20px; } a { text-decoration: none; color: #fff; } nav { margin: 0 0 0 auto; } ul { list-style: none; margin: 0; display: flex; } li { margin: 0 0 0 15px; font-size: 14px; } .main-visual { display: flex; justify-content: center; align-items: flex-start; height: calc(100vh - 70px); background: url('main_visual.jpg') top center / cover no-repeat; } @media screen and (min-width: 641px) { .right-column { padding: 30px 10px; width: 25%; border: 1px solid #4b4b4b; margin-left: 1%; background-color: rgba(255,255,255,0.9); box-shadow: 2px 2px 4px; border-radius: 15px; } .left-column { padding: 30px 10px; width: 70%; border: 1px solid #4b4b4b; margin-left: 2%; background-color: rgba(255,255,255,0.9); box-shadow: 2px 2px 4px; border-radius: 15px; } } @media screen and (max-width: 640px) { .right-column { display: none; } .left-column { padding: 30px 10px; width: calc(100% - (20px + 2%)); border: 1px solid #4b4b4b; margin-left: 2%; background-color: rgba(255,255,255,0.9); box-shadow: 2px 2px 4px; border-radius: 15px; } .pc-nav { display: none; } .sp-nav { z-index: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: block; width: 100%; background: rgba(0, 0, 0, .8); opacity: 0; transform: translateY(-100%); transition: all .2s ease-in-out; } #hamburger { position: relative; display: block; width: 30px; height: 25px; margin: 0 0 0 auto; } #hamburger span { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 2px; background-color: #4b4b4b; transform: translateY(-50%); } #hamburger::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #4b4b4b; } #hamburger::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 70%; height: 2px; background-color: #4b4b4b; } /*スマホメニュー*/ .sp-nav ul { padding: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; } .sp-nav li { margin: 0; padding: 0; } .sp-nav li span { font-size: 15px; color: #fff; } .sp-nav li a, .sp-nav li span { display: block; padding: 20px 0; } /*-閉じるアイコンー*/ .sp-nav .close { position: relative; padding-left: 20px; } .sp-nav .close::before { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 1px; background: #fff; transform: rotate( 45deg ); } .sp-nav .close::after { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 1px; background: #fff; transform: rotate( -45deg ); } .toggle { transform: translateY( 0 ); opacity: 1; } .main-visual { padding: 0 4%; } } footer { width: 100%; height: 70px; text-align: center; padding: 20px 0; background-color: rgba(0,0,0,1); color: #fff; font-size: 0.7rem; } #wrapper { width: 100%; margin: 80px auto 0; display: flex; flex-wrap: wrap; } .left-column { padding: 30px 10px; width: 70%; border: 1px solid #4b4b4b; margin-left: 2%; background-color: rgba(255,255,255,0.9); box-shadow: 2px 2px 4px; border-radius: 15px; } /*ナビゲーションメニューの階層装飾*/ .pc-nav li li { height: 0; opacity: 0; overflow: hidden; transition: opacity　.5s; } .pc-nav li li a { border-top: 1px solid #eee; } .pc-nav li:hover > ul > li { height: 2rem; opacity: 1; overflow: visible; } .pc-nav li li a {/*子階層*/ line-height: 2rem; background: #00305c; display: block; } .pc-nav li li:hover a { background: #004789; display: block; } .pc-nav > ul ul { flex-direction: column; padding-left: 0; } .pc-nav > ul ul > li { margin-left: 0; } .pc-nav > li > ul:before{/*子階層*/ border: 5px solid transparent; border-top: 5px solid #fff; content: ""; right: 1rem; position: absolute; top: 1rem; transform: translateY(-40%); } footer { width: 100%; height: 70px; text-align: center; padding: 20px 0; background-color: rgba(0,0,0,1); color: #fff; }

wing283

2020/07/27 08:48

cssは後に記述した値を優先的に適応させます。メディアクエリ及びcss記述における優先順位を一度把握した方が良いと思います。と言ったのはそういうことです。はじめの頃はわけわからなくなると思うので /* 全体設定 */ 　ここにPCでもタブレットでもスマホでも適応させるcssを書く /* PC～641pxまでのスタイル */ @media screen and (min-width: 641px) { 　ここに641pxまでの限定的なcssを書く } /* 640px以下のスタイル */ @media screen and (max-width: 641px) { 　ここに640px以下の限定的なcssを書く } とした方がよいと思います。（min-width: 641pxとmax-width: 641pxのみのスタイルであるならば、本来はPC～641pxまでのメディアクエリは必要ありません）

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

あなたの回答