サイトのレスポンシブ対応がうまくできない

###前提・実現したいこと
レスポンシブで1つのページを作成する（主にスマホ用ページ）

###発生している問題・エラーメッセージ

①320px以下、680px以上のCSSがうまく当てられない。（そもそも何も反応してくれない。

###該当のソースコード

HTML
1<!DOCTYPE html>
2	<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<meta name="viewport" content="width=device-width,initial-scale=1">
6		<title>TOP</title>
7		<link rel="stylesheet" href="./css/reset.css">
8		<link rel="stylesheet" href="./css/top-style.css">
9		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
10		<script src="./js/top.js"></script>
11		
12	</head>
13	<body>
14
15	<!-- header -->
16	<header>
17		<div class="logo">
18			<h1>MoneyLocation</h1>
19		</div>
20		<div class="menubtn">
21			<ul>
22				<li><a href="#" id="menubtn">MENU</a>
23					<ul class="menulist">
24						<li><a href="#">ホーム</a></li>
25						<li><a href="#">使い方</a></li>
26						<li><a href="#">問い合わせ</a></li>
27					</ul>
28				</li>
29			</ul>
30		</div>
31	</header>
32	
33
34	
35	<div class="contents">
36		<div class="main">
37			<h2>ムダ使いを、可視化しよう。</h2>
38			<div class="btn">
39				<input type="submit" value="新規登録" onclick="login.php">
40				<input type="submit" value="ログイン" onclick="register.php">
41			</div>
42			<img src="./img/topimg.jpg" alt="キービジュアル">
43			
44		</div>
45		<div class="sub">
46			<h3>使い方</h3>
47			<div class="icon">
48				<div class="iconbox">
49					<img src="img/icon1.png" alt="使い方1" width="80" height="80">
50					<p>買い物した場所を登録する</p>
51				</div>
52
53				<div class="iconbox">
54					<img src="img/icon1.png" alt="使い方1" width="80" height="80">
55					<p>使ったお金を記録する</p>
56				</div>
57
58				<div class="iconbox">
59					<img src="img/icon1.png" alt="使い方1" width="80" height="80">
60					<p>無駄遣いの仕分けをする</p>
61
62				</div>
63
64				<div class="iconbox">
65					<img src="img/icon1.png" alt="使い方1" width="80" height="80">
66					<p>無駄遣いした場所を知らせる</p>
67				</div>
68
69			</div>
70		</div>
71		<div class="inquiry">
72			<!-- ここにお問い合わせが入ります -->
73		</div>
74	</div>
75
76	<footer>
77		<p><small>&copy;2016 Masanar Hori</small></p>
78	</footer>
79		
80
81	</body>
82	</html>

