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

メディア掲載風引用カード

新聞や雑誌の掲載記事のような硬派な体裁で引用文を見せるカードです。信頼性を強調したい実績紹介欄に適します。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-05-07-card">
          <div class="d06-05-07-mark">THE VOICE</div>
          <p class="d06-05-07-text">「品質とスピード、両方を高いレベルで実現している制作会社だ」</p>
          <div class="d06-05-07-source">— 業界情報誌『Web Craft』2025年秋号より</div>
        </div>

CSS

.d06-05-07-card{ width:100%; max-width:250px; text-align:center; border-top:2px solid #221f33; border-bottom:2px solid #221f33; padding:14px 4px; }
        .d06-05-07-mark{ font-size:10px; letter-spacing:3px; color:#8b87a3; margin-bottom:10px; font-weight:700; }
        .d06-05-07-text{ font-size:13px; line-height:1.8; color:#221f33; font-family:Georgia, serif; margin:0 0 10px; }
        .d06-05-07-source{ font-size:10px; color:#8b87a3; }

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