

どのようにすれば、ブラウザの幅を変えても1枚目の状態で維持できるようになるのでしょうか？

[![ブラウザ最大化の状態](https://i.stack.imgur.com/pKTuC.jpg)](https://i.stack.imgur.com/pKTuC.jpg)

[![ブラウザの幅を変えると切り替わってしまう状態](https://i.stack.imgur.com/idaho.jpg)](https://i.stack.imgur.com/idaho.jpg)

html

[code]

    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link rel="stylesheet" href="../../tools/style/reset.css" />
        <link rel="stylesheet" href="./assets/stylesheets/style.css" />
        <title>pc-site</title>
      </head>
      <body>
        <div class="l-wrapper">
          <header class="l-header">
            <img class="l-header__logo" src="./assets/images/logo.png" alt="ロゴ">
            <nav>
              <ul class="p-nav__menu">
                <li class="p-nav__list">
                  <a href="" class="p-nav__button">home</a>
                </li>
                <li class="p-nav__list">
                  <a href="" class="p-nav__button">about</a>
                </li>
                <li class="p-nav__list">
                  <a href="" class="p-nav__button">access</a>
                </li>
                <li class="p-nav__list">
                  <a href="" class="p-nav__button">contact</a>
                </li>
              </ul>
            </nav>
          </header>
          <div class="c-hero"></div>
          <main class="l-main">
            <h1 class="l-main__title">PC カリキュラム</h1>
            <div class="l-contents">
              <section class="p-gallery">
                <h2 class="p-gallery__tilte">最新の作品</h2>
                <ul class="p-gallery__menu">
                  <li class="p-gallery__list">
                    <img class="p-gallery__photo" src="./assets/images/production_01.jpg" alt="夕焼けと海">
                  </li>
                  <li class="p-gallery__list">
                    <img class="p-gallery__photo" src="./assets/images/production_02.jpg" alt="砂浜と貝殻">
                  </li>
                  <li class="p-gallery__list">
                    <img class="p-gallery__photo" src="./assets/images/production_03.jpg" alt="砂浜とドリンク">
                  </li>
                  <li class="p-gallery__list">
                    <img class="p-gallery__photo" src="./assets/images/production_04.jpg" alt="桟橋">
                  </li>
                  <li class="p-gallery__list">
                    <img class="p-gallery__photo" src="./assets/images/production_05.jpg" alt="小船">
                  </li>
                  <li class="p-gallery__list">
                    <img class="p-gallery__photo" src="./assets/images/production_06.jpg" alt="夕日の空">
                  </li>
                </ul>
              </section>
              <section class="p-selfintroduction">
                <h2 class="p-selfintroduction__title">自己紹介</h2>
                <p class="p-selfintroduction__text">
                  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
                </p>
              </section>
            </div>
          </main>
          <footer class="l-fotter">
            <div class="c-copyright">
              <div class="c-copyright__inner">
                <p class="c-copyright__text">
                  <small>© 2019 example.inc</small>
                </p>
              </div>
            </div>
          </footer>
        </div>
      </body>
    </html>
    
[/code]

css

[code]

    @charset "UTF-8";
    
    .l-wrapper {
        background-color: #fffaf0;
    }
    
    .l-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .l-header__logo {
        width: 90px;
        height: 90px;
        padding: 10px;
    }
    
    .p-nav__menu {
        display: flex;
    }
    
    .p-nav__list {
        margin-right: 40px;
    }
    
    .p-nav__button {
        font-size: 150%;
        text-decoration: none;
    }
    
    .c-hero {
        height: 1000px;
        background-image:url(../images/hero.jpg);
        background-repeat:  no-repeat;
        background-size: cover;
    }
    
    .l-main__title {
        display: flex;
        justify-content: center;
        padding: 130px 0px 130px 0px;
        color: #808080;
        font-size: 250%;
    }
    
    .p-gallery {
        color: #808080;
        font-size: 200%;
    }
    
    .l-contents {
        display: flex;
        padding-left: 60px;
    }
    
    .p-gallery__tilte {
        margin-bottom: 15px;
        padding: 2px 0px 0px 20px;
        border-left: solid 8px #ff69b4;
        background: transparent;
        color: #808080;
        font-size: 90%;
    }
    
    .p-gallery__menu {
        display: flex;
        flex-wrap: wrap;
    }
    
    .p-gallery__photo {
        width: 350px;
        height: 250px;
        margin: 15px 60px 0px 0px;
    }
    
      .p-gallery {
        width: 400%;
      }
    
      .p-selfintroduction {
        padding-right: 70px;
      }
    
      .p-selfintroduction__title {
        margin-bottom: 30px;
        padding: 2px 0px 0px 20px;
        border-left: solid 8px #ff69b4;
        background: transparent;
        color: #808080;
        font-size: 190%;
      }
    
      .p-selfintroduction__text {
        color: #808080;
        font-size: 150%;
        line-height:35px;
      }
    
      .c-copyright__inner {
        display: flex;
        justify-content: center;
        padding: 100px 0px 100px 0px;
      }
    
      .c-copyright__text {
        padding: 30px 50px;
        border: solid 2px white;
        background: #6495ED;
        color: #fff;
        font-size: 150%;
        box-shadow: 0px 0px 0px 10px #6495ED;
      }
    
[/code]


CC BY-SA 4.0
2021-07-12T16:03:05.427
78139
2021-07-15T16:52:43.390
47274
question
html css
ブラウザの幅を変えると要素の位置が変わってしまうのを直したいです。


単純に「横3列縦2行」の画像表示を維持したいのであれば、フレックスボックス`ul.gallery__menu`
のフレックスアイテムで、`img`の親要素である`li`のサイズを割合で調整してあげるだけで済むでしょう。また、`img`要素自体のサイズは親要素に対して100%にすれば自動的に伸縮します。

[code]

    .p-gallery__list{
    /*   追加 */
      flex-basis: 30%;
    }
    .p-gallery__photo {
    /*   widthは親要素にfitさせる */
      width: 100%;
    }
    
[/code]

`flex-basis`の値は取りたい余白に応じて調整してください。

スニペットも置いておきます（HTML側にリンク切れにならない画像とリセットcssの追加を実施。またcssの追加箇所はコメントを記載しているので参考に。）  

[code]

    @charset "UTF-8";
    
    /* reset css*/
    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    /* end of reset css */
    
    .l-wrapper {
        background-color: #fffaf0;
    }
    
    .l-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .l-header__logo {
        width: 90px;
        height: 90px;
        padding: 10px;
    }
    
    .p-nav__menu {
        display: flex;
    }
    
    .p-nav__list {
        margin-right: 40px;
    }
    
    .p-nav__button {
        font-size: 150%;
        text-decoration: none;
    }
    
    .c-hero {
        height: 1000px;
        background-image:url(../images/hero.jpg);
        background-repeat:  no-repeat;
        background-size: cover;
    }
    
    .l-main__title {
        display: flex;
        justify-content: center;
        padding: 130px 0px 130px 0px;
        color: #808080;
        font-size: 250%;
    }
    
    .p-gallery {
        color: #808080;
        font-size: 200%;
      margin-right: 2rem;
    }
    
    .l-contents {
        display: flex;
        padding-left: 60px;
    }
    
    .p-gallery__tilte {
        margin-bottom: 15px;
        padding: 2px 0px 0px 20px;
        border-left: solid 8px #ff69b4;
        background: transparent;
        color: #808080;
        font-size: 90%;
    }
    
    .p-gallery__menu {
        display: flex;
        flex-wrap: wrap;
    /*   追加 */
      justify-content: space-between;
    }
    
    .p-gallery__list{
    /*   追加 */
      flex-basis: 30%;
      list-style: none;
    }
    
    .p-gallery__photo {
    /*   widthは親要素にfitさせる */
      width: 100%;
    /*   ピクセル指定はしない */
    /*     width: 350px; */
    /*     height: 250px; */
    /*   marginは縦方向のみ有効 */
        margin: 15px 0px;
    }
    
      .p-gallery {
        width: 400%;
      }
    
      .p-selfintroduction {
        padding-right: 70px;
      }
    
      .p-selfintroduction__title {
        margin-bottom: 30px;
        padding: 2px 0px 0px 20px;
        border-left: solid 8px #ff69b4;
        background: transparent;
        color: #808080;
        font-size: 190%;
      }
    
      .p-selfintroduction__text {
        color: #808080;
        font-size: 150%;
        line-height:35px;
      }
    
      .c-copyright__inner {
        display: flex;
        justify-content: center;
        padding: 100px 0px 100px 0px;
      }
    
      .c-copyright__text {
        padding: 30px 50px;
        border: solid 2px white;
        background: #6495ED;
        color: #fff;
        font-size: 150%;
        box-shadow: 0px 0px 0px 10px #6495ED;
      }
[/code]

[code]

    <div class="l-wrapper">
      <header class="l-header">
        <img class="l-header__logo" src="https://imgur.com/JjB4HTS.png" alt="ロゴ">
        <nav>
          <ul class="p-nav__menu">
            <li class="p-nav__list">
              <a href="" class="p-nav__button">home</a>
            </li>
            <li class="p-nav__list">
              <a href="" class="p-nav__button">about</a>
            </li>
            <li class="p-nav__list">
              <a href="" class="p-nav__button">access</a>
            </li>
            <li class="p-nav__list">
              <a href="" class="p-nav__button">contact</a>
            </li>
          </ul>
        </nav>
      </header>
      <div class="c-hero"></div>
      <main class="l-main">
        <h1 class="l-main__title">PC カリキュラム</h1>
        <div class="l-contents">
          <section class="p-gallery">
            <h2 class="p-gallery__tilte">最新の作品</h2>
            <ul class="p-gallery__menu">
              <li class="p-gallery__list">
                <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="夕焼けと海">
              </li>
              <li class="p-gallery__list">
                <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="砂浜と貝殻">
              </li>
              <li class="p-gallery__list">
                <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="砂浜とドリンク">
              </li>
              <li class="p-gallery__list">
                <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="桟橋">
              </li>
              <li class="p-gallery__list">
                <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="小船">
              </li>
              <li class="p-gallery__list">
                <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="夕日の空">
              </li>
            </ul>
          </section>
          <section class="p-selfintroduction">
            <h2 class="p-selfintroduction__title">自己紹介</h2>
            <p class="p-selfintroduction__text">
              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
            </p>
          </section>
        </div>
      </main>
      <footer class="l-fotter">
        <div class="c-copyright">
          <div class="c-copyright__inner">
            <p class="c-copyright__text">
              <small>© 2019 example.inc</small>
            </p>
          </div>
        </div>
      </footer>
    </div>
[/code]


CC BY-SA 4.0
2021-07-15T16:52:43.390
78213
2021-07-15T16:52:43.390
46944
78139
answer