【簡単コード】CSSで画像とテキストを横に並べる方法（レスポンシブデザイン対応）

こんにちは、Webプログラマー（見習いは卒業しました！）のトムです。

今回は、初見では意外と詰まってしまう、画像とテキストを横に並べる方法について解説します。前提としてPCでの閲覧時は横並び、モバイルデバイスでの閲覧時には縦方向に並べるレスポンシブデザインにも対応できるコードを目指します。

今回のポイント・・・複数のコンテンツの横並びにはflexboxが便利。レスポンシブデザインにも容易に対応できる。flexboxの利用を見据えたHTMLのデザインが大事。

【早い者勝ち！】.com／.net／.jp　ドメイン取るならお名前.com

さて今回コーディングする画像とテキストを横に並べた状態というのは、以下のイメージになります。

オススメ書籍紹介

書籍タイトル　XXX

著者・・・・トム
発行日・・・2021年9月9日
出版社・・・ABC出版

概要

あの著名投資家・トムがＸＸ年の人生について赤裸々に語る！投資とは何か、人生とは何か、貴方の脳に語り掛ける一冊！

左側に本の画像、右側に本の紹介テキストが見出しや箇条書きなどで記述されています。このデザインはWordpressだとマルチカラムブロックを使って非常に簡単に実現できるのですが、HTMLとCSSだけでやろうとすると意外と詰まってしまいます（私は見習いの頃、めちゃ詰まりました汗）

またレスポンシブデザイン対応として、スマホアクセスの場合は画像とデキストが横並びではなく縦に並ぶこととします。

ということで、画像とテキストを横に並べるレスポンシブデザイン対応のコードを書いてみます。

初期費用無料、月額990円から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

画像とテキストを横に並べるレスポンシブデザイン対応のコード

画像とテキストを横に並べるレスポンシブデザイン対応のコード

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>画像とテキストの横並び</title>
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div class="wrapper">
    <section id="book">
      <h2 class="intro">オススメ書籍紹介</h2>
      <div class="contents">
        <img src="https://drive.google.com/uc?export=view&id=1I-1uR7ReWh4bdwtT1yI7XLSDx7F5dnSv">
        <div class="text">
          <h2>書籍タイトル　XXX</h2>
          <ul>
            <li>著者・・・トム</li>
            <li>発行日・・・2021年9月9日</li>
            <li>出版社・・・ABC出版</li>
          </ul>
          <h3>概要</h3>
          <p>あの著名投資家・トムがＸＸ年の人生について赤裸々に語る！投資とは何か、人生とは何か、貴方の脳に語り掛ける一冊！</p>
        </div>
      </div>
  </div>
  </div>
</body>

</html>

CSS

@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  font-family: "Meiryo", "sans-serif";
  background-color: white;
}

.wrapper {
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
}

.intro {
  margin-bottom: 20px;
}

.contents {
  display: flex;
  justify-content: space-between;
}

.contents img, .text {
  width: 45%;
}

.text h2, .text h3 {
  padding-bottom: 15px;
  border-bottom: 2px solid #dddddd;
}

.text ul {
  padding: 15px 0;
  list-style-position: inside;
  margin-left: 10px;
}

.text li {
  margin: 5px 0;
}

.text p {
  padding: 15px 0;
  line-height: 32px;
}

@media(max-width: 600px) {
  .wrapper {
    padding: 0 10px;
    margin: 0 auto;
  }
  .contents {
    flex-direction: column;
  }
  .contents img, .text {
    width: 100%;
  }
}

実行結果

See the Pen image_text_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

コードの主なポイント

HTML
- 17行目：テキスト部分の複数のタグ(h2やulやp)をまとめる親要素として、div class=”text”を指定する(textクラス)
- 15行目：画像(imgタグ)とtextクラスの親要素としてdiv class=”contents”を指定する(contentsクラス)
  - →これにより、contentsの子要素に画像とテキスト、2つの要素が来る構造にする
CSS
- 22行目：contentsクラスでflexbox(display:flex)を使う　→　画像とテキストエリアを横に並べる指定です
- 23行目：justify-content:space-betweenで、画像とテキストエリアの間に空白を取る
- 27行目：画像とtextクラスの幅を45%に指定する(50%じゃないのは、50%にすると画像とテキストが寄り過ぎてしまうため）
- 31行目など・・・行間など、適切なスペースを取る
- 56行目：600px以下のブラウザアクセスの場合、flex-direction:columnにして画像とテキストを縦並びにする
- 59行目：600px以下のブラウザアクセスの場合、画像とtextクラスのwidthを100%にして横幅いっぱいに表示させる

codepenだとレスポンシブデザイン対応しているか分かりづらいので、ブラウザを横に細くした時（600px以下）のサイト画像を↓に貼っておきます。