パーツ番号 04-10-08 ・ CSSのみ

ステップ番号+ラベル横並びタブ風見た目

タブのように番号とラベルを横に並べたステップ表示です。設定画面や複数ページの申込みフォームの上部ナビとして活用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-10-08-tabs">
          <div class="d04-10-08-tab d04-10-08-done"><span class="d04-10-08-num">1</span>基本情報</div>
          <div class="d04-10-08-tab d04-10-08-active"><span class="d04-10-08-num">2</span>詳細情報</div>
          <div class="d04-10-08-tab"><span class="d04-10-08-num">3</span>確認</div>
        </div>

CSS

.d04-10-08-tabs{display:flex;width:100%;max-width:300px;border-bottom:2px solid #eef0f3;font-family:sans-serif}
        .d04-10-08-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 4px 10px;font-size:11.5px;font-weight:700;color:#9ca3af;border-bottom:2px solid transparent;margin-bottom:-2px}
        .d04-10-08-num{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#e5e7eb;color:#fff;font-size:10px;flex:none}
        .d04-10-08-done{color:#4338ca}
        .d04-10-08-done .d04-10-08-num{background:#a5b4fc}
        .d04-10-08-active{color:#4338ca;border-bottom-color:#6366f1}
        .d04-10-08-active .d04-10-08-num{background:#6366f1}

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