レスポンシブ対応のWebサイトを作っているのですが、ブラウザの画面を縮小するとレイアウトが崩れてしまいます。

前提・実現したいこと

レスポンシブ対応のWebサイトを作っているのですが、ブラウザの画面を縮小するとレイアウトが崩れてしまいます。
ブラウザ画面を縮小してもレイアウトが崩れないようにしたいです。
（Chromeの検証モードでタブレット・スマホ画面にして閲覧したときはレイアウトは崩れず表示されます。）

お忙しい中、大変お手数おかけ致しますが、何卒宜しくお願い致します。

該当のソースコード

HTML
1<body>
2 <div id="wrapper">
3
4<section class="card">
5  <div class="card_inner">
6  <h1>Card</h1>
7  <hr>
8  <div class="card-items">
9    <div class="card-item">
10      <div class="card_pic"></div>
11      <div class="text">
12        <h1>タイトルタイトル</h1>
13        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
14      </div>
15    </div>
16    <div class="card-item">
17      <div class="card_pic"></div>
18      <div class="text">
19        <h1>タイトルタイトル</h1>
20        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
21      </div>
22    </div>
23    <div class="card-item">
24      <div class="card_pic"></div>
25      <div class="text">
26        <h1>タイトルタイトル</h1>
27        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
28      </div>
29    </div>
30    <div class="card-item">
31      <div class="card_pic"></div>
32      <div class="text">
33        <h1>タイトルタイトル</h1>
34        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
35      </div>
36    </div>
37    <div class="card-item">
38      <div class="card_pic"></div>
39      <div class="text">
40        <h1>タイトルタイトル</h1>
41        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
42      </div>
43    </div>
44    <div class="card-item">
45      <div class="card_pic"></div>
46      <div class="text">
47        <h1>タイトルタイトル</h1>
48        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
49      </div>
50    </div>
51  </div>
52  </div>
53</section>
54
55<section class="news">
56  <h1 class="title">News</h1>
57  <hr>
58  <div class="news-items">
59    <div class="news-item">
60      <div class="date">2019-01-30</div>
61      <div class="label"><p>ラベル１</p></div>
62      <div class="newstext">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</div>
63    </div>
64    <div class="news-item">
65      <div class="date">2019-01-30</div>
66      <div class="label"><p>ラベル１</p></div>
67      <div class="newstext">ニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュース</div>
68    </div>
69    <div class="news-item">
70      <div class="date">2019-01-30</div>
71      <div class="label"><p>ラベル１</p></div>
72      <div class="newstext">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</div>
73    </div>
74  </div>
75</section>
76
77</div>
78
79</body>

