パーツ番号 06-05-12 ・ CSSのみ
課題→解決ストーリー型レビューカード
導入前の課題と導入後の変化を対比させて見せるレビューカードです。導入効果を具体的に伝えたい事例紹介ページに使えます。
プレビュー
ソースコード
HTML
<div class="d06-05-12-card">
<div class="d06-05-12-block d06-05-12-before"><span class="d06-05-12-tag">Before</span><p>手作業の集計に毎月10時間かかっていました。</p></div>
<div class="d06-05-12-arrow">↓</div>
<div class="d06-05-12-block d06-05-12-after"><span class="d06-05-12-tag">After</span><p>自動化により作業時間が1時間に短縮しました。</p></div>
<div class="d06-05-12-person">— 小川 誠 様(製造業)</div>
</div>CSS
.d06-05-12-card{ width:100%; max-width:260px; text-align:center; }
.d06-05-12-block{ padding:10px 12px; border-radius:10px; text-align:left; margin-bottom:6px; }
.d06-05-12-before{ background:#fef2f2; }
.d06-05-12-after{ background:#f0fdf4; }
.d06-05-12-tag{ display:block; font-size:9px; font-weight:700; letter-spacing:.05em; margin-bottom:4px; }
.d06-05-12-before .d06-05-12-tag{ color:#dc2626; }
.d06-05-12-after .d06-05-12-tag{ color:#16a34a; }
.d06-05-12-block p{ margin:0; font-size:11px; color:#374151; line-height:1.5; }
.d06-05-12-arrow{ font-size:14px; color:#9ca3af; margin:2px 0; }
.d06-05-12-person{ margin-top:8px; font-size:10.5px; color:#6b7280; font-weight:600; }クラス名 .d06-05-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。