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

左サイド固定+右コンテンツ2カラム(30:70)

左側のナビゲーションを固定し、右側のコンテンツだけがスクロールする定番の2カラム構成です。WordPressの会員ページやマニュアルサイトのメニュー付きレイアウトに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-15-01-frame">
          <div class="d01-15-01-scroll">
            <div class="d01-15-01-side">
              <div class="d01-15-01-logo"></div>
              <div class="d01-15-01-nav on"></div>
              <div class="d01-15-01-nav"></div>
              <div class="d01-15-01-nav"></div>
              <div class="d01-15-01-nav"></div>
              <div class="d01-15-01-nav"></div>
            </div>
            <div class="d01-15-01-main">
              <h4>コンテンツエリア</h4>
              <div class="d01-15-01-line w80"></div>
              <div class="d01-15-01-line w60"></div>
              <div class="d01-15-01-block"></div>
              <div class="d01-15-01-line w80"></div>
              <div class="d01-15-01-line w60"></div>
              <div class="d01-15-01-block"></div>
              <div class="d01-15-01-line w80"></div>
            </div>
          </div>
        </div>

CSS

.prev.d01-15-01{padding:0;display:block}
        .d01-15-01-frame{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d01-15-01-scroll{position:absolute;inset:0;overflow-y:auto;display:flex;align-items:flex-start}
        .d01-15-01-side{flex:0 0 30%;position:sticky;top:0;align-self:flex-start;background:#1e2433;padding:18px 12px;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;min-height:260px}
        .d01-15-01-logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#38bdf8,#6366f1);margin-bottom:6px}
        .d01-15-01-nav{width:100%;height:9px;border-radius:4px;background:#3a4256}
        .d01-15-01-nav.on{background:#38bdf8}
        .d01-15-01-main{flex:1;padding:20px 16px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}
        .d01-15-01-main h4{margin:0;font-size:13px;color:#1a1d24;font-weight:800}
        .d01-15-01-line{height:8px;border-radius:4px;background:#e7e9ee}
        .d01-15-01-line.w80{width:80%}
        .d01-15-01-line.w60{width:60%}
        .d01-15-01-block{height:70px;border-radius:8px;background:linear-gradient(135deg,#eef2ff,#e0e7ff)}

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