【HTML/CSS備忘録】画像とテキストを横並びにするカードレイアウトの基本構造と実装パターン

はじめに

本記事は、HTMLとCSSによるカード型レイアウトの基本構造と実装方法を備忘録としてまとめたものです。
研修で実装した「画像＋テキスト」の2カラムレイアウトを、実務で再利用できるように整理しています。

---

目的：画像とテキストを左右に並べるカードUIを作成

以下のような構成で、2枚のカードを横に並べ、画面が狭くなると折り返すレイアウトを構築。

• 親要素に対して flex を使用し、横並びを実現
• 子要素は左右50%ずつで分割
• レスポンシブ対応のため flex-wrap: wrap を使用

---

実装構成

HTML構造（抜粋）

<div class="lessonall-child">
  <div class="lesson">
    <img class="image-icon" src="画像URL">
    <div class="rightcol">
      HTML&CSS
      <div class="lesson">
        <img class="image-icon" src="画像URL">
        <p>HTML&CSS</p>
      </div>
    </div>
  </div>
</div>

.lessonall {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.lesson {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.lessonall-child {
    width: 50%;
}

.image-icon {
    width: 50%;
}

.lesson .rightcol {
    width: 50%;
}

①実装ポイント（要素ごとの整理）

• 1.lessonall

• flexコンテナ

• 子要素（カード）を横に並べる

• flex-wrap: wrap; により画面サイズに応じて折り返し可能

• 2.lessonall-child

• カード1枚分の枠

• width: 50% により2枚で1行になる

• 3.lesson

• カードの中身（画像とテキスト）を並べるためのflexボックス

• 中の .image-icon と .rightcol を左右に並べる

• 4.image-icon

• カード内の画像

• 横幅は50%で、左側に表示

• 5.rightcol

• テキストを含む領域

• .image-icon の隣、右側に表示される部分

• 同じく width: 50% で左右均等

②実務での応用想定

③よくある注意点

• 親要素・子要素のwidth指定が合わないと、横並びが崩れる
• flexにwrapを入れ忘れると、狭い画面でレイアウトが崩れる
• image-iconや.rightcolの幅を個別に調整すると、見た目のバランスが崩れやすい

④まとめ

• HTML + CSSでの「画像 + テキストカード型レイアウト」の基本形
• display: flex、width: 50%、flex-wrap: wrapの3点セットで構成
• 実務でも、情報一覧や紹介UIなど、応用できる場面が多いため、再利用しやすい構造として記録