CSS
1body {
2  margin: 0px;
3  padding: 0px;
4}
5
6#wrapper {
7  width: 100%;
8  overflow:hidden;
9}
10
11/* Card */
12
13section.card {
14  height: 1125px;
15  background-color: #EFEFEF;
16}
17
18.card_inner h1 {
19  text-align: center;
20  margin: 0 auto;
21  padding-top: 68px;
22  padding-bottom: 44.43px;
23  font-size: 60px;
24  line-height: 96px;
25  font-family: Yu Gothic;
26  font-weight: bold;
27  color: #333333;
28}
29
30hr {
31  text-align: center;
32  border: solid 5px #3F51B5;
33  width: 76px;
34  margin-top:0 ;
35  margin-bottom: 68.57px;
36}
37
38.card-item {
39  width: 310px;
40  height: 311px;
41  background-color: #fff;
42  border-radius: 4px;
43  padding: 16px 16px 28px 16px;
44  margin-bottom: 20px;
45}
46
47.card_pic {
48  margin-bottom: 26px;
49  width: 100%;
50  height: 161px;
51  background: url(/img/card-img.svg);
52  background-size: cover;
53}
54
55.text h1 {
56  padding: 0;
57  text-align: left;
58  font-size: 20px;
59  line-height: 24px;
60  font-family: Yu Gothic;
61  font-weight: bold;
62  color: #6F7579;
63  margin-bottom: 20px;
64}
65
66.text p {
67  font-size: 16px;
68  line-height: 24px;
69  font-family: Yu Gothic;
70  font-weight: bold;
71  color: #6F7579;
72  margin-top: 0;
73  margin-bottom: 0;
74}
75
76/* News */
77section.news {
78  height: 668px;
79  background-color: #fff;
80}
81
82.title {
83 text-align: center;
84  margin: 0 auto;
85  padding-top: 68px;
86  padding-bottom: 44.43px;
87  font-size: 60px;
88  line-height: 96px;
89  font-family: Yu Gothic;
90  font-weight: bold;
91  color: #333333;
92}
93
94hr {
95  text-align: center;
96  border: solid 5px #3F51B5;
97  width: 76px;
98  margin-top:0 ;
99  margin-bottom: 68.57px;
100}
101
102.news-item {
103  margin-left: 310px;
104  margin-bottom: 20px;
105  height: 46.5px;
106  width: 838px;
107  border-bottom: solid 1px #333333;
108}
109
110.date {
111  text-align: left;
112  font-size: 16px;
113  line-height: 26px;
114  font-family: Yu Gothic;
115  color: #333333;
116}
117
118.label {
119  width: 100px;
120  height: 30px;
121  margin-left: 30px;
122  background-color: #666666;
123  border-radius: 6px;
124}
125
126.label p {
127  color: #fff;
128  margin: 0;
129  text-align: center;
130  padding-top: 4px;
131  font-size: 16px;
132  line-height: 24px;
133  font-family: Yu Gothic;
134  font-weight: bold;
135}
136
137.newstext {
138  margin-left: 30px;
139  color: #333333;
140  text-align: left;
141  font-size: 16px;
142  line-height: 26px;
143  font-family: Yu Gothic;
144  margin-bottom: 20px;
145}
146
147/* ----------- ウィンドウ幅が380px以下の場合に適用 ----------- */
148@media screen and (max-width: 375px) {
149
150body {
151  width: 100%;
152  z-index: 0;
153  position: relative;
154}
155
156/* Card */
157section.card {
158  height: 2500px;
159}
160
161.card_inner h1 {
162  text-align: center;
163  padding-top: 50px;
164  padding-bottom: 25px;
165  font-size: 40px;
166  line-height: 50px;
167}
168
169hr {
170  border: solid 2px #3F51B5;
171  width: 40px;
172  margin-bottom: 55px;
173}
174
175.card-item {
176  width: 310px;
177  height: 311px;
178  background-color: #fff;
179  border-radius: 4px;
180  padding: 16px 16px 28px 16px;
181  margin-right: 16.5px;
182  margin-left: 16.5px;
183  margin-bottom: 20px;
184}
185
186.text h1 {
187  padding: 0;
188  text-align: left;
189  font-size: 20px;
190  line-height: 24px;
191  font-family: Yu Gothic;
192  font-weight: bold;
193  color: #6F7579;
194  margin-bottom: 20px;
195}
196
197.text p {
198  font-size: 16px;
199  line-height: 24px;
200  font-family: Yu Gothic;
201  font-weight: bold;
202  color: #6F7579;
203  margin-top: 0;
204  margin-bottom: 0;
205}
206
207/* News */
208section.news {
209  height: 1200px;
210}
211
212.title {
213text-align: center;
214padding-top: 50px;
215padding-bottom: 25px;
216font-size: 40px;
217line-height: 50px;
218}
219
220hr {
221border: solid 2px #3F51B5;
222width: 40px;
223margin-bottom: 55px;
224}
225
226.news-item {
227  margin-left: 16.5px;
228  margin-right: 16.5px;
229  margin-bottom: 20px;
230  height: 150px;
231  width: 342px;
232  padding-bottom: 15px;
233  border-bottom: solid 1px #333333;
234}
235
236.date {
237  text-align: left;
238  font-size: 16px;
239  margin-bottom: 10px;
240  line-height: 26px;
241  font-family: Yu Gothic;
242  color: #333333;
243}
244
245.label {
246  margin-left: 0;
247  margin-bottom: 10px;
248  width: 100px;
249  height: 30px;
250  background-color: #666666;
251  border-radius: 6px;
252}
253
254.label p {
255  color: #fff;
256  margin: 0;
257  text-align: center;
258  padding-top: 4px;
259  font-size: 16px;
260  line-height: 24px;
261  font-family: Yu Gothic;
262  font-weight: bold;
263}
264
265.newstext {
266  color: #333333;
267  margin-left: 0;
268  text-align: left;
269  font-size: 16px;
270  line-height: 26px;
271  font-family: Yu Gothic;
272  margin-bottom: 0px;
273  display: flex;
274  align-items: center;
275  word-wrap: break-word;
276}
277
278}
279
280
281
282/* ----------- ウィンドウ幅が376px～768px以上の場合に適用 ----------- */
283@media screen and (min-width:376px) and (max-width:768px) {
284
285/* Card */
286section.card {
287  padding: 0 25px;
288  height: 1550px;
289}
290
291.card-items {
292  display: flex;
293  flex-wrap: wrap;
294  justify-content: space-between;
295}
296
297/* News */
298section.news {
299  height: 1200px;
300}
301
302.news-item {
303  margin-left: 60px;
304  margin-bottom: 20px;
305  height: 120px;
306  width: 650px;
307  padding-bottom: 15px;
308  border-bottom: solid 1px #333333;
309}
310
311.date {
312  text-align: left;
313  font-size: 16px;
314  margin-bottom: 10px;
315  line-height: 26px;
316  font-family: Yu Gothic;
317  color: #333333;
318}
319
320.label {
321  margin-left: 0;
322  margin-bottom: 10px;
323  width: 100px;
324  height: 30px;
325  background-color: #666666;
326  border-radius: 6px;
327}
328
329.label p {
330  color: #fff;
331  margin: 0;
332  text-align: center;
333  padding-top: 4px;
334  font-size: 16px;
335  line-height: 18px;
336  font-family: Yu Gothic;
337  font-weight: bold;
338}
339
340.newstext {
341  color: #333333;
342  margin-left: 0;
343  text-align: left;
344  font-size: 16px;
345  line-height: 26px;
346  font-family: Yu Gothic;
347  margin-bottom: 0px;
348  display: flex;
349  align-items: center;
350}
351
352
353}
354
355/* ----------- ウィンドウ幅が769px以上の場合に適用 ----------- */
356@media screen and (min-width: 769px) {
357
358.card_inner {
359  width: 1086px;
360  margin: 0 auto;
361}
362
363.card-items {
364  display: flex;
365  flex-wrap: wrap;
366  justify-content: space-between;
367}
368
369.news-item {
370  display: flex;
371}
372
373.date {
374  flex: 12%;
375}
376
377.label {
378  flex: 12%;
379}
380
381.newstext {
382  display: flex;
383  flex: 76%;
384  align-items: center;
385}
386
387}

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

