【CSS】text-decorationとは？下線を消す・色や太さを変える書き方

text-decorationは、文字に下線・上線・取り消し線などの装飾線を付けるCSSプロパティです。特に初心者の方は、aタグの下線を消すためにtext-decoration: none;を書く場面が多いですが、実務では「下線を消すだけ」で終わらせない方がよいケースもあります。

この記事では、text-decorationの基本の書き方、リンク下線の消し方、下線の色・太さ・位置の調整、効かない原因まで解説します。

CSSのtext-decorationとは？

text-decorationとは、文字に装飾線を付けるCSSです。

a {
  text-decoration: underline;
}

この例では、リンク文字に下線が付きます。

よく使う値一覧

まずは、よく使う値を押さえましょう。

値	意味	使う場面
underline	下線を付ける	リンク、強調テキスト
none	装飾線を消す	ナビ、ボタン型リンク
line-through	取り消し線を付ける	旧価格、削除済みの表現
overline	上線を付ける	装飾的な見出し

実務で最もよく使うのは、リンク下線のunderlineと、下線を消すnoneです。

aタグの下線を消す方法

リンクの下線を消したい場合は、aタグにtext-decoration: none;を指定します。

<a class="button-link" href="#">詳しく見る</a>

.button-link {
  text-decoration: none;
}

ボタン型リンクではnoneを使うことが多い

ボタンのように背景色や枠線でクリックできることが伝わる場合、下線を消しても自然です。

.button-link {
  display: inline-block;
  padding: 12px 24px;
  background: #1f7a8c;
  color: #fff;
  text-decoration: none;
}

文章中のリンク下線を消す場合は注意が必要です。色だけでリンクを判断させると、ユーザーがリンクに気づきにくくなることがあります。

文章中のリンクで下線を消す際の注意点（アクセシビリティ）

文章中のリンク下線を消す場合は注意が必要です。Webアクセシビリティのガイドライン（WCAG）でも、「色だけでリンク（構成要素）を判断させてはならない」と定められています。

色覚特性を持つユーザーや、日差しの強い屋外で画面を見ているユーザーにとって、下線のない青文字は通常の黒文字と区別がつきにくく、リンクだと気づかれない原因になります。そのため、文章中のリンクは原則として下線を残すか、次に紹介する「hover時だけ下線を出す」などの工夫をセットで行いましょう。

hover時だけ下線を出す

通常時は下線を消し、hover時だけ下線を出す方法もあります。

.text-link {
  color: #1f7a8c;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

文章中のリンクでは、下線・色・hoverの変化を組み合わせて、リンクだと分かる見た目にすることが大切です。

下線の色・太さ・位置を変える方法

最近のCSSでは、下線の色・太さ・位置を細かく調整できます。

下線の色を変える

text-decoration-colorを使うと、文字色とは別に下線の色を指定できます。

.marker-link {
  color: #333;
  text-decoration: underline;
  text-decoration-color: #e6a700;
}

下線の太さを変える

text-decoration-thicknessを使うと、下線の太さを調整できます。

.marker-link {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

下線と文字の距離を変える

text-underline-offsetを使うと、文字と下線の距離を調整できます。

.marker-link {
  text-decoration: underline;
  text-underline-offset: 4px;
}

下線をおしゃれに見せたい場合は、text-decoration-color、text-decoration-thickness、text-underline-offsetを組み合わせると調整しやすいです。

text-decorationのショートハンド

text-decorationは、線の種類・色・スタイル・太さをまとめて指定できます。

.link {
  text-decoration: underline #e6a700 2px;
}

また、波線にすることもできます。

.error-text {
  text-decoration: underline wavy #d93025;
}

 ショートハンドを使う時の「上書きの罠」に注意

ショートハンドは便利ですが、記述を省略したプロパティは「初期値（noneや現在の文字色など）」に自動リセットされるという仕様があります。

例えば、すでに過去のCSSで太さや色が細かく指定されていた場合、あとから text-decoration: underline; とだけショートハンドで書くと、それまで設定されていた色や太さがすべてリセット（初期化）されてしまいます。

そのため、実務で「下線の種類だけを上書きしたい」という場合は、個別プロパティを使って分けて書いた方が安全です。

/* 安全に一部だけを変更したい場合 */
.link {
  text-decoration-line: underline;
  text-decoration-color: #e6a700;
  text-decoration-thickness: 2px;
}

text-decorationが効かない原因と対策

text-decorationが効かない場合は、次の原因を確認しましょう。

原因1：親ではなく子要素に別指定がある

リンクの中にspanなどがあり、子要素側で別の装飾が指定されていると、見た目が想定と違う場合があります。

<a class="link" href="#">
  <span>詳しく見る</span>
</a>

.link {
  text-decoration: underline;
}

.link span {
  text-decoration: none;
}

検証機能で、どの要素に装飾線が付いているか確認しましょう。

原因2：CSSの優先順位で上書きされている

WordPressテーマやボタン用CSSで、あとからtext-decoration: none;が指定されている場合があります。

.post-content a {
  text-decoration: underline;
}

.button a {
  text-decoration: none;
}

リンク装飾が効かないときは、テーマ側のaタグ指定やボタン用クラスに上書きされていないか確認しましょう。

原因3：text-underline-offset を指定したのに線が消える・効かない

下線の位置を調整できる便利なtext-underline-offsetですが、「数値を大きくしたら下線が消えてしまった」「まったく位置が変わらない」というトラブルが実務でよく発生します。

この原因は、指定している要素が<span>や<a>などのインライン要素のままであるためです。

これを解決するには、以下のように要素を インラインブロック要素 に変更し、高さをしっかりと持たせる必要があります。

/* 下線が消えてしまう時の解決コード例 */
.marker-link {
  display: inline-block; /* インラインブロックにして高さを認識させる */
  text-decoration: underline;
  text-underline-offset: 6px; /* これで正しく位置が下にズレる */
}

文字と下線の距離を広げたい時は、セットで display: inline-block; を指定する、という実務の定番テクニックを覚えておきましょう。

実務でのtext-decoration使い分け

text-decorationは、単に下線を消すだけでなく、リンクの分かりやすさを保つために使います。

場面	おすすめ	理由
本文中リンク	下線あり、またはhoverで下線	リンクだと伝わりやすい
ボタン型リンク	none	背景や枠でクリック要素だと分かる
旧価格	line-through	取り消された情報だと分かる
強調リンク	太め・色付き下線	視線を集めやすい

公式ドキュメントも確認する

text-decorationの仕様を正確に確認したい場合は、MDN Web Docsの公式情報も参考になります。

• MDN Web Docs text-decoration
• MDN Web Docs text-decoration-thickness
• MDN Web Docs text-underline-offset

まとめ：text-decorationはリンクの分かりやすさも考えて使おう

この記事では、CSSのtext-decorationについて解説しました。

text-decorationは、下線・取り消し線・上線など、文字の装飾線を指定するCSSです。リンクの下線を消すだけならtext-decoration: none;で対応できます。ただし、本文中のリンクで下線を消すと、リンクだと気づかれにくくなる場合があります。

実務では、本文中リンクは下線やhoverで分かりやすく、ボタン型リンクは下線なしにするなど、場面ごとに使い分けましょう。