CSS

flexboxを使って画像とテキストを横に並べてレスポンシブにしたい

ここではタイトルの通り、flexboxを使って画像とテキストを2列に横並びに表示させて、かつスマホで表示させたときは画像とテキストを1列にする方法について見ていきます。

flexboxについて知らない方は、下記の記事を見ておくと理解がスムーズだと思います。

はじめに完成したサンプルをご覧ください。

ボタンで表示を切り替えてご覧ください。

See the Pen flexbox_responsive by kenichi (@ken81) on CodePen.

HTML

<div class="flex">
  <div class="item">
    <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img04.png">
  </div>
  <div class="item">
    <p>flexboxを使って600pxまでは2列表示にして、599px以下になるとflexboxが解除されて1列表示になります。</p>
    <p>画像をdisplay:block;で中央寄せさせたり、少し調整が必要になります。</p>
  </div>
</div>

CSS

.flex{
  max-width: 600px;
  margin: 0 auto;
}
img{
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
@media screen and (min-width:600px) {  
  .flex{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
  }
  .item+.item{
    margin-left:1.0em;
  }
}

これだとレスポンシブの感じが分からないので、コチラのサンプルを開いてでブラウザのサイズを変えて見てみてください。

コードの解説

HTML

<div class="flex">
  <div class="item">
    <img src="https://cotodama.co/wp-content/uploads/2018/09/css_mouseover_img04.png">
  </div>
  <div class="item">
    <p>flexboxを使って600pxまでは2列表示にして、599px以下になるとflexboxが解除されて1列表示になります。</p>
    <p>画像をdisplay:block;で中央寄せさせたり、少し調整が必要になります。</p>
  </div>
</div>

はじめにHTMLのコードを見てみましょう。

2つのclass名itemがclass名flexでラップしてあります。今回は、.flexdisplay:flex;を適用させてて、子要素である.itemをflexアイテムとして使います。

2つの.itemにはそれぞれ、画像とテキストが入っています。HTMLの構成はこんなところです。

CSS

次にスタイルシートを見てみます。
CSS

.flex{
  max-width: 600px;
  margin: 0 auto;
}
img{
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
@media screen and (min-width:600px) { 
  .flex{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
  }
  .item+.item{
    margin-left:1.0em;
  }
}

メディアクエリ@media screen and (min-width:600px)を使ってブラウザの幅が600pxのところまでは、display:flex;が有効になるように指定して、599px以下になったときに無効(つまり1列)になるように指定しています。基本的な仕組みとしてはこれだけです。

あとは、画像の表示サイズや余白の調整をしているだけですので、それぞれの画像にあった調整をしてみると良いでしょう。

以上がflexboxを使って画像とテキストを横に並びレスポンシブにする方法でした。

最近の記事

  1. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  2. CSS

    CSS|中央寄せが効かないときは・・・
  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP