パーツ番号 06-08-12 ・ CSSのみ

進捗パーセンテージ表示付き経歴ステップ

各段階に達成率を数値で添えた横並びの経歴・工程表示です。プロジェクトの進行過程を紹介するページに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-08-12-wrap">
          <div class="d06-08-12-step"><span class="d06-08-12-pct" style="color:#3b6fe0;">25%</span><h4>要件整理</h4></div>
          <div class="d06-08-12-step"><span class="d06-08-12-pct" style="color:#2f9e6e;">50%</span><h4>設計・試作</h4></div>
          <div class="d06-08-12-step"><span class="d06-08-12-pct" style="color:#e0a63c;">75%</span><h4>検証・調整</h4></div>
          <div class="d06-08-12-step"><span class="d06-08-12-pct" style="color:#e0473f;">100%</span><h4>完成・納品</h4></div>
        </div>

CSS

.d06-08-12{padding:22px 14px;}
        .d06-08-12-wrap{display:flex;justify-content:space-between;gap:8px;width:100%;}
        .d06-08-12-step{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;}
        .d06-08-12-pct{font-size:16px;font-weight:800;font-family:Georgia,serif;}
        .d06-08-12-step h4{margin:0;font-size:9.5px;color:#555;font-weight:600;font-family:sans-serif;}

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