レスポンシブデザインのmeta設定したらiphone上の表記がおかしくなった。

パソコン全画面のデザインが完成し、レスポンシブデザインに移るために、metaタグの設定をしたところ、携帯での画面が半分になり、文字も見ずらくなりました。
問題点を探していただきたいです。

html
1<!DOCTYPE html>
2<html lang ="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>松風屋</title>
6    <meta name="description" content="松風屋ホームページ">
7    <link rel="stylesheet" href="style.css">
8    <meta name="viewport" content="width=device-width, initial-scale=1">
9  </head>
10
11  <body>
12     <nav>
13        <h1><img src="images/logo.png" alt="松風屋のロゴです。"></h1>
14          <ul>
15            <li><a href="http://www.matukazeya.com/">トップページ</a></li>
16            <li><a href="http://www.matukazeya.com/">松風屋のこだわり</a></li>
17            <li><a href="http://www.matukazeya.com/">あんどーなつ</a></li>
18            <li><a href="http://www.matukazeya.com/">商品のご紹介</a></li>
19            <li><a href="http://www.matukazeya.com/">店舗情報</a></li>
20            <li><a href="http://www.matukazeya.com/">会社概要</a></li>
21            <li><a href="http://www.matukazeya.com/">ご注文・お問い合わせ</a></li>
22          </ul>
23       
24        </nav>
25
26   <header>
27    <div class="image">
28      <h2>
29        <img src="images/logo (2).png" alt="松風屋のロゴです。" >
30      </h2>
31    </div>
32      
33      
34      <div class="main">
35          <div class="description">和菓子処松風屋のこだわり</div>
36        <div class="article">
37          <p>当社は、対象10年に創業した約100年の歴史を持つ和菓子屋です。<br>初代社長、佐々木市郎は俳聖松尾芭蕉を敬愛しており、「奥の細道　芭蕉最中」など<br>芭蕉にゆかりのある菓子を作り続けてきました。<br>松尾芭蕉が奥の細道の旅の間に見出した概念に「不易流行」というものがあります。<br>
38          これは、いつまでも変化しない本質的なものを忘れない中にも、<br>新しい変化を取り入れていくということです。<br>当社はこの言葉を経営理念とし、昔からの伝統を守りつつ、<br>時代に流れや新しい変化を取り入れ、常により良い菓子を探求し続けています。</p>
39        </div><br>
40          <img src="images/name.png" class="img.name">
41          <p class="contact">株式会社松風屋三代目　佐々木啓仁</p>
42          <p>
43            <a class="btn" href="http://www.matukazeya.com/">詳しく見る</a>
44          </p>
45      </div>
46    </header>  
47
48    <div class="secondary">
49     
50      <div class="secondary2">
51       <p class="description2"><span class="section1">和菓子職人が丹精込めて作った</span><br><span class="section2">昔懐かし</span><span class="section3">あんどーなつ</span></p>
52       <p>繊細な味覚を持つ和菓子職人が丹精込めて作ったら、上品な甘さの特別なあんどーなつができました。<br>こだわりの食材を職人の技で仕上げた松風屋のあんどーなつをぜひご賞味ください。</p>
53       <p class="btn22">
54         <a class="btn2"  href="http://www.matukazeya.com/">詳しく見る</a>
55        </p>
56      </div>
57    </div>
58
59    <div class="thirtiary">
60      <p class="description3">商品のご紹介</p>
61      <p class="related"> 素材の良さを活かしながら、熟練の技ひとつひとつ、まごころ込めて手作りしています。</p>
62      <div class="container">
63        <img src="images/ic_products1.jpg" class="item">
64        <img src="images/ic_products2.jpg" class="item">
65        <img src="images/ic_products3.jpg" class="item">
66        <img src="images/ic_products4.jpg" class="item">
67        <img src="images/ic_products5.jpg" class="item">
68      </div>
69        <p class="btn33">
70          <a class="btn3" href="http://www.matukazeya.com/">商品概要</a>
71        </p>
72    </div>
73
74    <div class="news">
75     <p class="news2">お知らせ</p>
76     <p class="btn44">
77       <a href="http://www.matukazeya.com/" class="btn4">facebook</a>
78    </p>
79   </div>
80
81    <div class="goodsorder">
82      <p class="g1">商品のご注文・お問い合わせ</p>
83      <p class="g2">松風屋では、全国のお客様への発送も行っております。</p>
84      <p class="g3"> 商品のご注文や、その他お問い合わせ等お待ちしております。</p>
85      <p class="g4"> TEL:023-631-3012</p>
86      <p class="g5"> TEL:023-631-3013</p>
87      <p class="btn55">
88        <a href="http://www.matukazeya.com/" class="btn5">ご注文・お問い合わせ</a>
89      </p>
90    </div>
91
92    <div class="shop">
93      <p class="shopinfo">店舗情報</p>
94      <div class="container2">
95       <div class="concept">
96        <p class="com">株式会社</p>
97        <table class="ProductTable">
98          <tr>
99            <td>住所</td>
100            <td>990-0042<br>山形県山形市七日町四丁目3-11</td>
101          </tr>
102          <tr>
103            <td>TEL/FAX</td>
104            <td>023-631-3013/023-631-3013</td>
105          </tr>
106          <tr>
107            <td>営業時間</td>
108            <td>平日8:30〜18:30<br>日曜9:00〜17:00</td>
109          </tr>
110          <tr>
111            <td>定休日</td>
112            <td>年中無休</td>
113          </tr>
114        </table>
115      
116       </div><!--concept-->
117
118       <div class="map">
119        <iframe src="https://www.google.com/maps/d/embed?mid=1p3xjuO3Dvbp3ViHrTH_-XquKTGw&hl=ja" width="640" height="480"></iframe>
120       </div> <!--map-->
121      </div> <!--container2-->
122
123      <p class="company"><a class="btn6" href="http://www.matukazeya.com/">会社概要・店舗情報</a></p>
124    </div> <!--shop-->
125
126    <footer>
127     <div class="right">
128      <img src="images/logo (1).png">
129      <p class="finc">株式会社松風屋</p>
130      <p>990-0042 山形県山形市七日町四丁目３-１１</p>
131      <p>TEL:023-631-3012 FAX:023-631-3013</p>
132     </div>
133
134    <div class="left">
135      <table class="ProductTable2">
136       <tr>
137         <td>トップページ</td>
138         <td>商品のご紹介</td>
139         <td>会社概要</td>
140       </tr>
141       <tr>
142         <td>松風屋のこだわり</td>
143         <td>ご注文・お問い合わせ</td>
144         <td>facebookページ</td>
145       </tr>
146       <tr>
147         <td>あんどーなつ</td>
148         <td>店舗情報</td>
149       </tr>
150      </table>
151     <div class="imagefbtw">
152      <img src="images/btn_fb.png">
153      <img src="images/btn_tw.png">
154     </div>
155     </div>
156    </footer>
157
158   
159  </body>
160</html>
161
162
163
164

