画面縮小時にデザインが崩れないようにしたい

Question

前提・実現したいこと

https://gyazo.com/5f354c7e4a30f777ea39aadfaf5efab2
https://gyazo.com/12a139f270d9b28749918f59b5eae677
https://gyazo.com/dd7b1cc0adc8b3f7936d214a9663e086

画面縮小時,段階によってデザインが変わってしまうのですが、pngで添付した2カラムの状態で縮小できるように実装したいです。

該当のソースコード

 <section class="p-about">
        <div class="c-heading">
          <h2 class="c-heading__ttl">ABOUT</h2>
          <p class="c-heading__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit est facilis maiores, perspiciatis</p>
        </div>
　　　　 <ul class="p-photoList">
          <li class="p-photoList__item"><img class="p-photoList__photo" src="./assets/images/about_01.jpg" alt="紹介写真1"/></li>
          <li class="p-photoList__item"><img class="p-photoList__photo--small" src="./assets/images/about_02.jpg" alt="紹介写真2"/></li>
          <li class="p-photoList__item"><img class="p-photoList__photo--small" src="./assets/images/about_03.jpg" alt="紹介写真3"/></li>
          <li class="p-photoList__item"><img class="p-photoList__photo" src="./assets/images/about_04.jpg" alt="紹介写真4"/></li>
        </ul>

@media screen and (max-width: 768px) {
  /* SP style */
  .p-about {
    padding: 70px 20px;
  }
  .p-photoList {
    display:block;
    margin-top: 70px;
    margin-right: auto;
    margin-left: auto;
  }

  .p-photoList__Photo {
    height: 400px;
    border-radius: 20px;
  }

  .p-photoList__Photo--small {
    height: 400px;
    border-radius: 20px;
  }

  .p-photoList__item:nth-child(-n+3){
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 769px) {
  /* PC style */
  .p-about {
    padding: 100px 0;
  }
.p-photoList {
    display: flex;
    flex-wrap: wrap;
    margin-top: 70px;
    justify-content: center;
  }

  .p-photoList__photo {
    width: 600px;
    height: 300px;
    border-radius: 20px;
  }

  .p-photoList__photo--small {
    width: 400px;
    height: 300px;
    border-radius: 20px;
  }

  .p-photoList__item:nth-child(-n+2) {
    margin-bottom: 10px;
  }

  .p-photoList__photo:first-child {
    margin-right: 30px;
  }

  .p-photoList__photo--small:last-child {
    margin-right: 30px;
  }
}

試したこと

imgのwidthを固定ではなく％にするべきだと思うのですが、％で実装すると
display: flex;
flex-wrap: wrap;　が全く効かなくなってしまいます。

HTMLでimgを書かずに、cssにbackground-imageで実装したら実現できたのですが（本来はそうすべきなのかもですが）、今のコーディングで失敗している原因を知りたいです。

Comments

[hatena19]

> レスポンシブ対応は@media screen and (min-width: 769px)で実装していて、
とのことですが、提示のCSSコードにはそのコードがないですが。その部分も提示してもらえますか。

また、レイアウトは崩れるとはどのようになるのか、また、どのようになってほしいのか説明してもらえますか。文章で難しいのなら画像をアップしてもらうと分かり安いです。

[退会済みユーザー]

ご確認ありがとうございます。
画像を追加しました。画面を縮小しても、段階的にデザインが変わるのではなく、添付したイメージのデザインを保つ用に実装したいです。お目通しいただけると大変助かります。

Answer 1

提示のコードでうまくいかないのは、

.p-photoListにflexを設定しているので、その子要素の.p-photoList__itemにwidthを%で設定すべきなのに孫要素のimgに設定しているからでしょう。
.p-photoList__itemに適切に幅を設定して、imgの幅は100%にして.p-photoList__itemの幅に合わせます。

imgをやめて背景画像にしてうまくいったのは.p-photoList__itemに幅を設定するようになったからでしょう。

あと、メディアクエリの使い方ですが、
まずは sp用のスタイルを@mediaなしに記述します。
これにはpcと共通のスタイルも含みます。

その後の
@media screen and (min-width: 769px)にはpcのみに適用するスタイルを記述します。
CSSは後に記述したスタイルは前のスタイルを上書きします。

sp用@media screen and (max-width: 768px)
pc用@media screen and (min-width: 769px)
と分けて書くと両方に共通のスタイルを重複して書く必要があるので修正するとき面倒です。
また、境界の758.1px~758.9pxのときどちらのスタイルも適用されないことになる可能性があります。

サンプルを作成しましたのでご確認ください。

CodePenサンプル

Comments

[退会済みユーザー]

コードサンプルありがとうございます！！
原因がわかってすっきりしました。
メディアクエリの使い方までチェックしてくださりありがとうございました。精進します！