パーツ番号 03-07-12 ・ CSSのみ

グラデーション背景タブ(静止)

アクティブなタブの背景にグラデーションを敷いて華やかに強調する表現。キャンペーンページの切替UIなどの見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="tabs">
            <span class="tab">おすすめ</span>
            <span class="tab active">新着</span>
            <span class="tab">人気</span>
          </div>
          <div class="panel">新着タブのコンテンツ表示エリア(見本)。</div>
        </div>

CSS

.d03-07-12 .wrap{ width:100%; }
        .d03-07-12 .tabs{ display:flex; gap:8px; }
        .d03-07-12 .tab{ padding:9px 18px; font-size:13px; color:#6b7280; border-radius:999px; }
        .d03-07-12 .tab.active{ background:linear-gradient(90deg,#6366f1,#a855f7); color:#fff; font-weight:600; }
        .d03-07-12 .panel{ margin-top:16px; font-size:13px; color:#6b7280; line-height:1.6; }

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