サムネイル画像とテキストのコンテンツを横並びにする

サムネイル画像付きの一覧を作る

今回は次のようなレイアウトの作り方を解説していきます。

このようなレイアウトで表示する方法として、主に次の2つの方法があります。

• フレックスボックスを使う
• floatプロパティを使う

2つの方法の使い分け方としては、フレックスボックスが未対応のブラウザ（IE9以前）も対応する必要がある場合はfloatプロパティを使う方法を、それ以外はフレックスボックスを使う方法がオススメです。

フレックスボックスを使う

まずは、displayプロパティのフレックスボックスを使った方法から解説していきます。

HTML コード例

<article>
  <figure>
    <img src="./images/pic_thumb1.jpg" alt="サムネイル画像">
  </figure>
  <div class="text_content">
    <p class="text_date"><time datetime="2018-08-01">2018年8月1日</time></p>
    <h2><a href="#">タイトル</a></h2>
    <p class="text_excerpt">画像とテキストコンテンツを左右に並べたレイアウト。画像とテキストコンテンツを左右に並べたレイアウト。</p>
  </div>
</article>
<article>
  <figure>
    <img src="./images/pic_thumb2.jpg" alt="サムネイル画像">
  </figure>
  <div class="text_content">
    <p class="text_date"><time datetime="2018-08-03">2018年8月3日</time></p>
    <h2><a href="#">タイトル</a></h2>
    <p class="text_excerpt">画像とテキストコンテンツを左右に並べたレイアウト。画像とテキストコンテンツを左右に並べたレイアウト。</p>
  </div>
</article>
<article>
  <figure>
    <img src="./images/pic_thumb1.jpg" alt="サムネイル画像">
  </figure>
  <div class="text_content">
    <p class="text_date"><time datetime="2018-08-05">2018年8月5日</time></p>
    <h2><a href="#">タイトル</a></h2>
    <p class="text_excerpt">画像とテキストコンテンツを左右に並べたレイアウト。画像とテキストコンテンツを左右に並べたレイアウト。</p>
  </div>
</article>

CSS コード例

article {
  display: flex;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 0 0 5px #999;
}
  article figure {
    margin-right: 20px;
    width: 100px;
    height: 100px;
  }
    article figure img {
      min-width: 100px;
      max-width: 100%;
      vertical-align: top;
    }

フレックスボックスが便利なポイントは、画像部分の幅が決まっていると右側のテキストコンテンツがあるエリアの幅が自動的に決まるところです。

今回はCSSでサムネイル画像の幅を「100px」、さらに画像の右側に「margin-right: 20px;」と設定しています。
すると、右側のテキストコンテンツエリアには左側の120pxを引いた幅が設定されます。
次のようなイメージです。

表示幅にバリエーションがあるレスポンシブ対応もしやすくオススメの方法です。

floatプロパティを使う

続いて、floatプロパティを使った方法を解説します。

HTMLは先ほどと同じため省略し、CSSのコードのみ記載します。

CSS コード例

article {
    overflow: hidden;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 0 0 5px #999;
}
  article figure {
    float: left;
    width: 100px;
    height: 100px;
  }
    article figure img {
      max-width: 100%;
      vertical-align: top;
    }
    
  article .text_content {
    float: right;
    margin-left: -120px;
    width: 100%;
  }
    article .text_content h2,
    article .text_content p {
      margin-left: 120px;
    }

まず、画像とテキストコンテンツにfloatプロパティを使うので親要素であるarticle要素に対して「overflow: hidden;」を指定します。

続いて、子孫要素にあたるfigure要素とテキストコンテンツを囲むdiv要素に、それぞれfloatプロパティを適用します。

figure要素には縦横のサイズを「100px」で指定していますが、div要素側では横幅のみ「100%」として具体的なサイズを指定していません。
代わりに、「margin-left: -120px」を、さらに子孫要素のh2要素とp要素に「margin-left: 120px;」を指定しています。
この「120px」は画像の横幅である100pxと、テキストコンテンツとの余白である20pxを足した数字です。

このように具体的な数字を画像側のみに指定するような設計にすると、右側のテキストコンテンツ側には具体的な横幅のサイズを指定する必要がなくなるため柔軟性があります。
上記のフレックスボックスのように右側のサイズは左側の画像サイズに応じて決まるので、レスポンシブ対応も画像サイズのみ気にするだけでレイアウトをコントロールすることができます。

親要素の幅が固定であれば、画像とテキストコンテンツの幅、それぞれの余白（親要素と子孫要素の余白と、画像＆テキストコンテンツの余白）をきっちり計算して同様の表示を行うことも可能です。

CSS コード例

article {
  overflow: hidden;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 0 0 5px #999;
}
  article figure {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #eee;
  }
    article figure img {
      max-width: 100%;
      vertical-align: top;
    }
    
  article .text_content {
    float: right;
    width: 460px;
  }

左右のコンテンツの幅をpx単位で指定する場合は、親要素と余白の幅を差し引いた幅をそれぞれに指定します。
幅の合計値が固定であることを念頭に置いているため、レスポンシブ対応のような表示幅が変則的な場合は扱いづらい方法です。