【CSS】スマホで画像とテキストを縦並びに切り替えるレスポンシブ実装

スマホ画面では画像とテキストを縦並びにし、PCでは横並びにしたいというレイアウトはよくあります。たとえば商品紹介やプロフィール、記事のサムネイル付きカードなどで使う場面が多いです。今回はCSSだけで、画面幅に応じて画像とテキストの並びを切り替える基本的な実装方法を紹介します。

基本の考え方

実装のポイントは、親要素にdisplay: flex;を指定し、スマホでは縦並び、一定以上の画面幅では横並びに切り替えることです。Flexboxを使うと、要素の順番や幅を管理しやすく、レスポンシブ対応もしやすくなります。

まずはシンプルなHTMLを用意します。画像とテキストを同じブロック内に入れるだけで、構造が分かりやすくなります。

<div class="media-box">
  <div class="media-box__image">
    <img src="image.jpg" alt="サンプル画像">
  </div>
  <div class="media-box__body">
    <h3>見出しタイトル</h3>
    <p>ここに説明文が入ります。スマホでは縦に並び、PCでは横に並びます。</p>
  </div>
</div>

スマホでは縦並びにするCSS

スマホを基準に考えるなら、最初に縦並びのCSSを書いておくのが分かりやすいです。そこからメディアクエリで横並びへ切り替えると、管理しやすいコードになります。

.media-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.media-box__image img {
  width: 100%;
  height: auto;
  display: block;
}

.media-box__body h3 {
  margin: 0 0 8px;
}

.media-box__body p {
  margin: 0;
}

この時点では、画像が上、テキストが下に並びます。gapを使うと、要素同士の間隔を余計な余白調整なしで統一できるので便利です。

画面が広いときに横並びへ切り替える

次に、一定以上の幅になったら横並びにします。たとえば768px以上で切り替えるなら、次のように書けます。

@media (min-width: 768px) {
  .media-box {
    flex-direction: row;
    align-items: center;
  }

  .media-box__image {
    flex: 0 0 320px;
  }

  .media-box__body {
    flex: 1;
  }
}

flex-direction: row;にすることで、画像とテキストが横並びになります。画像側に固定幅を持たせ、テキスト側を残りの幅いっぱいに広げると、見た目が安定します。

よくある調整ポイント

実際の制作では、単に並びを変えるだけでなく、画像の比率や高さもそろえたいことがあります。その場合は、画像にobject-fit: cover;を使うと、見切れ方を整えやすくなります。

.media-box__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

また、横並び時に画像が大きすぎる場合は、flex-basisやmax-widthで調整するとバランスを取りやすくなります。スマホでは縦並び、PCでは横並びという基本を押さえておけば、カード型レイアウトや紹介パーツにも応用できます。

完成例

以下は、スマホで縦並び、768px以上で横並びになる完成コードです。初心者の方は、このままコピーして動きを確認すると理解しやすいでしょう。

<style>
.media-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.media-box__image img {
  width: 100%;
  height: auto;
  display: block;
}

.media-box__body h3 {
  margin: 0 0 8px;
}

.media-box__body p {
  margin: 0;
}

@media (min-width: 768px) {
  .media-box {
    flex-direction: row;
    align-items: center;
  }

  .media-box__image {
    flex: 0 0 320px;
  }

  .media-box__body {
    flex: 1;
  }
}
</style>

<div class="media-box">
  <div class="media-box__image">
    <img src="image.jpg" alt="サンプル画像">
  </div>
  <div class="media-box__body">
    <h3>見出しタイトル</h3>
    <p>ここに説明文が入ります。スマホでは縦に並び、PCでは横に並びます。</p>
  </div>
</div>

この実装はシンプルですが、実務でも使いやすい方法です。ポイントは「最初にスマホ向けの縦並びを作り、画面が広くなったら横並びへ切り替える」という流れです。複雑なJavaScriptを使わなくても、CSSだけで自然なレスポンシブレイアウトが実現できます。