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

パーセンテージ強調型統計ブロック

大きなパーセント数字を中心に配置し補足情報を添えたブロックです。満足度や達成率を強く印象づけたい箇所に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-09-10-block">
          <span class="d05-09-10-pct">76<small>%</small></span>
          <span class="d05-09-10-desc">顧客満足度</span>
          <span class="d05-09-10-sub">前年比 +4.2pt</span>
        </div>

CSS

.d05-09-10{padding:20px}
        .d05-09-10-block{display:flex;flex-direction:column;align-items:center;text-align:center}
        .d05-09-10-pct{font-size:54px;font-weight:800;color:#111827;line-height:1}
        .d05-09-10-pct small{margin-left:2px;font-size:22px;font-weight:700}
        .d05-09-10-desc{margin-top:8px;font-size:13px;color:#374151;font-weight:700}
        .d05-09-10-sub{margin-top:4px;font-size:11px;color:#16a34a;font-weight:600}

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