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

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

ただいまの
回答率

87.49%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,270

score 9

前提・実現したいこと

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

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

該当のソースコード

<body>
 <div id="wrapper">

<section class="card">
  <div class="card_inner">
  <h1>Card</h1>
  <hr>
  <div class="card-items">
    <div class="card-item">
      <div class="card_pic"></div>
      <div class="text">
        <h1>タイトルタイトル</h1>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
    <div class="card-item">
      <div class="card_pic"></div>
      <div class="text">
        <h1>タイトルタイトル</h1>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
    <div class="card-item">
      <div class="card_pic"></div>
      <div class="text">
        <h1>タイトルタイトル</h1>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
    <div class="card-item">
      <div class="card_pic"></div>
      <div class="text">
        <h1>タイトルタイトル</h1>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
    <div class="card-item">
      <div class="card_pic"></div>
      <div class="text">
        <h1>タイトルタイトル</h1>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
    <div class="card-item">
      <div class="card_pic"></div>
      <div class="text">
        <h1>タイトルタイトル</h1>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
  </div>
  </div>
</section>

<section class="news">
  <h1 class="title">News</h1>
  <hr>
  <div class="news-items">
    <div class="news-item">
      <div class="date">2019-01-30</div>
      <div class="label"><p>ラベル1</p></div>
      <div class="newstext">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</div>
    </div>
    <div class="news-item">
      <div class="date">2019-01-30</div>
      <div class="label"><p>ラベル1</p></div>
      <div class="newstext">ニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュースニュース</div>
    </div>
    <div class="news-item">
      <div class="date">2019-01-30</div>
      <div class="label"><p>ラベル1</p></div>
      <div class="newstext">ニュースニュースニュースニュースニュースニュースニュースニュースニュース</div>
    </div>
  </div>
</section>

</div>

</body>
body {
  margin: 0px;
  padding: 0px;
}

#wrapper {
  width: 100%;
  overflow:hidden;
}

/* Card */

section.card {
  height: 1125px;
  background-color: #EFEFEF;
}

.card_inner h1 {
  text-align: center;
  margin: 0 auto;
  padding-top: 68px;
  padding-bottom: 44.43px;
  font-size: 60px;
  line-height: 96px;
  font-family: Yu Gothic;
  font-weight: bold;
  color: #333333;
}

hr {
  text-align: center;
  border: solid 5px #3F51B5;
  width: 76px;
  margin-top:0 ;
  margin-bottom: 68.57px;
}

.card-item {
  width: 310px;
  height: 311px;
  background-color: #fff;
  border-radius: 4px;
  padding: 16px 16px 28px 16px;
  margin-bottom: 20px;
}

.card_pic {
  margin-bottom: 26px;
  width: 100%;
  height: 161px;
  background: url(/img/card-img.svg);
  background-size: cover;
}

.text h1 {
  padding: 0;
  text-align: left;
  font-size: 20px;
  line-height: 24px;
  font-family: Yu Gothic;
  font-weight: bold;
  color: #6F7579;
  margin-bottom: 20px;
}

.text p {
  font-size: 16px;
  line-height: 24px;
  font-family: Yu Gothic;
  font-weight: bold;
  color: #6F7579;
  margin-top: 0;
  margin-bottom: 0;
}

/* News */
section.news {
  height: 668px;
  background-color: #fff;
}

.title {
 text-align: center;
  margin: 0 auto;
  padding-top: 68px;
  padding-bottom: 44.43px;
  font-size: 60px;
  line-height: 96px;
  font-family: Yu Gothic;
  font-weight: bold;
  color: #333333;
}

hr {
  text-align: center;
  border: solid 5px #3F51B5;
  width: 76px;
  margin-top:0 ;
  margin-bottom: 68.57px;
}

.news-item {
  margin-left: 310px;
  margin-bottom: 20px;
  height: 46.5px;
  width: 838px;
  border-bottom: solid 1px #333333;
}

.date {
  text-align: left;
  font-size: 16px;
  line-height: 26px;
  font-family: Yu Gothic;
  color: #333333;
}

.label {
  width: 100px;
  height: 30px;
  margin-left: 30px;
  background-color: #666666;
  border-radius: 6px;
}

.label p {
  color: #fff;
  margin: 0;
  text-align: center;
  padding-top: 4px;
  font-size: 16px;
  line-height: 24px;
  font-family: Yu Gothic;
  font-weight: bold;
}

.newstext {
  margin-left: 30px;
  color: #333333;
  text-align: left;
  font-size: 16px;
  line-height: 26px;
  font-family: Yu Gothic;
  margin-bottom: 20px;
}

