@mediaが効かない

##やりたいこと
メディアクエリを利用してレスポンシブデザインを作りたいとおもっています。
具体的には、回答ボタンをPC上では横並び、スマホ上では縦並びにしたいです。
言語はHTML、CSS、Javascriptを使っています。

##問題
メディアクエリが反映されない。

##やったこと
・viewportがhead部分にかかれているか確認した
・CSSの綴を確認した
・テスト用に＠mediaのパターンをいくつか作って試してみたが、デベロッパーツールのstyles欄でも反映が見られなかった。

##該当コード

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4			<meta charset="UTF-8">
5		
6			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7			<meta name="keywords" content="診断テスト">
8			<title>診断テスト</title>
9			<meta name="google-site-verification" content="u9p8cD1slfgwffH5F9pGFSIiu3RjRTtSOKlni66QagM" />
10			<link rel="stylesheet" href="check.css"　type="text/css"  />
11		
12		
13    
14        <script src="jquery-3.5.1.min.js"></script>
15		<script>
16//Javascriptの記述
17
18			//-----初期設定
19			function initFunc(){
20				selectArray = [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
21				scoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
22				qNum = selectArray.length;
23			}
24
25			
26			function preloadFunc() {
27				for(var i = 0; i< arguments.length; i++){
28					$("<img>").attr("src", arguments[i]);
29				}
30			}
31			
32			function againFunc(){
33				moveFunc(-1);
34				for (var i in selectArray){
35					var selectID = selectArray[i];
36					$("#" + i + "_" + selectID).removeClass("selected");
37				}
38				initFunc();//---初期化
39			}
40			
41			function quesFunc(){
42				var idArray = this.id.split("_");
43				var qID = Number(idArray[0]);
44				var ansID = Number(idArray[1]);
45				var selectID = selectArray[qID];
46				if (ansID == selectID) return;
47				$("#" + qID + "_" + ansID).addClass("selected");
48				$("#" + qID + "_" + selectID).removeClass("selected");
49				selectArray[qID] = ansID;
50				moveFunc(qID);
51			
52				scoreArray[qID] =  Number($(this).attr("sc"));
53               
54				if (qID+1 >= qNum) resultFunc();//---最後の質問かをチェック
55                
56			}
57
58            function resultFunc(){
59				alert("合計得点の算出を開始！")
60			}
61			
62			function resultFunc(){
63				var totalScore = 0;
64				for(var i in scoreArray){
65					totalScore += scoreArray[i];
66				}
67				
68				var q19 = $('li').hasClass('18_1');
69				var q20 = $('li').hasClass('19_1');
70				var q22 =$('li').hasClass('21_0');
71
72				switch (true){
73					case (totalScore >= 25 && q19 == true && q20 == true && q22 == true):
74						var lv = 8;
75						break;
76					case (totalScore >= 25 && q22 == true && q20 == true):
77						var lv = 7;
78						break;
79					case (totalScore >= 25 && q19 == true && q22 == true):
80						var lv = 6;
81						break;
82					case (totalScore >= 25 && q19 == true && q20 == true):
83						var lv = 5;
84						break;
85					case (totalScore >= 25 && q22 == true):
86						var lv = 4;
87						break;
88					case (totalScore >= 25 && q20 == true):
89						var lv = 3;
90						break;
91					case (totalScore >= 25 && q19 == true):
92						var lv = 2;
93						break;
94					case totalScore >= 25:
95						var lv = 1;
96						break;
97					default:
98						var lv = 0;
99				}
100				$("#resultPoint").text(totalScore);
101				$("#resultImage").css("background-image", "url('images/lv"+lv+".png')");
102				var myData = resultArray[lv];
103				$("#resultTitle").text(myData.split(",")[0]);
104				$("#resultText").text(myData.split(",")[1]);
105			}
106			
107			function moveFunc(vol){
108				var myPos = (vol+1) * -650;
109				$("#qContainer").delay(500).animate({left: myPos},500);
110			}
111			
112			$(function(){
113				initFunc();//---初期化
114				
115				$.get('result.csv', function(myData){resultArray = myData.split("\r\n")});
116				preloadFunc("images/lv0.png","images/lv1.png","images/lv2.png","images/lv3.png","images/lv4.png", "images/againOn.png");
117				$("ul>li").click(quesFunc);
118				$("#againButton").click(againFunc);
119			});
120
121			
122        </script></head>
123<body>
124		<div id="qArea">
125		  <div id="qContainer">
126
127          
128	
129			  <div class="qBox p-checklist">
130				<div class="ques p-checklist__list__item"><span class="qNum p-checklist__title">Q1</span>　
131					<div class="p-checklist__question">
132					 <p class="p-checklist__question__text">
133						 会社や学校などでケアレスミスをしたり、<br>細かい部分に注意を払えないことがある
134					 </p>
135					</div>
136				</div>
137				<div class="p-checklist__btn-group">
138				 <ul>
139					<li id="0_0" sc="3" class="c-btn c-btn--middle c-btn--main">よくある</li>
140					<li id="0_1" sc="2" class="c-btn c-btn--middle c-btn--main2">まあまあある</li>
141					<li id="0_2" sc="1" class="c-btn c-btn--middle c-btn--sub2">あまりない</li>
142					<li id="0_3" sc="0" class="c-btn c-btn--middle c-btn--sub">ほとんどない</li>
143					
144				 </ul>     
145				</div>  
146			</div>
147<div class="qBox p-checklist">
148				<div class="ques p-checklist__list__item"><span class="qNum p-checklist__title">Q2</span>　
149					<div class="p-checklist__question">
150					 <p class="p-checklist__question__text">席にいるとき手足を触ってしまったり落ち着いていられない</p>
151					</div>
152				</div>
153				<div class="p-checklist__btn-group">
154				 <ul>
155					<li id="1_0" sc="3" class="c-btn c-btn--middle c-btn--main">よくある</li>
156					<li id="1_1" sc="2" class="c-btn c-btn--middle c-btn--main2">まあまあある</li>
157					<li id="1_2" sc="1" class="c-btn c-btn--middle c-btn--sub2">あまりない</li>
158					<li id="1_3" sc="0" class="c-btn c-btn--middle c-btn--sub">ほとんどない</li>
159					
160				 </ul>     
161				</div>  
162	        </div>
163</div>
164		</div>
165	</body>
166

css
1/*スマホ時に選択肢を縦並びにする */
2body{
3	font-family: 'Lexend Tera', sans-serif;
4	font-size:16px;
5	color: #403734;
6}
7#qArea{
8	overflow:hidden;
9	width:700px;
10	height:500px;
11	background: url() no-repeat 0 0;
12	margin-left: auto;
13	margin-right: auto;
14}
15
16#qContainer {
17	margin:115px 0px 0px 50px;
18	width:16150px;
19	position:relative; 
20}
21.p-checklist__btn-group {
22    width: 100%;
23    margin: 0 auto;
24    display: -webkit-box;
25    display: -ms-flexbox;
26    display: flex;
27    -webkit-box-pack: center;
28    -ms-flex-pack: center;
29    justify-content: center
30  }
31/* よくある */
32  .c-btn--main {
33    background: #ff7a89;
34    border: 2px solid #ff7a89;
35    color: #fff
36  }
37  
38  .c-btn--main:hover {
39    background: rgba(255, 255, 255, .7);
40    color: #ff7a89
41  }
42
43  /* まあまあある */
44  
45  .c-btn--main2 {
46    background: #eea3ac;
47    border: 2px solid #eea3ac;
48    color: #fff
49  }
50  
51  .c-btn--main2:hover {
52    background: rgba(255, 255, 255, .7);
53    color: #eea3ac
54  }
55
56  /* あまりない */
57  
58  .c-btn--sub2 {
59    background: #a5cad2;
60    border: 2px solid #a5cad2;
61    color: #fff
62  }
63  
64  .c-btn--sub2:hover {
65    background: rgba(255, 255, 255, .7);
66    color: #a5cad2;
67  }
68/* ほとんどない */
69  .c-btn--sub {
70    background: #65cbe2;
71    border: 2px solid #65cbe2;
72    color: #fff
73  }
74  
75  .c-btn--sub:hover {
76    background: rgba(255, 255, 255, .7);
77    color: #95d0dd;
78  }
79@media screen and (max-width: 767px){
80	.p-checklist__btn-group{
81		display: block ;
82	}
83	.c-btn--main{
84		width: 100%;
85		margin: 0 auto;
86	}
87	.c-btn--main2{
88		width: 100%;
89		margin: 0 auto;
90	}
91	.c-btn--sub2{
92		width: 100%;
93		margin: 0 auto;
94	}
95	.c-btn--sub{
96		width: 100%;
97		margin: 0 auto;
98	}
99}

