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

タブ切替前提のダッシュボード枠組み

上部にタブ、下部にコンテンツエリアを配置した静止状態の骨格構成。会員マイページで複数セクションを切り替える画面設計の見本になる。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-10-05-wrap">
          <div class="d01-10-05-tabs">
            <span class="on">概要</span>
            <span>売上</span>
            <span>顧客</span>
            <span>設定</span>
          </div>
          <div class="d01-10-05-content">
            <div class="d01-10-05-line l1"></div>
            <div class="d01-10-05-line l2"></div>
            <div class="d01-10-05-line l3"></div>
            <div class="d01-10-05-blocks">
              <i></i><i></i>
            </div>
          </div>
        </div>

CSS

.prev.d01-10-05{padding:16px;align-items:stretch}
        .d01-10-05-wrap{display:flex;flex-direction:column;width:100%;font-family:sans-serif}
        .d01-10-05-tabs{display:flex;gap:18px;border-bottom:2px solid #e2e8f0;padding-bottom:8px;margin-bottom:14px}
        .d01-10-05-tabs span{font-size:12px;color:#94a3b8;padding-bottom:8px}
        .d01-10-05-tabs span.on{color:#1e293b;font-weight:bold;border-bottom:2px solid #38bdf8;margin-bottom:-10px}
        .d01-10-05-content{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:10px}
        .d01-10-05-line{height:9px;border-radius:4px;background:#f1f5f9}
        .d01-10-05-line.l1{width:80%}
        .d01-10-05-line.l2{width:60%}
        .d01-10-05-line.l3{width:70%}
        .d01-10-05-blocks{display:flex;gap:10px;margin-top:6px}
        .d01-10-05-blocks i{flex:1;height:50px;border-radius:6px;background:#eef2ff;display:block}

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