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

吹き出し型レビューカード

会話の吹き出し風にレビュー本文を見せるデザインです。チャットや対話に近い柔らかい印象を与えたいページに向いています。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-05-06-bubble">
          <p class="d06-05-06-text">気になっていた点もすぐに相談でき、想像以上の仕上がりに驚きました。</p>
          <div class="d06-05-06-stars">★★★★★</div>
        </div>
        <div class="d06-05-06-tail"></div>
        <div class="d06-05-06-person">
          <span class="d06-05-06-avatar">吉</span>
          <span class="d06-05-06-name">吉田 直子 様</span>
        </div>

CSS

.d06-05-06{ flex-direction:column; align-items:flex-start; }
        .d06-05-06-bubble{ background:#eef1ff; border-radius:16px 16px 16px 4px; padding:14px 16px; max-width:230px; }
        .d06-05-06-text{ font-size:12px; line-height:1.6; color:#332f52; margin:0 0 6px; }
        .d06-05-06-stars{ color:#f5a623; font-size:12px; letter-spacing:1px; }
        .d06-05-06-tail{ width:0; height:0; }
        .d06-05-06-person{ display:flex; align-items:center; gap:8px; margin-top:10px; padding-left:6px; }
        .d06-05-06-avatar{ width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#6a93ff,#8f6aff); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d06-05-06-name{ font-size:11px; font-weight:700; color:#221f33; }

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