1

PC用デザインでは、一番上に写真が左、メッセージと人物アイコンが右に配置、二番目に写真が右で左がメッセージと人物アイコンが右、三番目に写真が左、メッセージと人物アイコンが右に配置されるようなデザインにしました。そのあと本画像のような上が写真でメッセージと人物アイコンが下になるようにスマホ対応画面にしたいと思っています。どうしたら画像のような画面を再現できるでしょうか?

またデベロッパーツールで見るとスマホ画面にした時に、富士山の画像が大きいせいか横にはみ出しスクロールします。できれば富士山の画像は、100%横に配置したまま下にチャット風メッセージとアイコンを挿入したいと思っています。

.inner要素にdisplay:flex、flex-direction:column;などを試してみましたが画像のような配置になりませんでした。

HTML

<div class="inner">

    <div class="box">
      <div class="box__body">
        <div class="box1">
          <img src="images/person.png" class="person">
        </div>
        <div class="arrow_box">奇麗ですね</div>
      </div>
      <figure class="box__image">
        <img src="" width="450px" height="80px" class="img" alt="">
      </figure>
    </div>
  <div class="box">
      <div class="box__body">
        <div class="box1">
          <img src="images/person.png" class="person">
        </div>
        <div class="arrow_box">奇麗ですね</div>
      </div>
      <figure class="box__image">
        <img src="" width="450px" height="80px" class="img" alt="">
      </figure>
    </div>
    <div class="box">
      <div class="box__body">
        <div class="box1">
          <img src="images/person.png" class="person">
        </div>
        <div class='arrow_box'>奇麗ですね</div>
      </div>
      <figure class="box__image">
        <img src="" width="450px" height="80px" class="img" alt="">
      </figure>
    </div>

CSS

    /*CSS開始*/
    @media all and (max-width: 768px) {
    .box {
    display: block;
    }
    .box + .box{
    margin-top: 60px;
    }
    .box__body{
    width: 100%;
    padding: 0;
   }
   .box__image{
    margin-top: 20px;
    width: 100%;
   }
  
   .img{
    max-width: 100%;
   }
  
   .person{
    width:120px;
   }
   .person2{
    width:120px;
   }
   }
1
  • 「PC用デザインでは、一番上に写真が左、メッセージと人物アイコンが右に配置、二番目に写真が右で左がメッセージと人物アイコンが右、三番目に写真が左、メッセージと人物アイコンが右に配置されるようなデザイン」というのが、視覚的にイメージしにくいので、画像で表現するとより伝わりやすくなると思います。 Commented 5月6日 0:02

1 件の回答 1

1

デバイスによって Web ページのレイアウトを動的に変える場合、Bootstrap の利用が便利です。

Bootstrap では、各項目を規則的にレイアウトする場合には、グリッドシステムを使用します。
クラス名に、row, col を指定し、行、列を定義していきます。

今回のように特定の行を逆順にレイアウトしたい場合は、row に flex-row-reverse を指定します。

さらに、ブレイクポイントを sm (幅: 576px が閾値) に設定し、画面の幅が小さくなったらレイアウトを解除するようにします。

以下、これらを組み込んだ HTML となります。

<div class="container my-5">
  <div class="row">
    <div class="col-sm"><img class="img-fluid" src="風景001.jpg" /></div>
    <div class="col-sm"><span class="border border-primary">最近あったかくなってきましたね。</span><img width="70" src="人物001.png" /></div>
  </div>
  <div class="row flex-row-reverse">
    <div class="col-sm"><img class="img-fluid" src="風景002.jpg" /></div>
    <div class="col-sm"><span class="border border-primary">そうですね。</span><img width="70" src="人物002.png" /></div>
  </div>
  <div class="row">
    <div class="col-sm"><img class="img-fluid" src="風景003.jpg" /></div>
    <div class="col-sm"><span class="border border-primary">運動しなくちゃ。</span><img width="70" src="人物001.png" /></div>
  </div>
</div>

PC での実行画面は以下です。
flex-row-reverse を設定した 2 行目の項目について、HTML 上の定義と逆順にレンダリングされていることが分かります。
PC での実行画面

モバイルでの実行画面は以下です。
グリッドでの表示が解除されて、かつ順番にレンダリングされています。
モバイルでの実行画面

サンプルで使用した各画像は、以下からお借り致しました。

Bootstrap をすぐに始めるには以下が参考になります。

2
  • できるだけbootstrapなどのツールは、使用しないでやりたいのですがどうしたらいいでしょうか? Commented 6月8日 5:14
  • css のメディアクエリーと flex-direction: row-reverse を使うことで同様のことができます。メディアクエリーは既に使われてますね。ちなみに、bootstrap を使いたくない理由は何でしょうか?参考までにお教えいただければ嬉しいです。 Commented 6月8日 14:53

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。