CSSで打ち消し線！text-decorationの使い方と活用テクニック徹底解説

打ち消し線（取り消し線）は、商品セールの旧価格表示や、変更点を視覚的に示す際など、Webページで非常に役立つ装飾表現です。CSSを使えば、HTMLタグを増やすことなく、テキストに打ち消し線を簡単に追加することができます。
この記事では、基本的な使い方から、デザイン性を高める応用テクニックまで、CSSの打ち消し線に関するノウハウをわかりやすく解説します。

CSSで打ち消し線を引く基本の書き方

打ち消し線を引くには、text-decorationプロパティを使用します。基本の構文は以下の通りです。

strikethrough {
  text-decoration: line-through;
}

このCSSクラスをHTML要素に適用することで、要素内のテキストに打ち消し線が表示されます。

<p class="strikethrough">この商品は販売終了しました。</p>

ブラウザによって若干の見た目の違いはありますが、基本的に中央を横切る1本線が表示されます。

text-decorationの構成と他の値

text-decorationには、複数の値をスペース区切りで指定することができます。例えば以下のように使えます。

.text-style {
  text-decoration: line-through underline;
}

この場合、テキストには打ち消し線と下線の両方が表示されます。

さらに、CSS3以降では、次のようにプロパティを細分化してコントロールすることも可能です。

  • text-decoration-line：装飾の種類（例: underline, overline, line-through）
  • text-decoration-style：線のスタイル（例: solid, dotted, dashed, wavy, double）
  • text-decoration-color：線の色
.fancy-strike {
  text-decoration-line: line-through;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

この例では、赤く波打つ打ち消し線が表示されます。

複数の要素に同時適用する方法

CSSクラスをうまく使えば、複数のHTML要素に対して一括で打ち消し線を適用できます。

.discount, .obsolete, .canceled {
  text-decoration: line-through;
}

このようにカンマで区切れば、複数のクラスにまとめてスタイルを適用できます。

<span class="discount">旧価格：3,000円</span>
<span class="canceled">この機能は廃止されました</span>

効率的にスタイルを管理するために、共通の意味を持たせたクラス名を使うと後々便利です。

JavaScriptと組み合わせて動的に打ち消し線を操作

CSSだけでなく、JavaScriptと連携させれば、動的に打ち消し線を付け外しすることもできます。例えば、クリックで取り消し状態を切り替えるようなケースです。

<p id="item">この項目を削除しますか？</p>
<button onclick="toggleStrike()">取り消し切替</button>

<script>
  function toggleStrike() {
    document.getElementById("item").classList.toggle("strikethrough");
  }
</script>

このようにclassList.toggle()を使えば、ユーザー操作に応じてスタイルを変更できます。タスク管理アプリやチェックリストでもよく使われる手法です。

デザインに差をつける！おしゃれな打ち消し線

text-decoration-styleやtext-decoration-colorを活用すれば、見た目に工夫を加えられます。

.strike-style {
  text-decoration-line: line-through;
  text-decoration-style: double;
  text-decoration-color: #999;
}

さらに、::after擬似要素を使って、画像風に見せることも可能です。

.custom-strike {
  position: relative;
}

.custom-strike::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: red;
}

この方法を使えば、CSSだけで完全オリジナルの装飾線を描画することも可能です。

注意点とブラウザ対応状況

text-decorationの基本的なプロパティは、主要なブラウザ（Chrome、Firefox、Safari、Edgeなど）で広くサポートされていますが、細かい装飾（特にtext-decoration-styleやtext-decoration-color）は、古いブラウザではうまく表示されない場合があります。

対応状況を事前にCan I useなどで確認すると安心です。また、line-throughが適用されない場合は、以下の点をチェックしましょう：

  • 要素がインラインでない（例：display: blockのまま）
  • 他のCSSプロパティで上書きされている
  • text-decoration: noneが指定されていないか

実用的な活用例とまとめ

最後に、実際の活用例をいくつか紹介します。

1. セール価格表示に：

<p><span class="strikethrough">5,000円</span> → <strong>3,000円</strong></p>

2. 完了済みのタスク表示に：

<li class="strikethrough">企画書の提出</li>

3. 旧情報の明示に：

<p>以前の仕様（<span class="strikethrough">2024年4月版</span>）から改訂されました。</p>

おわりに

CSSの打ち消し線は、シンプルながらも情報を伝えるためにとても有効なスタイル手法です。単に「取り消し線を引く」だけでなく、色やスタイルを工夫することで、より視覚的な魅力を持たせることも可能です。

ユーザーの理解を助けたり、デザイン性を高めたりと、幅広いシーンで活用できますので、ぜひご自身のWeb制作にも取り入れてみてください。

タイトルとURLをコピーしました