css
1@charset "utf-8";
2
3body{
4	display: none;
5}
6
7html{
8	line-height: 1.5;
9}
10
11header{
12	text-align: center;
13	background-color: #54b4dc;
14	overflow: hidden;
15	position: relative;
16}
17
18
19.logo{
20	float: left;
21}
22
23.logo h1{
24	color: #fff;
25}
26
27.menubtn{
28	float: right;
29	letter-spacing: 2px;
30	cursor: pointer;
31}
32
33.menubtn li a{
34	text-decoration: none;
35	color: #fff;
36}
37
38.menulist{
39	background-color: #54b4dc;
40}
41
42.main{
43	position: relative;
44}
45
46.btn{
47	position: absolute;
48	top: 50%;
49	left: 50%;
50	margin-left: -62.819px;
51}
52
53.btn input{
54	background-color: #0068a7;
55	border: none;
56	border-radius: 4px;
57	padding: 10px 20px;	
58	color: #fff;
59	cursor: pointer;
60	font-size: 1.2em;
61	letter-spacing: 2px;
62	text-align: center;
63}
64
65.btn input:hover{
66	opacity: 0.7;
67}
68
69.contents{
70	clear: both;
71}
72
73.main h2{
74	position: absolute;
75	top: 40%;
76	left: 50%;
77	color: #fff;
78	font-size: 2.5em;
79	letter-spacing: 2px;
80	margin-left: -273px;
81	margin-bottom: -20px;
82}
83
84.main img{
85	max-width: 100%;
86}
87
88.sub{
89	background-color: #04649c;
90	color: #fff;
91}
92
93.sub h3{
94	text-align: center;
95	letter-spacing: 2px;
96}
97
98.sub p{
99	letter-spacing: 2px;
100}
101
102footer{
103	text-align: center;
104	background-color: #54b4dc;
105	color: #fff;
106}
107
108/*Media Query*/
109
110/*0-320*/
111
112
113
114/*320-680*/
115
116
117@media screen and (min-width: 320px) and (max-width: 680px){
118
119	.logo h1{
120		font-size: 24px;
121		position: absolute;
122		margin: auto;
123	}
124	.main h2{
125		font-size: 1.3em;
126		margin-left: -148.203px;
127		margin-bottom: -10px;
128	}
129
130	.btn{
131		margin-top: 32px;
132		width: 224px;
133		margin-left: -112px;
134		margin-bottom: -20px;
135	}
136
137	.btn input{
138		padding: 8px 16px;	
139		font-size: 1em;
140	}
141
142	.btn input:first-child{
143		margin-right: 10px;
144	}
145
146	.iconbox{
147		width: 200px;
148		text-align: center;
149		margin: 0 auto;
150	}
151
152	.menubtn{
153		border: solid 1px #fff;
154		border-radius: 4px;
155		padding: 8px 4px;
156		margin: 12px 20px;
157		width: 90px;
158	}
159
160
161	.menulist{
162		display: none;
163	}
164
165	.menulist li{
166		margin-bottom: 16px;
167
168	}
169	.menulist li:first-child{
170		margin-top: 16px;
171	}
172
173	.menulist li:last-child{
174		margin-bottom: 0;
175	}
176
177	.sub h3{
178		margin-bottom: 16px;
179		padding-top: 16px;
180		font-size: 24px;
181	}
182
183
184
185	.iconbox{
186		width: 240px;
187	}
188
189	.iconbox img{
190		margin-bottom: 16px;
191	}
192	.iconbox p{
193		margin-bottom: 16px;
194	}
195
196	.iconbox p:last-child{
197		padding-bottom: 16px;
198		margin-bottom: 0;
199	}
200
201	footer{
202		padding: 24px 0;
203	}
204}
205
206@media screen and (min-width: 768px) {
207	body{
208		display: none;
209	}
210}
211

###試したこと

css
1@media screen and (min-width: 680px) {
2//680px以上の幅になった時の記述。とりあえず背景色を変える
3background-color:black;
4}

のように動作確認をしてみても全く動きません。

css
1@media screen and (max-width: 320px) {
2//320px以下の幅になった時の記述。とりあえず背景色を変える
3background-color:black;
4}

も同様で何も動きません

CSS読み込みができていないのであれば、そもそも320~680pxも動かないはずなので困っています。。。

###補足情報(言語/FW/ツール等のバージョンなど)
開発環境はChromeとlocalhost上（XAMPP起動）という状況です。

ご指摘いただければと思います。

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

回答1件

ベストアンサー

何も動きません

この文では、どうなって欲しいのか、そして現状がどうなのか、が何もわかりません。

ただ、下記2点は削除してからテストしてみてください。

CSS
1body{
2    display: none;
3}

CSS
1@media screen and (min-width: 768px) {
2    body{
3        display: none;
4    }
5}

また、下記記述は2点問題があります。1点目は // はCSSでは使えません。/* something */ のように /* */ で囲うようにしてください。2点目は、body{} などセレクタで background-color:black; を包まないと記述自体無視されます。

CSS
1@media screen and (min-width: 680px) {
2//680px以上の幅になった時の記述。とりあえず背景色を変える
3background-color:black;
4}

投稿2016/04/19 11:50

kei344

総合スコア69400

MH00214

2016/04/19 12:13

すみません！記述ミスでした！ご指摘いただいた//の部分ですが、実際のコードには記述しておりません。。。具体的にやりたい動きは細かく書くと長くなるので割愛させていただきますが、まず680px以上になった時にbodyに対してのCSSが効くかどうかをまず試そうと思ってコードを書きました。 background-color:black;の部分を body{ display: none; } のように記述しましたがやはりうごきません。要するに、680px以上になったらなんでもいいからCSSが効いているかどうかを確認したいということです！

kei344

2016/04/19 12:49

body { display: none; } は消しましたか？手元の環境でdisplay: none;2箇所を削除して、下記のようにして、問題なく切り替えはできました。widthを100pxずつくらいずらしたものを使って幅自体を確認してみては？ @media (min-width: 286px) { body{background-color: green;} } @media (min-width: 386px) { body{background-color: pink;} } @media (min-width: 486px) { body{background-color: red;} } @media (min-width: 586px) { body{background-color: blue;} }