/* ----------- ウィンドウ幅が380px以下の場合に適用 ----------- */
@media screen and (max-width: 375px) {

body {
  width: 100%;
  z-index: 0;
  position: relative;
}

/* Card */
section.card {
  height: 2500px;
}

.card_inner h1 {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 25px;
  font-size: 40px;
  line-height: 50px;
}

hr {
  border: solid 2px #3F51B5;
  width: 40px;
  margin-bottom: 55px;
}

.card-item {
  width: 310px;
  height: 311px;
  background-color: #fff;
  border-radius: 4px;
  padding: 16px 16px 28px 16px;
  margin-right: 16.5px;
  margin-left: 16.5px;
  margin-bottom: 20px;
}

.text h1 {
  padding: 0;
  text-align: left;
  font-size: 20px;
  line-height: 24px;
  font-family: Yu Gothic;
  font-weight: bold;
  color: #6F7579;
  margin-bottom: 20px;
}

.text p {
  font-size: 16px;
  line-height: 24px;
  font-family: Yu Gothic;
  font-weight: bold;
  color: #6F7579;
  margin-top: 0;
  margin-bottom: 0;
}

/* News */
section.news {
  height: 1200px;
}

.title {
text-align: center;
padding-top: 50px;
padding-bottom: 25px;
font-size: 40px;
line-height: 50px;
}

hr {
border: solid 2px #3F51B5;
width: 40px;
margin-bottom: 55px;
}

.news-item {
  margin-left: 16.5px;
  margin-right: 16.5px;
  margin-bottom: 20px;
  height: 150px;
  width: 342px;
  padding-bottom: 15px;
  border-bottom: solid 1px #333333;
}

.date {
  text-align: left;
  font-size: 16px;
  margin-bottom: 10px;
  line-height: 26px;
  font-family: Yu Gothic;
  color: #333333;
}

.label {
  margin-left: 0;
  margin-bottom: 10px;
  width: 100px;
  height: 30px;
  background-color: #666666;
  border-radius: 6px;
}

.label p {
  color: #fff;
  margin: 0;
  text-align: center;
  padding-top: 4px;
  font-size: 16px;
  line-height: 24px;
  font-family: Yu Gothic;
  font-weight: bold;
}

.newstext {
  color: #333333;
  margin-left: 0;
  text-align: left;
  font-size: 16px;
  line-height: 26px;
  font-family: Yu Gothic;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  word-wrap: break-word;
}

}



/* ----------- ウィンドウ幅が376px~768px以上の場合に適用 ----------- */
@media screen and (min-width:376px) and (max-width:768px) {

/* Card */
section.card {
  padding: 0 25px;
  height: 1550px;
}

.card-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* News */
section.news {
  height: 1200px;
}

.news-item {
  margin-left: 60px;
  margin-bottom: 20px;
  height: 120px;
  width: 650px;
  padding-bottom: 15px;
  border-bottom: solid 1px #333333;
}

.date {
  text-align: left;
  font-size: 16px;
  margin-bottom: 10px;
  line-height: 26px;
  font-family: Yu Gothic;
  color: #333333;
}

.label {
  margin-left: 0;
  margin-bottom: 10px;
  width: 100px;
  height: 30px;
  background-color: #666666;
  border-radius: 6px;
}

.label p {
  color: #fff;
  margin: 0;
  text-align: center;
  padding-top: 4px;
  font-size: 16px;
  line-height: 18px;
  font-family: Yu Gothic;
  font-weight: bold;
}

.newstext {
  color: #333333;
  margin-left: 0;
  text-align: left;
  font-size: 16px;
  line-height: 26px;
  font-family: Yu Gothic;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
}


}

/* ----------- ウィンドウ幅が769px以上の場合に適用 ----------- */
@media screen and (min-width: 769px) {

.card_inner {
  width: 1086px;
  margin: 0 auto;
}

.card-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.news-item {
  display: flex;
}

.date {
  flex: 12%;
}

.label {
  flex: 12%;
}

.newstext {
  display: flex;
  flex: 76%;
  align-items: center;
}

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

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 20:27

    hatena19様

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

    キャンセル

checkベストアンサー

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/04 12:16

    いまいち理解しきれてないご様子なので補足ですが、
    言いたいことは絶対値の見直しではなく、相対値を使用しましょうという事です。
    つまり単位を変えましょうという事です。

    px 以外にもいろんな単位があるのですよ。
    参考リンク貼っときますが、ググればいくらでもでてくるので、わかりづらければ別の解説サイトも参考にしてみてください。

    https://www.webprofessional.jp/a-walkthrough-of-css-length-units-you-can-use-for-font-size/

    キャンセル

  • 2019/11/04 13:35

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

    キャンセル

  • 2019/11/04 20:22

    H40831様、asuchi0819様

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

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

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