パーツ番号 06-05-02 ・ CSSのみ

横並び3件レビューグリッド(静止)

3件のレビューを固定で横並び表示するグリッドです。実績紹介ページや料金ページの下部に配置できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-05-02-row">
          <div class="d06-05-02-card">
            <div class="d06-05-02-stars">★★★★★</div>
            <p class="d06-05-02-text">スピード対応で助かりました。</p>
            <div class="d06-05-02-name">田中 健</div>
          </div>
          <div class="d06-05-02-card">
            <div class="d06-05-02-stars">★★★★★</div>
            <p class="d06-05-02-text">デザインの提案が的確でした。</p>
            <div class="d06-05-02-name">鈴木 彩</div>
          </div>
          <div class="d06-05-02-card">
            <div class="d06-05-02-stars">★★★★☆</div>
            <p class="d06-05-02-text">価格も含めて満足しています。</p>
            <div class="d06-05-02-name">山本 隆</div>
          </div>
        </div>

CSS

.d06-05-02-row{ display:flex; gap:8px; width:100%; }
        .d06-05-02-card{ flex:1; background:#f7f8fc; border-radius:10px; padding:12px 10px; text-align:center; }
        .d06-05-02-stars{ color:#f5a623; font-size:11px; letter-spacing:1px; margin-bottom:6px; }
        .d06-05-02-text{ font-size:11px; line-height:1.5; color:#3a3550; margin:0 0 8px; }
        .d06-05-02-name{ font-size:10px; font-weight:700; color:#5c6bc0; }

クラス名 .d06-05-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。