文字に線をつけたり、色を変えたり──こうした装飾をするのに使えるのが CSS の text-decoration プロパティです。この記事では、基本的な使い方から応用、注意点までを初心者にもわかりやすく解説します。

text-decorationって何？

text-decorationは、文字に「下線（underline）」「上線（overline）」「取り消し線（line-through）」などを付けたり、その色やスタイル（実線・点線など）を設定できるCSSのプロパティです。リンクや強調を視覚的にわかりやすく表示するのに使われます。

基本の使い方

/* 下線をつける */
a {
  text-decoration: underline;
}

/* 取り消し線 */
del {
  text-decoration: line-through;
}

/* 複数指定もOK */
p {
  text-decoration: overline underline;
}

色やスタイルも変えられる！

下線の色や見た目も指定可能です：

a {
  text-decoration-line: underline;
  text-decoration-color: #ff0000;   /* 赤い線 */
  text-decoration-style: dotted;    /* 点線 */
}

まとめて短く書く方法もある

CSS3からはショートハンドでまとめて指定ができます：

a {
  text-decoration: underline red dotted;
}

初心者が注意すべきポイント

• リンクに装飾を付けすぎると、読みづらくなることがある
• アクセシビリティ対応では「色だけでなく線の種類も区別できるように」するのが望ましい
• 古いブラウザではショートハンドに対応していない場合もあるので、必要に応じて分けて書くと安心

応用テクニック

• ホバー時に線の色やスタイルを変えて動きをつける
• リスト項目に装飾線を追加してデザイン性を高める
• SVG や Webフォントと組み合わせてオリジナル装飾を作る

HTMLでの使い方例（ホバー時）

a:hover {
  text-decoration: underline solid #0000ff;
}

おわりに

text-decorationはシンプルに見えてデザインに役立つ便利プロパティです。初めはリンクや強調だけに使い、慣れてきたら色や線のスタイルにも挑戦してみましょう。

次回は「text-decoration-skip-ink」や「text-underline-offset」を紹介して、よりおしゃれで読みやすいテキストデザインに深掘りしていきますので、お楽しみに！