メディアクリエリの設定が効かない

HTML CSSの勉強中で
上記画像のようにレスポンシブ対応のメディアクリエリを設定したいのですが767pxの場合と479pxの設定が上手くいかなくて崩れてしまいます。

原因をご教授いただければ幸いです。

ソースコード
↓

css
1.wrapper{
2    width: 400px;
3    margin: auto;
4  }
5  
6  .header{
7    width: 400px;
8    height: 100px;
9    background-color: #141f40;
10  }
11  
12  .side{
13    width: 150px;
14    height: 250px;
15    background-color: #80bfa8;
16    float: left;
17  }
18  
19  .content{
20    width: 250px;
21    height: 250px;
22    float: right;
23  }
24  
25  .top-left{
26    width: 150px;
27    height: 150px;
28    float: left;
29  }
30  
31  .top-left-top{
32    width: 150px;
33    height: 50px;
34    background-color: #dbd400;
35    float: left;
36  }
37  
38  .top-left-bottom{
39    width: 150px;
40    height: 100px;
41    background-color: #0093b7;
42    float: left;
43  }
44  
45  .content-top-right{
46    width: 100px;
47    height: 150px;
48    background-color: #ff9e6b;
49    float: right;
50  }
51
52  .content-top-right p {
53    float: right;
54  }
55  
56  .content-bottom{
57    width: 250px;
58    height: 100px;
59    background-color: #8c2727;
60  }
61  
62  .footer{
63    width: 400px;
64    height: 100px;
65    background-color: #d98d30;
66  }
67  
68  .clearfix:after {
69    display: block;
70    content: "";
71    clear: both;
72  }
73
74  p {
75      color:#fff;
76      padding:3px;
77      font-size:3px;
78    
79  }
80  
81 ```レスポンシブ対応
82@media screen and (max-width: 767px) {
83    .header {
84    width: 300px;
85}
86
87.side{
88  width: 100px;
89}
90
91.content-top-right{
92  width: 75px;
93}
94.top-left-top{  
95  width: 125px;
96}
97
98.top-left-bottom{
99  width: 125px;
100}
101
102.content-bottom{
103  float: left;
104  width: 200px;
105}
106
107.footer{
108  float: none;
109  width: 300px;
110}
111}
112
113@media screen and (max-width: 479px) {
114.header {
115  width: 150px;
116}
117
118.side{
119height: 100px;
120width: 150px;
121}
122
123.top-left-bottom{
124right: 50px;
125width: 150px;
126height:100px;
127}
128
129.content-top-right {
130right: 80px;
131 height: 100px;
132 width:150px;
133}
134
135
136.top-right{
137width: 150px;
138height: 100px;
139}
140
141.content-bottom{
142width: 150px;
143height: 100px;
144}
145.footer {
146 float: none;
147width: 150px;
148 
149}
150}

```html
コード
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
	<link rel="stylesheet"  href="culuculum.css">
	<link rel="stylesheet"  href="culuculum2.css">
</head>
<body>
  <div class="wrapper">
		<div class="header">
      <p>#141f40</p>		
		</div>
		<div class="main clearfix">
			<div class="side">
           <p>#80bfa8</p>
			 </div>
			  <div class="content">
	      	 <div class="contet-top clearfix">
			<div class="top-left">
            <div class="top-left-top">
            <p>dbd400</p>
            </div>
			<div class="top-left-bottom">
				<p>#0093b7</p>
			</div>
				</div>
			<div class="content-top-right">
            <p>#ff9e6b</p>
				</div>
				</div>
			<div class="content-bottom">
          <p>#8c2727</p>
				</div>
			</div>
		</div>	
		<div class="footer">
      <p>#d98d30</p>		
		</div>
	</div>
</body>
</html>

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

回答2件

ベストアンサー

現状のHTMLを変更しないなら、下記のCSSで。

横並びは float を使うと解除（ClearFix）が面倒なので、
FlexBoxを使ってます。

css
1* {
2  margin: 0;
3}
4.wrapper{
5  width: 400px;
6  margin: auto;
7}
8.header{
9  height: 100px;
10  background-color: #141f40;
11}
12.main, .content-top {
13  display: flex;
14}
15.side{
16  width: 150px;
17  background-color: #80bfa8;
18}
19.content{
20  width: 250px;
21}
22.top-left{
23  width: 150px;
24}
25.top-left-top{
26  height: 50px;
27  background-color: #dbd400;
28}
29
30.top-left-bottom{
31  height: 100px;
32  background-color: #0093b7;
33}
34
35.content-top-right{
36  width: 100px;
37  background-color: #ff9e6b;
38}
39.content-bottom{
40  height: 100px;
41  background-color: #8c2727;
42}
43.footer{
44  height: 100px;
45  background-color: #d98d30;
46}
47p {
48  color:#fff;
49  padding:3px;
50  font-size:3px;
51}
52
53@media screen and (max-width: 767px) {  
54  .wrapper{
55    width: 300px;
56  }
57  .side{  
58    width: 100px;  
59  }  
60  .content {
61    width: 200px;
62  }
63  .content-top-right{  
64    width: 75px;  
65  }  
66  .top-left{    
67    width: 125px;  
68  }  
69  .content-bottom{  
70     width: 200px;  
71  }  
72}  
73
74@media screen and (max-width: 479px) {  
75  .wrapper, .wrapper * {
76    width: 150px;
77  }
78  .main, .content {
79    height: 100%;    
80  }
81  .main, .content-top {
82    display: block;
83  }
84  .content-top {
85    display: flex;
86    flex-direction: column-reverse;
87  }
88  .side,
89  .content-top-right {  
90    height: 100px;  
91  }  
92}

