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

目標達成率ゲージ付きカード

半円のゲージで達成率を視覚的に示す構成。WordPressの営業成績ダッシュボードやプロジェクト進捗ページに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-13-07-card">
          <svg class="d05-13-07-gauge" viewBox="0 0 120 70" width="140" height="82">
            <path d="M10 65 A50 50 0 0 1 110 65" fill="none" stroke="#eef0f3" stroke-width="10" stroke-linecap="round"/>
            <path d="M10 65 A50 50 0 0 1 110 65" fill="none" stroke="#059669" stroke-width="10" stroke-linecap="round" stroke-dasharray="157" stroke-dashoffset="39"/>
            <text x="60" y="58" text-anchor="middle" font-size="20" font-weight="700" fill="#1f2937">75%</text>
          </svg>
          <p class="d05-13-07-label">目標達成ゲージ</p>
        </div>

CSS

.d05-13-07-card{
          width:100%;max-width:260px;background:#fff;border:1px solid #e5e7eb;
          border-radius:14px;padding:18px 22px 20px;box-sizing:border-box;
          display:flex;flex-direction:column;align-items:center;
        }
        .d05-13-07-gauge{display:block;margin-bottom:4px}
        .d05-13-07-label{margin:0;font-size:12.5px;font-weight:700;color:#6b7280}

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