パーツ番号 01-15-04 ・ CSSのみ

細身サイドナビ固定+広いメインエリアの管理画面2カラム

アイコンのみの細いナビゲーションを固定し、右側の広いメインエリアだけをスクロールさせる管理画面向けのレイアウトです。WordPressの独自管理画面やメンバー専用ダッシュボードに応用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-15-04-frame">
          <div class="d01-15-04-scroll">
            <div class="d01-15-04-side">
              <div class="d01-15-04-icon on"></div>
              <div class="d01-15-04-icon"></div>
              <div class="d01-15-04-icon"></div>
              <div class="d01-15-04-icon"></div>
              <div class="d01-15-04-icon"></div>
            </div>
            <div class="d01-15-04-main">
              <div class="d01-15-04-row">
                <div class="d01-15-04-card"></div>
                <div class="d01-15-04-card"></div>
                <div class="d01-15-04-card"></div>
              </div>
              <div class="d01-15-04-listrow"><span></span><span class="s"></span></div>
              <div class="d01-15-04-listrow"><span></span><span class="s"></span></div>
              <div class="d01-15-04-listrow"><span></span><span class="s"></span></div>
              <div class="d01-15-04-listrow"><span></span><span class="s"></span></div>
              <div class="d01-15-04-listrow"><span></span><span class="s"></span></div>
              <div class="d01-15-04-listrow"><span></span><span class="s"></span></div>
              <div class="d01-15-04-listrow"><span></span><span class="s"></span></div>
            </div>
          </div>
        </div>

CSS

.prev.d01-15-04{padding:0;display:block}
        .d01-15-04-frame{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f1f5f9}
        .d01-15-04-scroll{position:absolute;inset:0;overflow-y:auto;display:flex;align-items:flex-start}
        .d01-15-04-side{flex:0 0 52px;position:sticky;top:0;align-self:flex-start;background:#0f172a;padding:16px 0;display:flex;flex-direction:column;align-items:center;gap:14px;box-sizing:border-box;min-height:260px}
        .d01-15-04-icon{width:20px;height:20px;border-radius:6px;background:#334155}
        .d01-15-04-icon.on{background:#22d3ee}
        .d01-15-04-main{flex:1;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
        .d01-15-04-row{display:flex;gap:8px}
        .d01-15-04-card{flex:1;height:44px;border-radius:8px;background:#fff;border:1px solid #e2e8f0}
        .d01-15-04-listrow{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:8px 10px}
        .d01-15-04-listrow span{display:block;width:55%;height:7px;border-radius:4px;background:#cbd5e1}
        .d01-15-04-listrow span.s{width:18%;background:#22d3ee}

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