リンクの下線を消したい、文字に取り消し線を入れたい──そんなときに活躍するのがCSSの text-decoration プロパティです。
見た目だけでなく、情報の伝達にも役立つ便利なプロパティなので、初心者の方にもぜひ覚えてほしい内容です。

text-decorationとは？

text-decorationは、文字に下線・上線・取り消し線などの装飾を付けるためのCSSプロパティです。
通常、HTMLの<a>タグ（リンク）には下線が自動的に表示されますが、このプロパティを使えば装飾を自由にカスタマイズできます。

例えば「キャンペーン価格の取り消し線」「注目テキストへの下線」など、意味を視覚的に伝える演出として活用できます。

主な指定値

よく使うパターン

① リンクの下線を消す

デザインによっては、リンクの下線が不要な場合もあります。

a {
  text-decoration: none;
}

② 強調テキストに下線をつける

重要なワードに下線を加えて、目を引くようにします。

.important {
  text-decoration: underline;
}

③ セール価格の取り消し線

旧価格や終了したプランなどに使われる取り消し線の例です。

.old-price {
  text-decoration: line-through;
}

応用：色やスタイルも指定できる

text-decorationは、CSS3以降で詳細な指定ができるようになりました。たとえば、線の色やスタイルを変えることで、よりデザイン性の高い表現が可能になります。

.custom-link {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

wavyは波打つような下線です。他にもdashed（破線）、dotted（点線）なども選べます。

初心者が気をつけたいポイント

• リンクの識別性を保つ：下線を消す場合はホバー時の色変化などで「リンクだと分かる工夫」を
• アクセシビリティ：色だけでなく、線の種類でも意味が伝わるようにする
• 複数指定のときはtext-decorationショートハンドの順番に注意（例：underline red solid）

おわりに

text-decorationは、テキストに意味や装飾を加える重要なプロパティです。リンクの見た目を整えたり、取り消し価格を表示したりと、実務でも頻繁に使われます。

基本の使い方に慣れてきたら、色・スタイルの指定やホバー時の変化など、より多彩な演出にもチャレンジしてみましょう。

次回は、下線の位置を調整できるtext-underline-offsetや、インクのかすれを回避するtext-decoration-skip-inkについても解説していきます！