分割ビュー
中央の仕切りをドラッグして左右ペインの幅を自由に変えられる。Pointer Events で実装しタッチ操作にも対応。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- ツリー＋エディタなど 2 ペインの作業画面
- 利用者が左右の広さを自分で決めたいツール
- タッチでも幅を変えたいタブレット UI
- 避ける場面
- ペインの片方が固定幅で十分な一覧＋詳細
- スマホ幅（2 ペインが並ばない）
- 構成要素
- 左ペイン
- 仕切り
- ハンドル
- 右ペイン
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab で仕切りへ、←→ で左ペイン幅を 10px ずつ変更、Home／End で最小・最大へ
- 支援技術
仕切りは role=separator＋aria-label＋tabindex=0 に aria-orientation=vertical と aria-valuenow／min／max（px）を同期。focus-visible で青く強調。reduced-motion で色の遷移停止
- 動き
仕切りとハンドルの色 150ms（掴める場所を示す）。幅の変更は即時
デザインの要点
- 仕切りは 7px 幅にして 3px のハンドルを描く。線だけだと掴めず、太いと画面を食う
- 上限はハードコードせず、枠幅 − 仕切り幅 − 右ペインの min-width を実測して出す。CSS を変えても壊れない
- ホバーと掴んでいる間は仕切り全体を青にする。カーソルの形（col-resize）だけでは気づかれない
- キーボードでは ←→ 10px 刻み・Home／End で端へ。separator に aria-valuenow を同期して今の幅を読ませる
コード（コピーして使えます）
<div class="sv-wrap" id="sv-wrap">
<div class="sv-pane sv-left" id="sv-left">
<div class="sv-pane-header">ファイルツリー</div>
<ul class="sv-tree">
<li>📁 src</li>
<li class="sv-indent">📄 index.ts</li>
<li class="sv-indent">📄 app.ts</li>
<li>📁 public</li>
<li class="sv-indent">🖼 logo.svg</li>
</ul>
</div>
<div class="sv-divider" id="sv-divider" role="separator" aria-label="左ペインの幅" aria-orientation="vertical" aria-valuemin="32" aria-valuemax="200" aria-valuenow="80" tabindex="0">
<div class="sv-handle"></div>
</div>
<div class="sv-pane sv-right" id="sv-right">
<div class="sv-pane-header">エディタ</div>
<pre class="sv-code"><span class="sv-kw">import</span> { app } <span class="sv-kw">from</span> <span class="sv-str">'./app'</span>;
app.listen(<span class="sv-num">3000</span>, () => {
console.log(<span class="sv-str">'起動完了'</span>);
});</pre>
</div>
</div>