CodePenサンプル

HTMLを変更してもいいのなら、CSS Grid を使うとシンプルに実現できます。

html
1<div class="wrapper">
2  <div class="header">
3    <p>#141f40</p>        
4  </div>
5  <div class="side">
6    <p>#80bfa8</p>
7  </div>
8  <div class="content-left-top">
9    <p>#dbd400</p>
10  </div>
11  <div class="content-left-bottom">
12    <p>#0093b7</p>
13  </div>
14  <div class="content-right">
15    <p>#ff9e6b</p>
16  </div>
17  <div class="content-bottom">
18    <p>#8c2727</p>
19  </div>
20  <div class="footer">
21    <p>#d98d30</p>        
22  </div>
23</div>

css
1.wrapper {
2  width: 400px;
3  margin: auto;
4  display: grid;
5  grid-template-columns: 150px 150px 100px;
6  grid-template-rows: 100px 50px repeat(3, 100px);
7}
8.header {
9  grid-column: 1/4;
10  background-color: #141f40;
11}
12.side {
13  grid-row: span 3;
14  background-color: #80bfa8;
15}
16.content-left-top {
17  background-color: #dbd400;
18}
19.content-left-bottom {
20  grid-column: 2;
21  background-color: #0093b7;
22}
23.content-right {
24  grid-column: 3;
25  grid-row: 2/4;
26  background-color: #ff9e6b;
27}
28.content-bottom {
29  background-color: #8c2727;
30  grid-column: 2/4;
31}
32.footer {
33  grid-column: 1/4;
34  background-color: #d98d30;  
35}
36p {
37  color:#fff;
38  padding:3px;
39  font-size:3px;
40}
41@media screen and (max-width: 767px) {
42  .wrapper {
43    width: 300px;
44    grid-template-columns: 100px 125px 75px;
45  }
46}
47@media screen and (max-width: 479px) {
48  .wrapper {
49    width: 150px;
50    grid-template-columns: 150px;
51    grid-template-rows: repeat(3, 100px) 50px repeat(3, 100px);
52  }  
53  .wrapper > div {
54    grid-column: 1;
55    grid-row: span 1;
56  }
57  .wrapper > .content-right {
58    grid-row: 3;
59  }
60}

CodePenサンプル

投稿2020/11/08 20:21

編集2020/11/10 00:33

hatena19

総合スコア34075

一例です。

html5
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        .allWrap {
10            width: 150px;
11            margin: 0 auto;
12        }
13
14        .allWrap * {
15            width: 100%;
16        }
17
18        header {
19            height: 100px;
20            background-color: #141f40;
21        }
22
23        .boxA {
24            height: 110px;
25            background-color: #80bfa8;
26        }
27
28        .boxB {
29            height: 110px;
30            background-color: #ff9e6b;
31        }
32
33        .boxC {
34            height: 110px;
35            background-color: #dbd400;
36        }
37
38        .boxD {
39            height: 110px;
40            background-color: #0093b7;
41        }
42
43        .boxE {
44            height: 110px;
45            background-color: #8c2727;
46        }
47
48        footer {
49            height: 110px;
50            background-color: #d98d30;
51        }
52
53        @media screen and (min-width: 767px) {
54            .allWrap {
55                width: 300px;
56                margin: 0 auto;
57                position: relative;
58            }
59
60            header {
61                width: 300px;
62                height: 100px;
63                background-color: #141f40;
64            }
65
66            .boxA {
67                width: 100px;
68                height: 250px;
69                background-color: #80bfa8;
70            }
71
72            .boxB {
73                width: 75px;
74                height: 150px;
75                background-color: #ff9e6b;
76                position: absolute;
77                top: 100px;
78                left: 225px;
79            }
80
81            .boxC {
82                width: 125px;
83                height: 50px;
84                background-color: #dbd400;
85                position: absolute;
86                top: 100px;
87                left: 100px;
88            }
89
90            .boxD {
91                width: 125px;
92                height: 100px;
93                background-color: #0093b7;
94                position: absolute;
95                top: 150px;
96                left: 100px;
97            }
98
99            .boxE {
100                width: 200px;
101                height: 100px;
102                background-color: #8c2727;
103                position: absolute;
104                top: 250px;
105                left: 100px;
106            }
107
108            footer {
109                width: 300px;
110                height: 100px;
111                background-color: #d98d30;
112            }
113        }
114    </style>
115</head>
116
117<body>
118    <div class="allWrap">
119        <header></header>
120        <div class="boxA"></div>
121        <div class="boxB"></div>
122        <div class="boxC"></div>
123        <div class="boxD"></div>
124        <div class="boxE"></div>
125        <footer></footer>
126    </div>
127</body>
128
129</html>