パーツ番号 05-09-01 ・ CSSのみ

大数字+ラベルの実績カード4連

主要な実績数値を4つのブロックに並べたシンプルな一覧です。企業サイトの導入実績や強みの紹介セクションに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-09-01-grid">
          <div class="d05-09-01-item"><span class="d05-09-01-num">1,240</span><span class="d05-09-01-label">導入企業数</span></div>
          <div class="d05-09-01-item"><span class="d05-09-01-num">98%</span><span class="d05-09-01-label">継続率</span></div>
          <div class="d05-09-01-item"><span class="d05-09-01-num">4.8</span><span class="d05-09-01-label">満足度評価</span></div>
          <div class="d05-09-01-item"><span class="d05-09-01-num">24h</span><span class="d05-09-01-label">サポート対応</span></div>
        </div>

CSS

.d05-09-01{padding:20px}
        .d05-09-01-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;width:100%}
        .d05-09-01-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 8px;border-radius:10px;background:#f8fafc;border:1px solid #eef1f5}
        .d05-09-01-num{font-size:26px;font-weight:800;color:#1e293b;letter-spacing:.02em;line-height:1.2}
        .d05-09-01-label{margin-top:6px;font-size:11.5px;color:#64748b;font-weight:600}

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