何卒、宜しくお願い致します

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

回答2件

メディアクエリが反映されない。

反映されてます。

具体的には、回答ボタンをPC上では横並び、スマホ上では縦並びにしたいです。

このCSS設定が間違っているのが、うまくいかない原因です。

display: flex;は横並びにしたい要素の親要素に設定します。

回答ボタン(li要素)の親要素は ul要素です。

現状はul要素の親である .p-checklist__btn-group に設定されているので横並びにはなりません。
ここの設定を.p-checklist__btn-group > ulに変更しましょう。

css
1.p-checklist__btn-group > ul {
2    width: 700px;
3    margin: 0 auto;
4    display: -webkit-box;
5    display: -ms-flexbox;
6    display: flex;
7/*    -webkit-box-pack: center;
8    -ms-flex-pack: center; */
9    justify-content: center
10  }

あと、下記の異常に大きいwidthは何のためでしょう。これがあるために回答ボタンが画面外にいってしまいます。適切な幅にしてください。

css
1#qContainer {
2    margin:115px 0px 0px 50px;
3    width:16150px;
4    position:relative; 
5}

投稿2020/07/27 13:47

hatena19

総合スコア34075

pppppppppp

2020/07/27 14:10

PC上で横並びはできているようで、縦並びができないです、、、（画像を追加させていただきました）異常に大きいwidthですが、下記サイトを参考に、大きな幅のオブジェクトをスライドすることで画面の切り替えを行っています。 http://www.jquerystudy.info/sample/check/move1.html 冗長になってしまうと思い省略させて頂いていたJavascriptが関わってきそうなので、 HTMLの部分に記載させて頂きました。

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

@media自体は効いていますよ。
理想的なCSSが適用されていないということでしょうか。

CodePenサンプル

投稿2020/07/27 13:23

FrontEnd_Japan

総合スコア271

pppppppppp

2020/07/27 14:14 編集

デベロッパーツールに表示されないので適用されていないと思ってしまいました！ありがとうございます。質問の選択肢c-btnをPC上では横並び、スマホ上では縦並びにしたデザインにしたいのですが、上記のコードだとデザインできていない、、、というご相談です。 CSSに問題があるということでしょうか。大変お手数ですが、少しでも示唆があればご教授頂きたいです。