← 静的パーツギャラリーへ戻る

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

サイドバー+メインコンテンツの管理画面構成

左に固定ナビゲーション、右にコンテンツを配置する定番の管理画面レイアウト。WordPress管理画面や会員マイページの基本骨格として利用できる。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-10-01-app">
          <div class="d01-10-01-side">
            <span class="d01-10-01-logo"></span>
            <span class="d01-10-01-item on"></span>
            <span class="d01-10-01-item"></span>
            <span class="d01-10-01-item"></span>
            <span class="d01-10-01-item"></span>
            <span class="d01-10-01-avatar"></span>
          </div>
          <div class="d01-10-01-main">
            <div class="d01-10-01-head">
              <span class="d01-10-01-title"></span>
              <span class="d01-10-01-search"></span>
            </div>
            <div class="d01-10-01-row">
              <div class="d01-10-01-box"><span></span><i></i></div>
              <div class="d01-10-01-box"><span></span><i></i></div>
              <div class="d01-10-01-box"><span></span><i></i></div>
            </div>
            <div class="d01-10-01-panel">
              <span class="d01-10-01-ptitle"></span>
              <div class="d01-10-01-plines"><i></i><i></i><i></i></div>
            </div>
          </div>
        </div>

CSS

.prev.d01-10-01{padding:0;align-items:stretch}
        .d01-10-01-app{display:flex;width:100%;height:280px;background:#f4f5f7;font-family:sans-serif}
        .d01-10-01-side{width:60px;background:#1e293b;display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:16px}
        .d01-10-01-logo{width:22px;height:22px;border-radius:6px;background:#38bdf8}
        .d01-10-01-item{width:18px;height:18px;border-radius:5px;background:#334155}
        .d01-10-01-item.on{background:#38bdf8}
        .d01-10-01-avatar{margin-top:auto;width:22px;height:22px;border-radius:50%;background:#64748b}
        .d01-10-01-main{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px}
        .d01-10-01-head{display:flex;justify-content:space-between;align-items:center}
        .d01-10-01-title{width:120px;height:16px;border-radius:4px;background:#334155}
        .d01-10-01-search{width:80px;height:14px;border-radius:7px;background:#e2e8f0}
        .d01-10-01-row{display:flex;gap:10px}
        .d01-10-01-box{flex:1;height:60px;border-radius:8px;background:#fff;border:1px solid #e2e8f0;padding:10px;display:flex;flex-direction:column;justify-content:space-between}
        .d01-10-01-box span{width:50%;height:8px;border-radius:4px;background:#cbd5e1;display:block}
        .d01-10-01-box i{width:30px;height:14px;border-radius:4px;background:#38bdf8;display:block}
        .d01-10-01-panel{flex:1;border-radius:8px;background:#fff;border:1px solid #e2e8f0;padding:12px}
        .d01-10-01-ptitle{display:block;width:100px;height:10px;border-radius:4px;background:#cbd5e1;margin-bottom:10px}
        .d01-10-01-plines{display:flex;flex-direction:column;gap:8px}
        .d01-10-01-plines i{display:block;height:8px;border-radius:4px;background:#eef1f5}
        .d01-10-01-plines i:nth-child(2){width:80%}
        .d01-10-01-plines i:nth-child(3){width:60%}

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