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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2168閲覧

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

js_boy

総合スコア10

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/11/04 01:20

前提・実現したいこと

レスポンシブ対応の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>ラベル1</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>ラベル1</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>ラベル1</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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

js_boy

2019/11/04 11:27

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

0

ベストアンサー

どこがどう崩れるのかわからないと的確な回答はできませんが一般的に絶対値で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しか使っていませんでした...。 相対値でやり直してみます。 ご回答ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問