３カラムレイアウトから１カラムレイアウトへレスポンシブデザインをしたい

３カラムレイアウトから１カラムレイアウトに落とす場合どうすればよいか質問です。

html
1<html>
2<head>
3	<style type="text/css">
4        <meta name="viewport" content="width=device-width,initial-scale=1">
5        
6         @media screen and(max-width:599px){
7            #left,#center,#right{
8               float: none;
9                width:100%;
10            }
11        }
12          
13
14		#wrap{
15			width: 700px;
16			height: 700px;
17			margin: auto;
18		}
19
20		#left{
21			width: 200px;
22			float: left;
23		}
24
25		#center{
26			width: 200px;
27			float: left;
28		}
29
30		#right{
31			width: 200px;
32			float: left;
33		}
34
35		.box1{
36			background: red;
37			width: 200px;
38			height: 500px;
39		}
40
41		.box2{
42			background: yellow;
43			width: 200px;
44			height: 100px;
45		}
46
47		.box3{
48			background: blue;
49			width: 200px;
50			height: 200px;
51		}
52
53		.box4{
54			background: green;
55			width: 200px;
56			height: 400px;
57		}
58
59		.box5{
60			background: black;
61			width: 200px;
62			height: 300px;
63		}
64
65		.box6{
66			background: pink;
67			width: 200px;
68			height: 300px;
69		}
70	</style>
71
72</head>
73<body>
74	<div id="wrap">
75		<div id="left">
76			<div class="box1"></div>
77			<div class="box2"></div>
78		</div>
79
80		<div id="center">
81			<div class="box3"></div>
82			<div class="box4"></div>
83		</div>
84
85		<div id="right">
86			<div class="box5"></div>
87			<div class="box6"></div>
88		</div>
89	</div>
90</body>
91</html>
92

599px以下だと、１カラムレイアウトを組む予定にしたいのですが
こちらの場合、どこを直せばよろしでしょうか。

現状だと小さくしても、３カラムレイアウトのままです。

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

回答2件

ベストアンサー

CSSは原則として後から書いた方が優先されます。
なので、

css
1         @media screen and (max-width:599px){
2            #left{
3               float: none;
4                width:100%;
5            }
6        }
7
8
9        #left{
10            width: 200px;
11            float: left;
12        }

↑は、↓と同じです。

css
1        #left{
2            width: 200px;
3            float: left;
4        }

解決方法は、メディアクエリ部分を最後に書くことです。

投稿2019/06/19 11:52

編集2019/06/19 11:54

Lhankor_Mhy

総合スコア36074

ocha9

2019/06/19 12:23

理解力が足りなくてすみません。まだ出来ない状況です。えとですね、 ```css コード #wrap{ width: 700px; height: 700px; margin: auto; } #left{ width: 200px; float: left; } #center{ width: 200px; float: left; } #right{ width: 200px; float: left; } .box1{ background: red; width: 200px; height: 500px; } .box2{ background: yellow; width: 200px; height: 100px; } .box3{ background: blue; width: 200px; height: 200px; } .box4{ background: green; width: 200px; height: 400px; } .box5{ background: black; width: 200px; height: 300px; } .box6{ background: pink; width: 200px; height: 300px; } @media screen and(max-width:599px){ #left,#center,#right{ float: none; width:100%; } } ``` で書いてみましたが変わらずでした。

Lhankor_Mhy

2019/06/19 12:31

typo ですね。 and の後ろのスペースが抜けています。

ocha9

2019/06/19 12:46

解決しました。本当にありがとうございました。

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

ご指摘いただいた通り

css
1@media screen and (max-width:599px){
2
3#left,#center,#right{
4float: none;
5width:100%;
6}
7}
8

で直りました。レスポンシブを少しできて嬉しかったです。

投稿2019/06/19 12:46

ocha9

総合スコア23

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

３カラムレイアウトから１カラムレイアウトへレスポンシブデザインをしたい

関連した質問