レスポンシブデザイン

Question

<やりたいこと>

• @media (min-width: ;)を用いて320-992pxの時、

　1. middle-sectionを縦６つ
2. bottom-sectionを縦4つ
にレイアウトしたい。

<分からないこと>
メディアクエリでFlexboxを用いたレイアウト

<用件>

• ブレークポイントは以下の5つを設定。(最小設定は320px)

xs: 480px未満
sm: 480px以上768px未満
md: 768px以上992px未満
lg: 992px以上1100px未満
xl: 1100px以上

Middle section

   <!-- middle section start -->
    <section class="middle-section-wrapper">
      <div class="full-width-container">
        <div class="row middle-columns">
          <div class="bg-shose column-4">
          </div>
          <div class="column-4">
            <div class="middle-column-content">
              <h3>MIDDLE COLUMUN</h3>
              <h2>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
              </h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna
                aliqua.
              </p>
            </div>
          </div>
          <div class="bg-sunglasses column-4">
          </div>
        </div>
      </div>
      <div class="full-width-container">
        <div class="row middle-columns">
          <div class="column-4">
            <div class="middle-column-content">
              <h3>MIDDLE COLUMUN</h3>
              <h2>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
              </h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna
                aliqua.
              </p>
            </div>
          </div>
          <div class="bg-guy-with-cap column-4">
          </div>
          <div class="column-4">
            <div class="middle-column-content">
              <h3>MIDDLE COLUMUN</h3>
              <h2>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
              </h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna
                aliqua.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- middle section end -->

Bottom seciton

<!-- bottom section start -->
    <section class="bottom-section-wrapper">
      <div class="container">
        <div class="row">
          <div class="column-12">
            <h2 class="bottom-section-title">BOTTOM SECTION</h2>
          </div>
        </div>
        <div class="row">
          <div class="column-6">
            <img src="./images/nick-karvounis-261181.jpg" alt="bottom-section-img" />
          </div>
          <div class="column-6">
            <div class="bottom-section-content-wrapper">
              <h2>SECTION TITLE</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="column-6">
            <div class="bottom-section-content-wrapper">
              <h2>SECTION TITLE</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </div>
          </div>
          <div class="column-6">
            <img src="./images/kristian-egelund-476932.jpg" alt="bottom-section-img" />
          </div>
        </div>
      </div>
    </section>
    <!-- bottom section end -->

メディアクエリ部分

@media (min-width: 320px) {
  .top-main h1 {
    font-size: 40px;
  }

  .top-main h2 {
    font-size: 30px;
  }

  .top-main p {
    text-align: center;
    font-size: 15px;
    padding: 15px;
    margin: 0 auto;
  }

 ** .column-4 { /* middle-sectionを6個のコンテンツを縦６列に並べたいができない */
    display: flex;
    flex-direction: column;
  }**

}

@media (min-width: 480px) {
  .top-main h1 {
    font-size: ;
  }
}

@media (min-width: 768px) {
  .top-main h1 {
    font-size: ;
  }
}

@media (min-width: 992px) {
  .top-main h1 {
    font-size: ;
  }
}

@media (min-width: 1100px) {
  .top-main h1 {
    font-size: ;
  }
}

*質問内容が不明な場合や質問の仕方に問題がある場合はご指摘ください。

Comments

[m.ts10806]

本当にコードこれ全部必要でしょうか。
少し前の質問にも書いています。
https://teratail.com/questions/255998#reply-368668
改めて最小構成で書いてみた方が良いです。自身が把握できるだけのコード。そうすると問題が見えてきてもしかしたら自己解決できるかもしれません。

あと、アドバイスを求めるにしても、やりたいことだけしか書いて無く、何が問題・課題か分かりません（タイトルもタグにつけた単語を繰り返しただけです）

[m.ts10806]

＞何が問題・課題か分かりません
タイトルの話も含めてます。タグにある内容を改めて書いても要件にはならないです。

[Garu-san]

回答者がどの情報が必要か分からないため、念のため最大限の情報を展開しました。

やりたいことの中に問題点も含ませたつもりだったのですが言葉足らずでしたでしょうか。

[m.ts10806]

https://teratail.com/help/question-tips#questionTips3-1

Answer 1

320-992pxの時、

上記は320px以上992px未満 (= 320px以上991px以下)、と理解しました。
その前提で、「styles.css」の262行目付近、以下のような記述を追加すると実現できると思います。

/* 不要そうなので削除 */
/*
.column-4 {
  flex-basis: 33.33%;
}

.column-8 {
  flex-basis: 66.67%;
}

.column-12 {
  flex-basis: 100%;
}
*/

/* 以下、追加した記述 */
/* 320以上、992未満 */
@media (min-width: 320px) and (max-width: 991px) {
  .column-4,
  .column-6 {
    flex-basis: 100%;
  }
}

---

320pxより小さいサイズのときはPCと同じようなレイアウトになってしまいます。
もし、300pxなど小さいサイズのときも「縦6つ」「縦4つ」などにしたい場合は、メディアクエリの指定を以下のようにしてください。

/* @media (min-width: 320px) and (max-width: 991px) { */
@media (max-width: 991px) {
  .column-4,
  .column-6 {
    flex-basis: 100%;
  }
}

Comments

[Garu-san]

コメントとヒントありがとうございました。
参考にさせていただき、自分で試行錯誤した結果、実装できました！