スマホ画面で検証時に、コンテンツが画面に収まりきらず横スクロールが発生している症状を改善したい。

###前提・実現したいこと
Google検証ツールにて各デバイスでの表示を確認しています。
現状、どのデバイス（例 iphone5,6,6plus,ipad等）で確認してもpc画面内に収まって表示されるコンテンツが、全て見切れてしまいます。常に横スクロールが発生している状態で見辛いです。

今まで下記コードをhead内に記述して、各デバイスに適した縮小が施されたのですが、
今回はうまく反映されません。

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

コンテンツがはみ出るのは、単にCSS側の調整に失敗している部分がある（100%を超えている状態の指定がどこかに必ずある）との助言を頂き、CSS内容を確認したのですがなかなか原因が特定できません。

上記コードを用いて、コンテンツを各デバイス画面内にしっかり収める方法をご教授願います。

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

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

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta description="">
6  <meta name="Keywords">
7
8  <meta name="viewport" content="width=device-width,initial-scale=1">
9  <!--    <meta name="viewport" content="width=1080px">-->
10  <!--  <meta name="viewport" content="width=1200, minimum-scale=0.1">-->
11
12  <title>Erla</title>
13  <link rel="stylesheet" href="css/normalize.css">
14  <link rel="stylesheet" href="css/style.css">
15  <link href="https://fonts.googleapis.com/css?family=Artifika" rel="stylesheet">
16  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
17    crossorigin="anonymous">
18  <link rel="shortcut icon" href="image/favicon%20(1).ico" />
19  <script src="js/jquery-3.2.1.min.js"></script>
20
21</head>
22<body>
23
24  <header id="navi">
25    <div class="wrapper">
26
27      <div class="title">
28        <h1><a href="#">Erla</a></h1>
29      </div>
30
31      <div class="header-menu">
32        <ul id="menu" class="header-right">
33
34          <li><a href="about.html">About</a></li>
35
36          <li class="parent"><a href="#">Product</a>
37
38            <ul>
39              <li><a href="angel.html">Angel</a></li>
40              <li><a href="#">Pillow</a></li>
41              <li><a href="#">Costume</a></li>
42            </ul>
43
44          </li>
45
46          <li><a href="online-shopping.html">Shop</a></li>
47          <li><a href="contact.html">Contact</a></li>
48          <li class="flag"><a href="#"><img src="image/Denmark.png"></a></li>
49          <li class="flag"><a href="#"><img src="image/Faroes.png"></a></li>
50
51        </ul>
52
53      </div>
54    </div>
55  </header>
56
57  <main>
58    <div class="top-message">
59      <h2>Sample catchy title</h2>
60      <p>Sample description</p>
61    </div>
62  </main>
63
64 
65</body>
66</html>

css
1@charset "utf-8";
2html {
3  font-size: 62.5%;
4  font-family: 'Artifika', serif;
5}
6
7body {
8  background-color: mediumaquamarine;
9  min-width: 1024px;
10}
11
12h1 {
13  margin: 0;
14  padding: 0;
15}
16
17a {
18  color: royalblue;
19  text-decoration: none;
20}
21
22a:hover {
23  opacity: .7;
24  color: lightseagreen;
25  transition: .8s;
26}
27
28p {
29  font-size: 1.5rem;
30}
31
32ul {
33  list-style: none;
34  margin: 0;
35  padding: 0;
36}
37
38li {
39  margin: 0;
40  padding: 0;
41}
42
43.clearfix:after {
44  content: "";
45  display: block;
46  clear: both;
47}
48
49#navi {
50  background-color: rgba(255, 255, 255, 0.7);
51  position: fixed;
52  top: 0;
53  left: 0;
54  right: 0;
55  z-index: 10;
56  padding: 20px 0;
57  width: 100%;
58  height: 50px;
59  line-height: 50px;
60}
61
62.title {
63  float: left;
64  width: 30%;
65  font-size: 2rem
66}
67
68.header-menu {
69  float: right;
70  width: 70%;
71}
72
73.header-right li {
74  float: left;
75  padding: 0 28px;
76  font-size: 2rem;
77  position: relative;
78}
79
80.header-right li ul {
81  display: none;
82  position: absolute;
83  top: 50px;
84  left: 20px;
85}
86
87.header-right li ul li {
88  float: none;
89  width: 70%;
90  background-color: aqua;
91  font-size: 1.4rem;
92}
93
94.header-right li ul li a {
95  color: white;
96  display: block;
97}
98
99.header-right li ul li a:hover {
100  color: deeppink;
101}
102
103.flag img {
104  width: 30px;
105  vertical-align: text-top;
106}
107
108
109
110
111main {
112  background-image: url("../image/top-pic.jpg");
113  background-size: cover;
114  background-position: center center;
115  background-repeat: no-repeat;
116  background-attachment: fixed;
117}
118
119.top-message {
120  color: darkcyan;
121  padding-top: 500px;
122  text-align: center;
123  height: 400px;
124}
125
126.top-message h2 {
127  font-size: 5rem
128}
129
130.top-message p {
131  font-size: 2.5rem
132}
133
134article {
135  padding: 50px 0;
136}
137
138.group {
139  margin: 70px 0;
140}
141
142.picture {
143  width: 50%;
144  height: auto;
145  border-radius: 10%;
146}
147
148.right {
149  width: 50%;
150  height: auto;
151  float: right;
152}
153
154.left {
155  width: 50%;
156  height: auto;
157  float: left;
158}
159
160.description {
161  padding: 0 20px;
162  box-sizing: border-box;
163}
164
165.description h2 {
166  font-size: 2rem;
167  border-left: 6px solid darkblue;
168  padding-left: 3px
169}
170
171.description p {
172  font-size: 1.8rem;
173}
174
175

