CSSで作るレスポンシブ対応のお客様の声（テスティモニアル）セクションの実装方法

Webサイトに掲載する「お客様の声（テスティモニアル）」は、信頼性を高めるための重要な要素です。CSSを活用すれば、デスクトップでもスマートフォンでも見やすい、レスポンシブなデザインを簡単に実現できます。

この記事では、メディアクエリとfloatを使って、画面幅に応じてレイアウトが自動的に切り替わるテスティモニアルカードの作り方を解説します。

実装のポイント

基本レイアウト： プロフィール画像を float: left; で左に回り込みさせ、名前とコメントを右側に配置します。
円形画像： border-radius: 50%; を指定することで、画像を丸く表示できます。
float の解除： 疑似要素 ::after に clear: both; を設定し、レイアウト崩れを防ぎます。
レスポンシブ対応： メディアクエリ @media (max-width: 500px) で、画面幅が500px以下の場合に画像を中央寄せ・ブロック表示に切り替えます。

コード例

以下が完全なHTMLとCSSのコードです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .testimonialContainer {
      border: 2px solid rgba(0, 0, 0, 0.363);
      background-color: rgb(207, 235, 218);
      border-radius: 5px;
      padding: 16px;
      margin: 16px 0;
   }
   .profilePic {
      width: 100px;
      height: 100px;
   }
   .testimonialContainer::after {
      content: "";
      clear: both;
      display: table;
   }
   .testimonialContainer img {
      float: left;
      margin-right: 20px;
      border-radius: 50%;
   }
   .testimonialContainer span {
      font-size: 24px;
      font-weight: 500;
      margin-right: 15px;
      color: purple;
   }
   .testimonialContainer p {
      font-size: 18px;
      font-style: oblique;
   }
   @media (max-width: 500px) {
      .testimonialContainer {
         text-align: center;
      }
      .testimonialContainer img {
         margin: auto;
         float: none;
         display: block;
      }
   }
</style>
</head>
<body>
<h1>Responsive Testimonials Example</h1>
<div class="testimonialContainer">
<img class="profilePic" src="https://images.pexels.com/photos/614810/pexels-photo614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<span>James Anderson</span>
<p>Shawn is a hard working and comitted individual</p>
</div>
<div class="testimonialContainer">
<img class="profilePic" src="https://images.pexels.com/photos/2128807/pexels-photo2128807.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<span>Steve Boulder</span>
<p>Shawn is great at managing people</p>
</div>
</body>
</html>

コードの解説

1. カード全体のスタイリング

.testimonialContainer クラスでは、枠線・背景色・角丸・余白を指定して、カード型のデザインを作っています。背景色には薄い緑系の rgb(207, 235, 218) を使用し、柔らかい印象を与えています。

2. 画像の回り込み

画像に float: left; を指定することで、名前やコメントが画像の右側に回り込みます。margin-right: 20px; で画像とテキストの間に適度な間隔を確保しています。

3. スマートフォン向けの切り替え

メディアクエリにより、画面幅が500px以下になると次の変更が適用されます。

テキストが中央揃えになる（text-align: center;）
画像の回り込みが解除され、中央にブロック表示される（float: none; ＋ display: block; ＋ margin: auto;）

これにより、狭い画面でも画像とテキストが縦に整然と並び、読みやすいレイアウトになります。

表示結果

上記のコードを実行すると、デスクトップでは画像が左・テキストが右に配置されたカードが表示され、画面幅を500px以下にすると、画像が中央に移動しテキストも中央揃えに切り替わります。

CSSで作るレスポンシブ対応のお客様の声（テスティモニアル）セクションの実装方法

まとめ

CSSのメディアクエリとfloatを組み合わせるだけで、特別なJavaScriptを使わずにレスポンシブなテスティモニアルセクションを作成できます。ぜひ色やフォントをカスタマイズして、自分のサイトのデザインに合わせてみてください。

IE8以下を含むすべてのブラウザに対応したCSS画像の不透明度設定方法

CSSで画面を50/50に分割する方法を徹底解説

CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】
CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <
CSSでレスポンシブなカラムカードを作成する方法【コード例付きで解説】
CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブなカラムカードを簡単に作成できます。本記事では、floatとcalc()、そしてメディアクエリを組み合わせた基本的な実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。レスポンシブカラムカードの仕組みこの手法のポイントは、主に以下の3つです。 calc(25% - 20px)：4枚のカードを横並びにするため、各カードの幅を「全体の25%からマージン分を引いた値」として計算しています。 float: left：カードを左に回り込ませることで、横一列に並べています。 @mediaクエリ：画面幅が