CSS
1nav {
2  display: flex;
3}
4header {
5  margin:0 0 100px 0;
6}
7.image {
8  background-image: url(http://www.matsukazeya.com/images/home/main.jpg);
9  width:100%;
10  height:600px;
11  position:relative;
12  background-size: cover;
13}
14h2 {
15  text-align: center;
16  padding-top: 200px;
17}
18h1 {
19  margin: 10px 0 0 200px;
20}
21ul {
22  display: flex;
23  list-style-type: none;
24  margin: 1.1rem 0 0 2.6rem;
25  font-size:14px;
26  font-family: serif;
27}
28li {
29  margin: 0 1rem 0 0;
30}
31a {
32  text-decoration: none;
33  color: #000
34}
35
36/* .img {
37  text-align: center;
38  background-image: url(images/main-vsual-nontitle.png);
39  background-size: cover;
40} */
41.main {
42  text-align: center;
43  font-family: serif;
44}
45.description {
46  font-size:28px;
47  margin:100px 0 40px 0 ;
48  letter-spacing: 10px;
49}
50.article {
51  font-size:18px;
52}
53p {
54  line-height: 2;
55  margin: 0;
56}
57.contact {
58  line-height:5;
59}
60/* .recommend {
61  width:150px;
62  height: 40px;
63  background-color: #fff
64} */
65.btn {
66  background-color:#fff;
67  padding: 10px;
68  border: thin solid #000;
69 
70}
71.btn2 {
72  background-color: #fff;
73  padding:10px;
74  border: solid thin #000;
75}
76.btn22 {
77  margin: 25px 0 0 0;
78}
79.btn3 {
80  padding:10px 25px;
81  background-color:#fff;
82  border: solid thin #000;
83}
84.btn4 {
85  padding:10px;
86  background-color:#fff;
87  border: solid thin #000;
88}
89.btn33 {
90  margin:30px;
91}
92.btn44 {
93  margin:30px;
94}
95
96.secondary {
97  /* padding: 200px 0 0 50%;
98  font-family: serif;
99  background-image:url(images/main-vsual-nontitle.png);
100  height:600px;
101  width:100%;
102  position:relative;
103  background-size:cover; */
104  background-image:url(http://www.matsukazeya.com/images/home/bg_donuts.jpg);
105  height:400px;
106  width:100%;
107  position:relative;
108  background-size:cover;
109 
110  /* margin: 0 0 100px 0; */
111}
112.secondary2 {
113  padding: 70px 0 0 50%;
114  font-family: serif;
115  width:50%;
116}
117  
118
119/* .img {
120  z-index:1;
121  top:100px;
122  margin:1000 1000 0 0;
123} */
124.section1 {
125  font-size:15px;
126}
127.section2 {
128  font-size:18px;
129}
130.section3 {
131  font-size:23px;
132}
133
134
135.thirtiary {
136  width:100%;
137  background-image: url(http://www.matsukazeya.com/images/bg_beige.png);
138  padding: 100px 0 100px 0;
139
140  text-align:center;
141}
142.description3 {
143  font-size: 24px;
144  margin: 0 0 30px 0;
145}
146.related {
147  font-size:15px;
148  margin: 0 0 45px 0;
149}
150.container { 
151  width:100%;
152}
153.item {
154  padding: 10px;
155}
156.goods {
157  width:150px;
158  height:40px;
159  background:#fff
160}
161.news {
162  text-align:center;
163  padding:100px 0 100px 0;
164}
165.news2 {
166  font-size:35px;
167  font-family: serif;
168  padding:0 0 70px 0;
169  border-bottom: thin solid #e4d7bc
170}
171.facebook {
172  margin: 30px;
173  width: 150px;
174  height:40px;
175  background-color: #fff;
176}
177
178.goodsorder {
179 text-align:center;
180 width: 100%;
181 background-image: url(http://www.matsukazeya.com/images/bg_beige.png);
182 padding:70px 0 70px 0;
183 font-family: serif;
184}
185.g1 {
186  font-size: 35px;
187  margin:0 0 35px 0;
188}
189.g3 {
190  margin-bottom:20px;
191}
192.g4 {
193  font-size: 30px;
194}
195.g5 {
196  font-size: 30px;
197  margin: 0 0 20px 0;
198}
199.btn5 {
200  padding:10px;
201  background-color:#fff;
202  border: solid thin #000;
203}
204.btn55 {
205  margin:30px;
206}
207
208.shop {
209  width:100%;
210  font-family:serif;
211}
212.shopinfo {
213  text-align:center;
214  font-size:30px;
215  margin: 40px 0 40px 0;
216}
217
218
219.container2 {
220  display: flex;
221  margin:0 0 50px 0;
222}
223.com {
224  font-size:30px;
225}
226.ProductTable {
227  border-collapse: separate;
228  border-spacing: 18px 0px;
229  font-size:20px;
230}
231.concept {
232  width:50%;
233  margin: 0 0 0 200px;
234}
235.map {
236  width:50%;
237}
238iframe {
239  width: 430px;
240  height:250px;
241}
242
243.company {
244  text-align:center;
245  margin: 0 0 100px 0;
246}
247.btn6 {
248  padding:10px;
249  background-color:#fff;
250  border: solid thin #000;
251}
252.company input {
253  width:150px;
254  height: 40px;
255  background-color: #fff;
256}
257
258footer {
259  background: #000000;
260  padding: 40px 0;
261  width:100%;
262  display: flex;
263  color: #fff;
264  font-family:serif;
265}
266.right {
267  width:40%;
268  padding: 0 0 0 100px;
269}
270.finc {
271  font-size: 20px;
272}
273.left {
274  width:60%;
275  padding: 0 0 0 150px;
276  font-size:15px;
277  font-weight: lighter;
278}
279.ProductTable2 {
280  border-collapse: separate;
281  border-spacing: 40px 0px;
282}
283.imagefbtw {
284  margin: 50px 0 0 400px;
285  
286   
287}
288

miyabi_pudding

2020/06/01 16:39

iPhoneの何でしょうか？ X？11？それともSEでしょうか。 iOSも提示してください。なんとなく、あらゆるサイズを、px絶対値にしてるのが原因かとは思いますが・・・。

m.ts10806

2020/06/01 21:06

「見づらい」は個人の感覚です。画面キャプチャを提示してください。

hentaiman

2020/06/01 21:47

> レスポンシブデザインに移るためにまだデザインに移ってないんですよね？そこからデザイン調整して見やすく改良するんだから何もしてない状態なら見にくくて当然でしょ？と思ったんですが実際にデザイン調整した後に見にくい箇所があったら相談してはどうでしょうか？

buchiyuu

2020/06/01 23:32

miyabi_takatsukiさんありがとうございます。iphoneXです。一般的にはpxは相対値で指定するのが通常というか、見やすいものになるのでしょうか？

buchiyuu

2020/06/01 23:41

m.ts10806さんありがとうございます。画面キャプチャを載せました。

buchiyuu

2020/06/01 23:43

hentaimanさんありがとうございます。僕が今まで参考にしているテキストでは、metaタグ要素を書いた時に、iPhoneX画面のレイアウトは崩れているが、文字が画面いっぱいに表示され、そこから修正していくというものでした。それにひきかえ、僕のiphoneXでのレイアウトは文字が小さく表示され、画面の半分を使っているという状態です。ここから修正は可能であるかを教えていただければ幸いです。

hentaiman

2020/06/01 23:51

そういう時はchromeのモバイル表示で要素確認していけばいいんですよ、どの要素が原因で半分になっているか分かる。分からなくても適当に怪しい要素（大抵はdivの一括り）を削除したり戻したりしながら画面を表示すればどの要素が原因か特定できる。そしたらその要素に関連するCSSを見直す。後はCSSでもパッと見５０％になっているところを疑って消してみるとか。予想つかなくてもCSSを全て取っ払って一つずつ追加しなおしながら確認していけば必ず原因は特定できます

hentaiman

2020/06/01 23:56

その上で、例えば「追加したのに反映されないスタイルがある」という質問が挙がると改善点や修正点の特定班が出動します

buchiyuu

2020/06/02 00:03

ありがとうございます！修正は可能だと解釈してもいいということでしょうか？

hentaiman

2020/06/02 00:19

もちろん　いわゆる崩れた表示をさせる記述がhtmlやcss内にあるわけなので、原因を解消すれば表示崩れも解消できます

miyabi_pudding

2020/06/02 00:43

> 一般的にはpxは相対値で指定するのが通常というか、見やすいものになるのでしょうか？逆です。一般的かどうかはさておき、 px絶対値だと、デバイスによって表示の比率が変わってしまいますので、モバイルサイズに切り替わるとき（CSSのみでやるならメディアクエリを使って切り替える）相対単位（%や、ビューポート系単位）を使うことで、表示の仕方が大きくくずれないように調整するのが、現在のトレンドです。

dit.

2020/06/02 00:51 編集

実在する店舗のようですがそちらとのご関係は？学習用に模写しているだけであれば（背景にしている）画像の直リンクなどあまりよろしくない行為なので、ダミー画像を使ったりご自身のPCにダウンロードしたものを使う（サーバーへのアップはしない）などの対処をご検討ください。関係者の方であればこの指摘は無視してください。

buchiyuu

2020/06/02 06:22

hentaiman さんありがとうございました！助かりました。

buchiyuu

2020/06/02 06:24

miyabi_takatsukさんしっかり理解できました！丁寧な回答ありがとうございました！

buchiyuu

2020/06/02 06:35

dit. さんご指摘いただきありがとうございます！学習用の模写をしています。まず、もしteratailにアップしなかった場合でも、画像を使うことはNGということでしょうか？画像の直リンクというのが理解できないので、説明していただきたいです！

dit.

2020/06/02 07:49

直リンクについて相手のサーバーのデータを見に行くということは相手のサーバーの転送量が増えるということです。最近のレンタルサーバーは転送量の上限もかなり大きいですしほとんど問題にならないと思いますが、多少なりとも相手のサーバーに負担をかけます。サーバーによっては画像の直リンク自体ができないように設定されている場合もあるので進んでするべきではないものとして認識しています。 https://ischool.co.jp/2018-07-02/ 練習用ということであれば一度自身のPCにダウンロードしてそれを使うのが良いかと思います。「こんなの模写しました」といってサーバーにアップしたりすると今度は著作権とか無断転載とか別の問題が出てきそうなのでそれはもちろんNGですが。

buchiyuu

2020/06/02 13:50

丁寧に教えていただきありがとうございました！理解できました！

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

回答2件

ざっと見ただけで言えることは下記です。
モバイルファーストで初めから作り直し

レスポンシブサイトを作る時って大体モバイルファーストで作ります。
「PCレイアウトを如何にモバイルに適用するか」と考えるのは悪手ですし、一言では言えないくらい困難です。
見える原因だけをちょこちょこ直したところで、元のPCサイトのレイアウトに影響が0とは言えません。となると、火消しをした先から火が出てまたそちらの火消しに追われることになり、いつまでたっても終わりません。
それならモバイルファーストで作って、そこからPCサイトに展開していった方がスッキリできるでしょう。

レスポンシブサイトってmetaタグ設定しただけで終わるわけではないです。
それは「PCサイトを無理やり適用させた」だけに過ぎません。不具合が出るのは当然と言えば当然です。
モバイルに最適化されたCSSを適用したわけではないわけですから、はみ出るものも沢山あるでしょう。
@mediaを利用し、幅によってレイアウトを変化させる技術が必要になる非常に繊細な作業です。

「PCサイトは完成したからこのレイアウトは崩したくない、変えたくない」のでしたら、URLで振り分けてモバイル用のデザインを別で準備してください。

ただ、PCにしてもブラウザちょっと狭めると横スクロールが出たり文字の折り返し（メニューや店舗情報など）が発生するので、PCレイアウトも本当にこのままで「完成」と言っていいか一考いただきたく。私がクライアントならOK出しません。

投稿2020/06/01 21:19

編集2020/06/01 21:26

m.ts10806

総合スコア80861

buchiyuu

2020/06/01 23:59

ありがとうございます！僕が求めていた回答でした！今までの考え方と真逆で驚きましたが、モバイルファーストというのが一般的なのですね。テキストとは全く逆の方法だったので驚きました（笑）後半の部分に対して質問なのですが、ブラウザを狭めた時にpcレイアウトが、綺麗に維持？見やすい？ようにするためにはどのようにすれば良いのでしょうか？ずっと気になっていましたが、方法がわからないので、修正もしくはコツを教えていただきたいです。

m.ts10806

2020/06/02 00:06

後半ってどこの話でしょうか

buchiyuu

2020/06/02 06:21

ただ、PCにしてもというところから、最後までのところです。後ろから３行の部分です。よろしくお願いします！

m.ts10806

2020/06/02 07:07

結局どう見せたいか次第です。クライアントに確認してください。あくまで個人の見解です。ただ、コメント見てる限り、もっと根本的なところができてない状態で雑に作ってしまってるようにも思えるので、全部作り直した方が良いですね。コード見てないですけど、あのような表示を許しているコードを見る気にはなりません。

buchiyuu

2020/06/02 14:42

ありがとうございます！まだ２週間なので、もっと根本を理解できるよう頑張ります！また次回機会があればよろしくお願いします(^ ^)

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

ベストアンサー

metaタグの設定をしたところ、携帯での画面が半分になり、文字も見ずらくなりました。
問題点を探していただきたいです。

いまの状況は問題が生じているのではなく、1歩前進した状態と思われます。
(クライアントなど、HTML/CSSの知識がない人が見ると「1歩前進した」とは思ってもらえないと思いますが)

次のステップとしては、以下のように、display: block;や左右方向のmargin、paddingの値を小さくしていくという、地道な対応が必要となります。

とりあえず、以下のCSSで右側の余白はなくなる (減らせる?) と思います。

CSS
1/* とりあえずブレークポイントを1000pxに設定。いくつか好きな値を設定してください。 */
2@media screen and (max-width: 1000px) {
3  nav h1 {
4    margin-left: 0;　/* 余白が広すぎるので小さく。数値は好きに設定してください。 */
5  }
6  .container2 {
7    display: block; /* スマホでは縦に並べる */
8  }
9  .concept {
10    margin-left: 0;　/* 余白が広すぎるので小さく。数値は好きに設定してください。 */
11  }
12  
13  footer {
14    display: block; /* スマホでは縦に並べる */
15  }
16  footer .right {
17    padding-left: 0;　/* 余白が広すぎるので小さく。数値は好きに設定してください。 */
18  }
19  footer .left {
20    padding-left: 0;　/* 余白が広すぎるので小さく。数値は好きに設定してください。 */
21  }
22}