パーツ番号 03-07-05 ・ CSSのみ

縦型サイドタブ(静止)

左側に縦並びのメニューを配置し、選択中項目を左ボーダーと背景で強調した設定画面向けの見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="side">
          <div class="nav">
            <span class="snav">プロフィール</span>
            <span class="snav active">セキュリティ</span>
            <span class="snav">通知</span>
            <span class="snav">課金情報</span>
          </div>
          <div class="body">セキュリティ設定の内容エリア(見本)。</div>
        </div>

CSS

.d03-07-05 .side{ display:flex; width:100%; gap:14px; }
        .d03-07-05 .nav{ display:flex; flex-direction:column; gap:4px; width:38%; border-right:1px solid #e5e7eb; padding-right:12px; }
        .d03-07-05 .snav{ padding:8px 10px; font-size:12.5px; color:#6b7280; border-left:3px solid transparent; border-radius:4px; }
        .d03-07-05 .snav.active{ color:#111827; font-weight:600; background:#eff6ff; border-left-color:#2563eb; }
        .d03-07-05 .body{ flex:1; font-size:12.5px; color:#6b7280; line-height:1.6; align-self:center; }

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