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

テーブル中心の管理画面レイアウト

上部にフィルタ操作、下部にデータテーブルを配置する構成。会員一覧や注文一覧など、一覧管理画面の基本骨格として使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-10-08-wrap">
          <div class="d01-10-08-filters"><i></i><i></i><i class="btn"></i></div>
          <div class="d01-10-08-table">
            <div class="d01-10-08-thead"><span></span><span></span><span></span><span></span></div>
            <div class="d01-10-08-trow"><span></span><span></span><span></span><span class="tag"></span></div>
            <div class="d01-10-08-trow"><span></span><span></span><span></span><span class="tag"></span></div>
            <div class="d01-10-08-trow"><span></span><span></span><span></span><span class="tag"></span></div>
          </div>
        </div>

CSS

.prev.d01-10-08{padding:16px;align-items:stretch}
        .d01-10-08-wrap{display:flex;flex-direction:column;gap:10px;width:100%;font-family:sans-serif}
        .d01-10-08-filters{display:flex;gap:8px}
        .d01-10-08-filters i{width:60px;height:20px;border-radius:5px;background:#e2e8f0;display:block}
        .d01-10-08-filters i.btn{width:50px;background:#38bdf8;margin-left:auto}
        .d01-10-08-table{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}
        .d01-10-08-thead{display:flex;background:#f1f5f9;padding:8px 10px;gap:10px}
        .d01-10-08-thead span{flex:1;height:8px;border-radius:4px;background:#94a3b8;display:block}
        .d01-10-08-trow{display:flex;align-items:center;padding:8px 10px;gap:10px;border-top:1px solid #f1f5f9}
        .d01-10-08-trow span{flex:1;height:8px;border-radius:4px;background:#eef1f5;display:block}
        .d01-10-08-trow span.tag{flex:0 0 30px;background:#dcfce7;height:14px;border-radius:8px}

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