回答2件

CSSを見るとブレークポイントが375px, 768pxに設定されているようです。

375px以下（スマホサイズ？）
375px～768px（タブレットサイズ？）
768px以上(PCサイズ？）

というつもりだと思いますか、まずはそれが最適かどう検討する必要がありそうです。

「レスポンシブブレークポイント」辺りをキーワードに検索するといろいろ解説ページが
見つかりますので、それを参考に検討してみてください。
例えば、下記サイト。
レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ

次に、それぞれのサイズでどのようなレイアウトにするかを決めましょう。
例えば、質問の内容なら、

PCサイズ
Cardは3カラム
Newsは1カラム

タブレットサイズ
Cardは2カラム
Newsは1カラム

スマホサイズ
Cardは1カラム
Newsは1カラム

というレうアウトにするとか。

あと、各アイテムの幅ですが、
pxで固定にする場合と、%で可変にする場合があります。
pxで固定の場合は、ブレークポイント毎に変更する必要はあります。
%の場合もカラム数に応じて変更するといいでしょう。

あと、アウターブロックの高さをheightで指定して固定にしてますが、これはやめましょう。
仮面幅の変化に応じてカラム数が変化したり、折り返しが発生するので内容の高さも変化します。
にも拘わらす固定していては、はみ出した部分が見切れたりレイアウトが崩れたりします。

投稿2019/11/04 08:57

hatena19

総合スコア34073

js_boy

2019/11/04 11:27

hatena19様ご回答ありがとうございます。今回はレスポンシブのブレイクポイントとそれぞれのサイズのレイアウトを決めて、それぞれ作成できたのですが、PCブラウザを縮小していったときにうまくレイアウトが整わないという悩みでした。この場合、pxではなく%を使った方が良いですね...。ありがとうございました！

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

ベストアンサー

どこがどう崩れるのかわからないと的確な回答はできませんが一般的に絶対値でheightやmargin,padding(この2つは小さければ大丈夫)を設定すると必ずと言っていいほどレイアウトが崩れます。

投稿2019/11/04 01:33

kyoya0819

総合スコア10429

kyoya0819

2019/11/04 01:34

絶対値とはpxとかのことです。

js_boy

2019/11/04 02:41

asuchi0819様ご回答ありがとうございます。 height, margin, paddingの絶対値を確認してみます。ありがとうございました！

H40831

2019/11/04 03:16

いまいち理解しきれてないご様子なので補足ですが、言いたいことは絶対値の見直しではなく、相対値を使用しましょうという事です。つまり単位を変えましょうという事です。 px 以外にもいろんな単位があるのですよ。参考リンク貼っときますが、ググればいくらでもでてくるので、わかりづらければ別の解説サイトも参考にしてみてください。 https://www.webprofessional.jp/a-walkthrough-of-css-length-units-you-can-use-for-font-size/

kyoya0819

2019/11/04 04:35

H40831さん > 補足ありがとうございます。質問者さん > この場合だったら%かvwあたりで作るのが王道な気がします。

js_boy

2019/11/04 11:22

H40831様、asuchi0819様こういう場合は絶対値ではなく相対値である%やvwを使わなくてはいけなかったのですね...。今までずっとpxしか使っていませんでした...。相対値でやり直してみます。ご回答ありがとうございます！！

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

あなたの回答