変更差分ビュー
変更前後のテキストを行単位で比較し、追加行を緑・削除行を朱でハイライト表示する。+/− 記号付きでひと目で差分を把握できる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 設定・記事の変更前後を確認する承認画面
- 版管理の履歴比較
- 更新内容を見せてから保存させる業務 UI
- 避ける場面
- 行単位で対応しない大幅な書き換え（差分が全行になる）
- 文字単位の差分が要る校正用途
- 構成要素
- 表示切替タブ
- 変更前ペイン
- 変更後ペイン
- +／− 記号
- 統合表示
- 持っている状態
- 通常
- 押下中
- キーボード
Tab でタブ群（選択中の 1 つ）へ、←→／Home／End で分割／統合を切替（自動選択）、Enter／Space でも可。次の Tab で表示中のパネルへ
- 支援技術
role=tablist／tab／tabpanel＋aria-selected＋aria-controls のローミング tabindex。追加・削除は +／− 記号と色の両方で示し、行に aria-label で「追加／削除」を併記。focus-visible の輪郭あり
- 動き
タブの色・下線 150ms。切替自体はアニメ無し
原則一貫性と標準
デザインの要点
- 追加は緑、削除は朱に加えて +／− 記号を必ず付ける。色だけだと色覚特性のある人と印刷で消える
- 分割と統合の両方を持つ。狭い幅では分割が読めず、長文では統合が追いにくい。切替は role=tab で組む
- 行は白背景に薄い色を敷く程度に留める。濃い塗りは記号と文字の対比を落とす
- 等幅フォント＋word-break:break-all で行の対応を崩さない。折り返し位置が違うと左右の行がずれる
コード（コピーして使えます）
<div class="dv-wrap">
<div class="dv-header" role="tablist" aria-label="差分の表示形式">
<button class="dv-tab active" id="dv-tab-split" type="button" role="tab" aria-selected="true" aria-controls="dv-split" tabindex="0">分割表示</button>
<button class="dv-tab" id="dv-tab-unified" type="button" role="tab" aria-selected="false" aria-controls="dv-unified" tabindex="-1">統合表示</button>
</div>
<div class="dv-panes" id="dv-split" role="tabpanel" aria-labelledby="dv-tab-split" tabindex="0">
<div class="dv-pane">
<div class="dv-pane-label">変更前</div>
<div class="dv-lines" id="dv-before"></div>
</div>
<div class="dv-pane">
<div class="dv-pane-label">変更後</div>
<div class="dv-lines" id="dv-after"></div>
</div>
</div>
<div class="dv-unified hidden" id="dv-unified" role="tabpanel" aria-labelledby="dv-tab-unified" tabindex="0">
<div class="dv-lines" id="dv-unified-lines"></div>
</div>
</div>