パーツ番号 01-15-08 ・ CSSのみ
入力フォーム固定+プレビューエリアの2カラム
左側の入力フォームを固定しながら、右側のプレビューエリアをスクロールして確認できる編集画面向けの構成です。WordPressのカスタム投稿編集画面やフォームビルダーに応用できます。
プレビュー
ソースコード
HTML
<div class="d01-15-08-frame">
<div class="d01-15-08-scroll">
<div class="d01-15-08-side">
<div class="d01-15-08-label"></div>
<div class="d01-15-08-input"></div>
<div class="d01-15-08-label"></div>
<div class="d01-15-08-input"></div>
<div class="d01-15-08-label"></div>
<div class="d01-15-08-input tall"></div>
<div class="d01-15-08-btn"></div>
</div>
<div class="d01-15-08-main">
<span class="d01-15-08-cap">PREVIEW</span>
<div class="d01-15-08-card"></div>
<div class="d01-15-08-card"></div>
<div class="d01-15-08-card"></div>
</div>
</div>
</div>CSS
.prev.d01-15-08{padding:0;display:block}
.d01-15-08-frame{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f4f5f7}
.d01-15-08-scroll{position:absolute;inset:0;overflow-y:auto;display:flex;align-items:flex-start}
.d01-15-08-side{flex:0 0 45%;position:sticky;top:0;align-self:flex-start;background:#fff;border-right:1px solid #e5e7eb;padding:18px 14px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box;min-height:260px}
.d01-15-08-label{width:40%;height:7px;border-radius:4px;background:#cbd5e1;margin-top:4px}
.d01-15-08-input{width:100%;height:22px;border-radius:6px;background:#f1f5f9;border:1px solid #e2e8f0}
.d01-15-08-input.tall{height:44px}
.d01-15-08-btn{margin-top:8px;width:70px;height:22px;border-radius:6px;background:#0ea5e9}
.d01-15-08-main{flex:1;padding:18px 14px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}
.d01-15-08-cap{font-size:9.5px;letter-spacing:.2em;color:#94a3b8;font-weight:700}
.d01-15-08-card{height:60px;border-radius:8px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.05)}クラス名 .d01-15-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。