過去バージョン

ins 要素とは

は Inserted Text（挿入されたテキスト）を意味する HTML 要素で、文書のある時点で追加された部分を示します。対になる （Deleted Text）と組合せて、変更履歴・差分表示・改訂版を表現するのが本来の用途です。

  価格は
  1,000円
  1,200円
  に改定されました。



  サポート対象は
  IE11 まで
  Edge 以降
  です。

属性

datetime の書式

2026-06-11                       日付のみ
2026-06-11T10:30:00              日時（ローカル時刻、タイムゾーンなし）
2026-06-11T10:30:00Z             UTC（Z）
2026-06-11T10:30:00+09:00        日本時間
2026-06-11 10:30:00+09:00        スペース区切りでも可（HTML5）

表示の既定値

ブラウザ既定のスタイル:

カスタムスタイル例

/* Git diff 風 */
ins {
  background: #e6ffec;
  color: #1a7f37;
  text-decoration: none;
  padding: 0 2px;
}
ins::before { content: "+ "; }

del {
  background: #ffebe9;
  color: #cf222e;
  text-decoration: line-through;
  padding: 0 2px;
}
del::before { content: "- "; }

/* Wikipedia 風（控えめ） */
ins { background: #d4f4dd; text-decoration: none; }
del { color: #999; }

/* リンクと衝突しないよう下線を消す */
a ins, ins a { text-decoration: none; }

典型的なユースケース

• 利用規約・プライバシーポリシーの改訂: 旧文を 、新文を で並記
• 料金改定のお知らせ: 1,000円 → 1,200円 の差し替え
• Wiki / 議事録の編集履歴: 「○○ を △△ に修正」
• Git / PR の差分表示: 行単位の追加・削除を / でセマンティックに
• 校正・赤入れの可視化: 編集者が手を入れた箇所を明示
• テストの「期待 vs 実際」: 期待値を 、実際を で見せる

ブロックレベルでも使える

HTML5 では / はインラインでもブロックでも使える「透過要素」になりました。段落丸ごと挿入・削除も可:

  
新しい段落をここに追加。
  

    
箇条書きも丸ごと挿入
  




  
この段落はもう不要になりました。

関連要素との違い

使い分けのポイント: 「履歴を残したい」なら ins/del、「単に取り消し線が欲しい」（在庫切れの値段等）は 、「強調」は や 。

/* スクリーンリーダーにも編集状態を伝える */
ins::before {
  content: " 挿入: ";
  position: absolute;
  left: -9999px;   /* 視覚的には隠す */
}
ins::after { content: " "; }
del::before {
  content: " 削除: ";
  position: absolute;
  left: -9999px;
}

// jsdiff ライブラリで diff を ins/del で表示
import * as Diff from 'diff';

const oldText = 'これは古いテキストです。';
const newText = 'これは新しいテキストです。';

const diff = Diff.diffChars(oldText, newText);

const html = diff.map(part => {
  if (part.added) return `${part.value}`;
  if (part.removed) return `${part.value}`;
  return part.value;
}).join('');

document.getElementById('output').innerHTML = html;