スタイルシートで文字色と打消し線の色を別々にする方法｜CSSでの実装と注意点

文字に打消し線（取り消し線）を入れたとき、「文字の色は黒のまま、線だけ赤にしたい」と思ったことはありませんか？
CSSで text-decoration を使うと簡単に打消し線は付けられますが、文字色と線の色を別々にする方法は少し分かりづらく、調べても情報が断片的で迷いやすいポイントです。

この記事では、

• 文字色と打消し線の色を分ける具体的な方法

• うまくいかない原因とその対処

• 実務で使いやすい書き方

を、Web制作の現場目線でわかりやすくまとめています。

「とりあえず動くコード」だけでなく、後から修正しやすい書き方も紹介しているので、コーディングに慣れていない方でも安心して使える内容です。

結論：text-decoration-colorを使えば分けられる

打消し線の色を文字色と分けたい場合は、以下のように指定します。

• text-decoration: line-through;

• text-decoration-color: 任意の色;

例えばこんな感じです。

・文字色：黒
・打消し線：赤

これで、文字は黒のまま、線だけ赤に変わります。

1000円

ただし、環境や書き方によっては反映されないこともあるため、もう少し詳しく見ていきます。

text-decorationだけでは色が分けられない理由

従来のCSSでは、text-decoration は以下のような扱いでした。

• 線の種類（underline・line-throughなど）

• 色（文字色と同じになる）

つまり、線の色を単独で指定できなかったという背景があります。

現在はCSSの仕様が拡張され、以下のように分割して指定できるようになりました。

• text-decoration-line

• text-decoration-color

• text-decoration-style

このうち、色を制御するのが text-decoration-color です。

実務で使いやすい書き方

基本パターン

シンプルで読みやすく、保守もしやすい書き方です。

一括指定（ショートハンド）

短く書けますが、後から個別に調整したい場合は分けて書いた方が管理しやすいです。

うまく反映されないときのチェックポイント

実際の制作現場では「書いたのに効かない」というケースもあります。
よくある原因はこちらです。

CSSの上書き

別のスタイルが後から適用されている可能性があります。

・検証ツールで確認
・!important の多用は避ける

displayの影響

inline のままだと調整しづらいこともあります。

に変更すると改善するケースがあります。

古いブラウザ対応

text-decoration-color は比較的新しいプロパティです。
そのため、極端に古い環境では対応していない可能性があります。
その場合は、以下のような代替手段も検討できます。

代替方法：擬似要素で線を作る

どうしても細かく制御したい場合は、疑似要素を使います。

この方法だと、

• 線の太さ

• 位置

• 色

を自由に調整できます。
その分、少しコードは増えます。

デザインによって使い分ける

実際の制作案件で「セール価格の表現」を作るときに、「通常価格は黒文字＋赤の打消し線」という指定がありました。
最初は text-decoration だけで対応しようとして上手くいかず、結果的に text-decoration-color を使うことでシンプルに解決できました。
ただし、デザインによっては線の位置を細かく調整したいケースもあり、そのときは疑似要素で対応しています。

「とりあえず動く」だけでなく、「あとで直しやすいか」も意識して選ぶと、後工程が楽になります。

コーディングで意識したいポイント

• デザイン再現だけでなく保守性も考える

• ショートハンドは便利だが使いどころを選ぶ

• チーム開発では分かりやすさを優先する

ちょっとしたCSSでも、積み重なると大きな差になります。

まとめ

文字色と打消し線の色を分けるには、

• text-decoration-color を使う

• 必要に応じて疑似要素で対応する

この2つを押さえておけば、ほとんどのケースに対応できます。
「なんとなく動いたコード」ではなく、意図を理解して使えるようになると、コーディングのストレスがかなり減ってきます。

ホームページ制作やコーディングでお困りの方へ

CSSの細かい調整や、思った通りに表示されない不具合は、意外と時間を取られがちです。

「自分で調べながら進めるのが難しい」
「サイト全体の設計から見直したい」

そんな場合は、プロに相談することでスムーズに解決できる可能性があります。

ホームページ制作や改善については、株式会社ナンクマのサービスページでも詳しくご案内しています。
ホームページ制作のご案内

小さな修正からサイト全体の設計まで、状況に合わせたご提案が可能です。
まずはお気軽にご相談ください。
お問い合わせフォームはこちら（24時間受付中）