【レスポンシブ対応】スマホ版にすると全体のwidthが小さくなる

前提・実現したいこと

こちらのAirbnbのサイトのPC版の模写が完成し、レスポンシブ対応をしようとしているところです。

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

しかし、chromeのdeveloper toolで確認すると以下の画像のように、左に寄ってしまいます。
初めは「viewportの設定がhtmlで出来ていないのかな」と思いましたが、htmlの方では既にview portの設定はheadタグの方でしていました。

該当のソースコード

ここに書くには少し長いので、私のgithubに全コード上がっていますのでこちらからご確認ください。

以下抜粋

hrml: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.0">
6  <title>Airbnb_copy</title>
7  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
8  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9  <link rel="stylesheet" href="./css/mobile.css" media="screen and (max-width: 600px)">
10  <link rel="stylesheet" href="./css/style.css"
11  media="screen and (min-width: 601px)">
12  <link rel="icon" type="img/png" href="./images/icon.png">
13  <script src="https://kit.fontawesome.com/89ac4b0242.js" crossorigin="anonymous"></script>
14</head>
15<body>
16  <div id="header" class="wrapper">
17    <header class="main-menu">
18      <div class="menu">
19        <h1><a href="./index.html"><i class="logo fab fa-airbnb fa-lg"></i></a></h1>
20        <nav>
21          <ul class="main-navigation">
22            <div class="page-name">
23              <li>概要</li>
24            </div>
25            <li><a class="header-link" href="index.html">準備</a></li>
26            <li><a class="header-link" href="index.html">安全</a></li>
27            <li><a class="header-link" href="index.html">マネープラン</a></li>
28          </ul>
29        </nav>
30      </div>
31      <button class="begin">はじめる</button>
32    </header>
33  </div>

css:css
1@charset "UTF-8";
2
3/* 共通
4-------------------- */
5html {
6  font-size: 100%;
7  box-sizing: border-box;
8  color: #484848;
9}
10body {
11  font-family: "Circular", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", "sans-serif";
12}
13i.fas {
14-webkit-font-smoothing:antialiased;
15-webkit-text-stroke-color:#fff;
16-webkit-text-stroke-width:1px
17}
18ul {
19  list-style: none;
20}
21input:focus,
22select:focus {
23  border: 1px solid #469196;
24  outline:0;
25}
26select {
27  border-radius: 4px;
28}
29.header-link {
30  text-decoration: none;
31  color: #484848;
32}
33.link {
34  text-decoration: none;
35  color: #008489;
36  transition: text-decoration-lilne 250ms ease;
37}
38.link:hover {
39  text-decoration-line: underline;
40}
41.wrapper {
42  max-width: 1080px;
43  margin: 0 auto; /* 横幅が大きい画面サイズでも不自然にならないようにわざと指定 */
44  padding: 0 2%; /* 横幅が大きい画面サイズでも不自然にならないようにわざと指定 */
45}
46.big-bg {
47    background-size: cover;
48    background-position: center top;
49    background-repeat: no-repeat;
50}
51.subject {
52  text-align: center;
53  margin-bottom: 64px;
54}
55.subject-decoration {
56  width: 64px;
57  border-bottom: 2px #484848 solid;
58  margin: 0 auto 26px;
59}
60.subject-content {
61  font-size: 60px;
62  font-weight: 900;
63  line-height: 1.06;
64  color: #333;
65}
66.sub-title {
67  font-size: 1.5rem;
68  font-weight: 800;
69  line-height: 1.875;
70  color: #484848;
71}
72
73/* ヘッダー
74-------------------- */
75.main-menu {
76  display: none;
77  width: 100%;
78  height: 82px;
79  font-size: 0.875rem;
80  justify-content: space-between;
81}
82.menu {
83  display: flex;
84}
85.main-navigation {
86  display: flex;
87  width: 318px;
88  height: 100%;
89  justify-content: space-between;
90  align-items: center;
91  margin-left:15px;
92}
93.main-navigation > li:hover {
94  text-decoration-line: underline;
95}
96.logo {
97  display: inline-block;
98  margin: 25px 20px 25px 0;
99  color: #008489;
100}
101.begin {
102  display: block;
103  width: 88px;
104  height: 34px;
105  color: #fff;
106  background: #e64051;
107  border-radius: 8px;
108  align-self: center;
109}
110.page-name {
111  color: #469196;
112  border-bottom: 2px #469196 solid;
113}
114
115/* 大きな背景画像
116-------------------- */
117.main-bg {
118  background-image: linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),url("../images/main-bg.jpg");
119  width: 100%;
120  min-height: 600px;
121  object-fit: cover;
122  display: flex;
123  justify-content: flex-end;
124  align-items: baseline;
125  margin-bottom: 64px;
126}
127
128/* ホストの検索ボックス
129-------------------- */
130.house-form {
131  background: #fff;
132  max-width: 460px;
133  padding: 32px;
134  border-radius: 4px;
135  margin: 78px 92px 0 0;
136}
137.house-form h2 {
138  font-size: 39px;
139  font-weight: 600;
140  line-height: 1;
141  margin-bottom: 24px;
142  color: #484848;
143}
144.house-form p {
145  font-size: 1rem;
146  color: #484848;
147  line-height: 1.375rem;
148  font-weight: 600;
149  padding-left: 2px;
150  margin-bottom: 5px;
151}
152

試したこと

viewportの確認

html
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>のwidthを100%にしてみた

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

回答2件

原因は、body要素内にレスポンシブでない要素が存在するためだと思います。

例えば、CSSで.review-contentや.explanation等のwidthが固定pxで設定されていたり、HTMLで画像サイズが固定pxで設定されているので、描画時にその固定幅が反映され、画面幅とコンテンツ幅がぴったり同じになりません。その差がレイアウトの乱れとして見えている可能性があります。

ページ内に存在する全要素がレスポンシブ対応となるよう、コードを修正することをおすすめします。

投稿2020/09/15 02:17

arenomarb

総合スコア53

ベストアンサー

viewportが間違っているのではなく、単純にはみ出している要素があるので左に偏っているように表示されています。
例えばfooterでいうとmobile.cssに

css
1.footer-below {
2  
3  width: 1280px;
4  
5}

と記載されていますが、
おそらく縮めたい要素だと思うので記載を見直してください。

ほかにもはみ出している要素があったり、折り返していない部分があるので
そういった部分を見直されるとよいと思います。

基本的に表示させたい画面幅で右にスクロールできる部分に表示されているところを
重点的に見直すのが良いと思います。

投稿2020/09/15 01:51

beginner_t

総合スコア716

yukiyohure

2020/09/15 14:14

お二方ともありがとうございます。解決しました！ BAは少しだけお早い回答をいただいたbeginner_tさんにします。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

【レスポンシブ対応】スマホ版にすると全体のwidthが小さくなる

前提・実現したいこと

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

該当のソースコード

試したこと

関連した質問