メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

差分コンポーネント

最終更新日:

CSS のみの Tailwind CSS 差分ビューア。ドラッグ可能な分割線を使用してコンテンツを並べて比較できます。 JavaScriptは必要ありません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

Diff コンポーネントは、コンテンツの 2 つのバージョン間の差異を表示するため、コードの変更、ドキュメントのリビジョン、または比較ビューを表示するのに最適です。セマンティック HTML と色分けされたスタイルで構築された差分は、ユーザーが何が変更されたかを理解するのに役立ちます。 Frutjam diff システムは、複数のタイプとスタイルをサポートしており、バージョン管理インターフェイス、改訂履歴、変更追跡に最適です。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
diffベースドラッグ可能な仕切りを備えた並べて比較するコンテナ
diff-item-1修飾子比較の左側 (前) ペイン
diff-item-2修飾子比較の右 (後) ペイン
diff-resizer修飾子2 つのペインのサイズを変更するためのドラッグ可能なハンドル

基本的な使い方

前後の状態を並べた単純な差分を作成します。

Before
After 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<figure class="diff aspect-video" tabindex="0" aria-label="Before and after comparison">
  <div class="diff-item-1" aria-label="Before">
    <div class="bg-base-100 grid place-items-center text-4xl font-bold">
      Before
    </div>
  </div>
  <div class="diff-item-2" aria-label="After">
    <div class="bg-base-200 grid place-items-center text-4xl font-bold">
      After
    </div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<figure className="diff aspect-video" tabindex="0" aria-label="Before and after comparison">
  <div className="diff-item-1" aria-label="Before">
    <div className="bg-base-100 grid place-items-center text-4xl font-bold">
      Before
    </div>
  </div>
  <div className="diff-item-2" aria-label="After">
    <div className="bg-base-200 grid place-items-center text-4xl font-bold">
      After
    </div>
  </div>
  <div className="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<figure class="diff aspect-video" tabindex="0" aria-label="Before and after comparison">
  <div class="diff-item-1" aria-label="Before">
    <div class="bg-base-100 grid place-items-center text-4xl font-bold">
      Before
    </div>
  </div>
  <div class="diff-item-2" aria-label="After">
    <div class="bg-base-200 grid place-items-center text-4xl font-bold">
      After
    </div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

差分テキストの比較

コードまたはテキストの変更を並べて表示して、詳細な比較を行います。

const greeting = "Hello";
console.log(greeting);
let count = 0;
const greeting = "Hello World";
console.log(greeting);
let count = 1;
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<figure class="diff aspect-video" tabindex="0" aria-label="Code comparison: before and after changes">
  <div class="diff-item-1" aria-label="Before: original code">
    <div class="bg-base-100 p-4">
    <pre>const greeting = "Hello";
console.log(greeting);
let count = 0;</pre>
    </div>
  </div>
  <div class="diff-item-2" aria-label="After: updated code">
    <div class="bg-base-200 p-4">
    <pre>const greeting = "Hello World";
console.log(greeting);
let count = 1;</pre>
    </div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

カラーコーディングによる差分

セマンティックカラーを使用して、削除、追加、または変更されたコンテンツを強調表示します。

- const old = "value";
+ const updated = "value";
html 
1
2
3
4
5
6
7
8
9
<figure class="diff aspect-video" tabindex="0" aria-label="Color-coded diff: removed and added lines">
  <div class="diff-item-1" aria-label="Removed line">
    <div class="bg-error text-on-error p-4 font-mono">- const old = "value";</div>
  </div>
  <div class="diff-item-2" aria-label="Added line">
    <div class="bg-success text-on-success p-4 font-mono">+ const updated = "value";</div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

画像比較

ドラッグ可能なサイズ変更機能を使用して、前後の画像の視覚的な変化を比較します。

Original color photo
Grayscale version of the same photo
html 
1
2
3
4
5
6
7
8
9
<figure class="diff aspect-video" tabindex="0" aria-label="Image comparison: color versus grayscale">
  <div class="diff-item-1" aria-label="Before: color version">
    <img src="https://cdn.frutjam.com/images/photo-5.jpg?format=webp&width=800&height=450" alt="Original color photo" loading="lazy">
  </div>
  <div class="diff-item-2" aria-label="After: grayscale version">
    <img src="https://cdn.frutjam.com/images/photo-5.jpg?format=webp&saturation=-100&width=800&height=450" alt="Grayscale version of the same photo" loading="lazy">
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

差分サイズ

コンテナの幅と高さのユーティリティを使用して差分サイズを制御します。

Small
Diff
Medium
Diff
Large
Diff
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<figure class="diff aspect-video w-64" tabindex="0" aria-label="Small diff comparison">
  <div class="diff-item-1" aria-label="Before">
    <div class="bg-base-200 grid place-items-center text-base font-bold">Small</div>
  </div>
  <div class="diff-item-2" aria-label="After">
    <div class="bg-base-100 grid place-items-center text-base font-bold">Diff</div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

<figure class="diff aspect-video w-96" tabindex="0" aria-label="Medium diff comparison">
  <div class="diff-item-1" aria-label="Before">
    <div class="bg-base-200 grid place-items-center text-2xl font-bold">Medium</div>
  </div>
  <div class="diff-item-2" aria-label="After">
    <div class="bg-base-100 grid place-items-center text-2xl font-bold">Diff</div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

<figure class="diff aspect-video w-full" tabindex="0" aria-label="Large diff comparison">
  <div class="diff-item-1" aria-label="Before">
    <div class="bg-primary text-on-primary grid place-items-center text-4xl font-bold">Large</div>
  </div>
  <div class="diff-item-2" aria-label="After">
    <div class="bg-secondary text-on-secondary grid place-items-center text-4xl font-bold">Diff</div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な 差分 クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる