更新箇所をユーザーに伝える！insタグとdelタグで変更履歴を可視化するUIの作り方

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、サイト上の更新箇所や修正履歴を可視化したいときに役立つHTMLタグ「ins」「del」の活用方法をご紹介します。

こういった場面で、「どこが変わったか」が一目でわかると、ユーザーへの信頼感もアップしますよね。

---

<ins> / <del> とは？

HTML5において、ins（挿入）と del（削除）は、テキストの変更を意味的にマークアップするタグです。

基本構文

 料金は <del>1,000円</del> <ins>800円</ins> に改定されました。 

これにCSSを加えることで、「打ち消し線＋追記」のように視覚的な履歴表示を実現できます。

---

CSSで変更箇所をわかりやすく装飾

delタグにはデフォルトで打ち消し線が付きますが、insタグには何の装飾もありません。
そこで、CSSを使って以下のような視覚効果をつけましょう。

CSS例：変更箇所のハイライト

del {
    text-decoration: line-through;
    color: #999;
    background-color: #fff0f0;
  }
  ins {
    text-decoration: none;
    color: #d00;
    background-color: #f0fff0;
    font-weight: bold;
  }

これで、削除箇所には打ち消し線＋薄赤背景、追加箇所には強調色＋薄緑背景がつき、読み手が直感的に変更を認識できるようになります。

---

実用パターン：Webサイトの変更履歴表示

実際のコンテンツ更新時には、次のような場面での使用が効果的です。

例1：利用規約の一部改定

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

例2：旧料金との比較

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

このように並列して表記することで、変更点がひと目で伝わりやすくなります。

例3：編集履歴を記事中に残す

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

これは、ブログ記事・公式発表・社内向けナレッジ共有などにもおすすめの使い方です。

---

応用：hover時の旧文表示など

「削除部分は常時見せたくないけど、必要なときだけ見せたい」

そんなときは title属性や hoverイベントを組み合わせても面白いです。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

これで、マウスオーバー時のみ旧情報が表示されるUIが作れます。

---

まとめ

insとdel は、HTML標準の機能でありながら意外と知られていない便利なタグです。
更新の可視化は信頼性の向上にもつながりますし、ユーザーにやさしい設計ができます。

地味だけど実力派のこのタグ、ぜひ日々の更新コンテンツやUI設計に取り入れてみてください。

 

satokotadesignキャンペーン実施中！