レスポンシブデザインにしようとするとコンテンツがぐちゃぐちゃになってしまいます。

前提・実現したいこと

レスポンシブデザインを取り入れたいです。

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

レスポンシブデザインにしようとして、取り入れてみると、画面をある一定まで縮めるとぐちゃぐちゃになってしまいました。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="top1.css">
8</head>
9<body>
10    <div class ="wrapper">
11        <div class="header">header</div>
12        <div class="left">left</div>
13        <div class="right">rights</div>
14        <div class="footer">footer</div>
15    </div>
16</body>
17</html>
18

CSSのコード
.wrapper {
    width: 400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
  
  .header {
    height: 100px;
    width: 400px;
    background-color: #141f40;
  }
  
  .left {
    height: 250px;
    width: 150px;
    background-color:#80bfa8;
  }
  
  .right {
    height: 250px;
    width: 250px;
    background-color: #8c2727;
  }
  
  .footer {
    height: 100px;
    width: 400px;
    margin: 0 auto;
    background-color: #d98d30;
  }
  
  @media screen and (max-width: 767px) {

    .header {
        width: 250px;
    }

    .right {
        width: 100px;
    }

    .footer {
        width: 250px;
    }

}


@media screen and (max-width: 479px) {

    .header {
        width: 150px;
    }

    .right {
        width: 150px;
    }

    .footer {
        width: 150px;
    }

}

試したこと

ネットでググって直し中です。

補足情報（FW/ツールのバージョンなど）

お時間あるときに知恵をお貸しください。

K_3578

2021/03/23 09:09

MarkDownの<code>ブロックに関しては、HTML、CSS等複数異なるソースコードを記載する場合は ```HTML htmlのソースコード ``` (1行空ける) ```CSS cssのソースコード ``` という形にして頂ければと。

shochanyaho

2021/03/23 09:11

すみません。ありがとうございます。

K_3578

2021/03/23 09:13

修正感謝します。「コンテンツがぐちゃぐちゃになって」というのは回答者側からは質問本文ではわからないので、現状をスクショするなりして表示して頂ければ回答も付きやすいかと。個人情報等が載っている場合は場合に応じて質問者さんで隠すようになさってください。

shochanyaho

2021/03/23 09:24

アドバイス本当にありがとうございます。変更いたしました。

m.ts10806

2021/03/23 11:46

後から何とかしようとするのではなくどのデバイスの時にどのようにレイアウトするか決めないとどうにもならないのでは。

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

回答1件

ベストアンサー

レスポンシプにする場合は、絶対値(pxなど)でなく相対値(%)で設定するのとシンプルになります。

現状のコードをなるべく活かすなら、
親要素の幅だけ固定値で子要素は%で指定するといいでしょう。

css
1.wrapper {
2    width: 400px;
3    margin: 0 auto;
4    display: flex;
5    flex-wrap: wrap;
6  }
7
8  .header {
9    height: 100px;
10    width: 100%;
11    background-color: #141f40;
12  }
13  .left {
14    height: 250px;
15    width: 37%;
16    background-color:#80bfa8;
17  }
18  .right {
19    height: 250px;
20    width: 63%;
21    background-color: #8c2727;
22  }
23  .footer {
24    height: 100px;
25    width: 100%;
26    margin: 0 auto;
27    background-color: #d98d30;
28  }
29
30  @media screen and (max-width: 767px) {
31    .wrapper {
32        width: 250px;
33    }
34}
35
36@media screen and (max-width: 479px) {
37    .wrapper {
38        width: 150px;
39    }
40}

レイアウトはそのままで拡大縮小するならメディアクエリは使わずにシームレスに変化するようにすることもできます。例えば、下記のような感じです。

css
1.wrapper {
2  max-width: 800px;
3  width: 80%;
4  margin: 0 auto;
5  display: flex;
6  flex-wrap: wrap;
7}
8
9.header {
10  height: 100px;
11  width: 100%;
12  background-color: #141f40;
13}
14.left {
15  height: 250px;
16  width: 37%;
17  background-color:#80bfa8;
18}
19.right {
20  height: 250px;
21  width: 63%;
22  background-color: #8c2727;
23}
24.footer {
25  height: 100px;
26  width: 100%;
27  margin: 0 auto;
28  background-color: #d98d30;
29}