###試したこと

with+margin+paddingで100%を超えてるものがいないかをcss内で探し数値の変更や削除を試みた。
参考書及びネット検索で類似例を検証し、アドバイスに基づいて検証。

###補足情報

質問対象の自作webサイト
*teratailの文字入力制限でエラーが出たため、該当コード内容は個人的に怪しいと思った部分を抜粋しました。
上記urlに飛んで頂ければ全コード確認可能です。

初心者のためコード構成、内容に重複や非効率的な組立があるかと思います。
お見苦しい内容で恐縮ですが、よろしくお願い致します。

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

回答3件

ベストアンサー

スタイルシートを確認いたしましたところ、メディアクエリー(Media Queries)によるブレークポイント(Breakpoints)の設定はされていないようです。

今では、多種多様なデバイスがあるため、ウェブコンテンツを整えるには、メディアクエリー(Media Queries)によるブレークポイント(Breakpoints)が必要かと思われます。

メディアクエリー(Media Queries)やブレークポイント(Breakpoints)が解らないのであれば、書籍の購入を検討していただければと思います。

レスポンシブWebデザインマルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

もしくは、下記のサイトのようなものを自分で調べてやってみる

レスポンシブウェブデザインの基本

CSSの情報収集
CSS Weekly

JavaScriptの情報収集
JavaScript Weekly

投稿2017/08/08 01:19

編集2017/08/08 10:28

marshmallowy

総合スコア204

6111-debutant_.

2017/08/08 10:00

mr.hironobu様早速の回答を頂きまして、ありがとうございます。メディアクエリーを導入するというアドバイスを参考にさせて頂きます。今まで導入前に縮小が確認できたので、困惑しておりました。作業を通じて行き詰まった際、再度質問させて頂ければ幸いです。

marshmallowy

2017/08/08 10:13

はい、頑張ってください。出来るようになると楽しいですよ。また、CSSに関連した記事を集めた「CSS Weekly - http://css-weekly.com」というもあります。私個人、かなり重宝してます。

6111-debutant_.

2017/08/08 10:19

そうですね！依然修正箇所は多いですが、ある程度スマホで形を確認できているのが嬉しいです。参考URLチェックしたいと思います。ありがとうございました。

marshmallowy

2017/08/08 10:30

いいえ。

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

僕も気になったのですが、下記のようにwidthを入力すると固定の幅になってしまうので、スマホで見た時に横スクロールが出来るようになってしまいます。
レスポンシブで作る際はwidthは%で指定するかmax-widthで記入するのが基本になってくるのではと思います。
ですので下記のコードを

.wrapper {
margin: 0 auto;
width: 970px;
}

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

.wrapper {
margin: 0 auto;
max-width: 970px;
}

今回はある程度固定幅を決めて中央寄せしたい要望だと思うので、上記のようにmax-widthで記入してあげると自分の開発環境（firefox）では問題なくレスポンシブになりました。
（実際に修正してアップしないとスマホでは確認出来ませんが）

もしくはこれで解消されない場合は

body {
background-color: mediumaquamarine;
min-width: 1024px;
}

min-width: 1024px;は削除してしまって問題ないかと思います。

ナビゲーションとかの実装に関しては以下の記事を参考にされると優しいかと思います^^

http://naokixtechnology.net/css/2380

投稿2017/08/08 02:18

patapata1234

総合スコア26

6111-debutant_.

2017/08/08 10:07

patapata1234様詳細なアドバイス及び検証までして頂きまして、ありがとうございました。固定幅の影響で横スクロールが生じている点とmax-widthの使い方に関してとても参考になりました。作業を通じて行き詰まった際、再度質問させて頂ければ幸いです。

patapata1234

2017/08/09 03:07

6111-debutantさん無事に解決出来てよかったです^^ 最初はつまづく部分ですが注意して構築していけば問題無くなると思うので、これからも日々勉強を頑張って下さい(*^^*) つまづいた際はいつでもご質問下さい！僕で答えられる範囲でしたら回答させていただきます(^o^)

6111-debutant_.

2017/08/09 04:42

アドバイス通りmin-width: 1024px;を削除したところ、意図した設定にすることができました。参考書等で学んだ状態にやっと持ち込めたので、これからメディアクエリで調整していきたいと思います。はい！よろしくお願い致します！

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

CSS
1body {
2    background-color: mediumaquamarine;
3    min-width: 1024px;
4}
5```とか
6```CSS
7.wrapper {
8    margin: 0 auto;
9    width: 970px;
10}