【CSS】text-decoration の使い方｜下線・取り消し線の種類・色・太さ・位置を調整する

テキストに下線を引いたり、取り消し線を入れたりするときに使うのが text-decoration プロパティです。単に線を付けるだけでなく、波線や点線といった線の種類、線の色や太さ、文字との距離まで細かく調整できます。この記事では text-decoration-line・text-decoration-style・text-decoration-color・text-decoration-thickness・text-underline-offset の役割を、実際に表示を見比べながら解説します。リンクの下線を消す方法や、線が反映されないときの原因にも触れます。

text-decoration でできること

text-decoration は、文字に「装飾の線」を付けるためのプロパティです。下線・上線・取り消し線といった線の位置、実線や波線などの線種、線の色や太さ、そして線と文字の間隔を組み合わせて表現できます。リンク（a 要素）に最初から付いている下線も、この text-decoration によるものです。

もともとは text-decoration: underline; のように一括で書く一つのプロパティでしたが、現在は線の種類・スタイル・色・太さがそれぞれ独立したプロパティに分かれています。text-decoration はそれらをまとめて指定できる一括指定（ショートハンド）として使えます。まずは個別のプロパティを順番に見ていきましょう。

text-decoration-line で線の位置を決める

text-decoration-line は、どこに線を引くかを指定するプロパティです。文字の下に引くなら underline、上に引くなら overline、文字の中央に引いて打ち消すなら line-through を指定します。値の対応は次のとおりです。

/* 文字の下に下線を引く */
.note {
  text-decoration-line: underline;
}

/* 取り消し線を引く */
.deleted {
  text-decoration-line: line-through;
}

underline と overline のように、スペースで区切って複数の値を並べることもできます。次の例では、文字の上と下の両方に線が引かれます。

/* 上線と下線を同時に付ける */
.highlight {
  text-decoration-line: underline overline;
}

style・color・thickness で線の見た目を変える

線を引く位置が決まったら、その線の見た目を整えます。線の種類は text-decoration-style、色は text-decoration-color、太さは text-decoration-thickness で指定します。

text-decoration-style で線の種類を選ぶ

text-decoration-style は、線を実線にするか、波線や点線にするかを指定します。初期値は solid（実線）です。指定できる値は次のとおりです。

とくに wavy は、スペルミスの指摘や注意書きの強調などでよく見かける表現です。

text-decoration-color と text-decoration-thickness

text-decoration-color には線の色を、text-decoration-thickness には線の太さを指定します。色を省略すると、文字の色（currentColor）と同じになります。太さは 2px のような長さのほか、auto（ブラウザに任せる）や、フォントサイズを基準にした from-font なども指定できます。

.marker {
  text-decoration-line: underline;
  text-decoration-style: wavy;     /* 波線にする */
  text-decoration-color: #e8506e;  /* 線だけ赤系の色に */
  text-decoration-thickness: 3px;  /* 線を太く */
}

文字色とは別に線の色を変えられるのがポイントです。黒い文字に赤い波線を引く、といった表現も text-decoration-color だけで実現できます。

text-underline-offset で下線を文字から離す

下線が文字に近すぎて読みにくいと感じることがあります。そのときに使うのが text-underline-offset です。このプロパティは下線と文字の間隔を調整するもので、値を大きくするほど下線が文字から離れます。なお、これは下線（underline）専用で、text-decoration のショートハンドには含まれない独立したプロパティです。

.spaced {
  text-decoration-line: underline;
  text-underline-offset: 6px;  /* 下線を文字から 6px 下げる */
}

ひらがなや漢字のように、文字の下端ぎりぎりに下線が来ると窮屈に見えがちなので、少し離すと読みやすくなります。

下線スタイルの違いを見比べる

ここまで紹介したプロパティを組み合わせると、下線にもさまざまなバリエーションが作れます。実際の表示を下のデモで確認してみてください。CSS タブの値を書き換えれば、線の種類や色・太さ・位置がどう変わるかをその場で試せます。

<div class="demo">
  <p class="solid">これは下線（solid）です</p>
  <p class="wavy">これは波線（wavy）です</p>
  <p class="dotted">これは点線（dotted）です</p>
  <p class="dashed">これは破線（dashed）です</p>
  <p class="double">これは二重線（double）です</p>
  <p class="thick">太さと色を変えた下線</p>
  <p class="offset">下線の位置を下げた例</p>
  <p class="strike">取り消し線（line-through）です</p>
</div>

.demo {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 2.4;
}

/* text-decoration-style で線の種類を変える */
.solid {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

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

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

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

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

/* 色と太さをまとめて指定 */
.thick {
  text-decoration-line: underline;
  text-decoration-color: #e8506e;
  text-decoration-thickness: 3px;
}

/* text-underline-offset で下線を文字から離す */
.offset {
  text-decoration-line: underline;
  text-underline-offset: 6px;
}

/* line-through は取り消し線 */
.strike {
  text-decoration-line: line-through;
  text-decoration-color: #888;
}

4つの値をまとめて書くショートハンド

線の位置・種類・色・太さは、text-decoration 一つにまとめて書けます。値はスペースで区切って並べ、順番は自由です。

/* line / style / color / thickness をまとめて指定 */
.marker {
  text-decoration: underline wavy #e8506e 3px;
}

/* 上の指定は次の4行と同じ意味 */
.marker {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #e8506e;
  text-decoration-thickness: 3px;
}

ただし先に触れたとおり、text-underline-offset はこのショートハンドに含まれません。下線の位置を調整したいときは、text-decoration とは別に text-underline-offset を書き足す必要があります。

リンクの下線を消したいとき

a 要素には、ブラウザの初期スタイルで下線が付いています。この下線を消したいときは、線そのものを「付けない」を意味する none を指定します。

/* リンクの下線を消す */
a {
  text-decoration: none;
}

/* マウスを乗せたときだけ下線を出す */
a:hover {
  text-decoration: underline;
}

ナビゲーションメニューやボタン風のリンクでは下線が邪魔になることが多いので、text-decoration: none; で消し、ホバー時だけ下線を出すといった使い分けがよく行われます。ただし、本文中のリンクから下線を消すと、どこがリンクなのか分かりにくくなることがあります。色だけで区別するとアクセシビリティの面で不親切になりやすいので、本文リンクは下線を残すか、別の手がかりを用意しておくと安心です。

線が表示されない・反映されないとき

子要素に上書きされて消えていないか

親要素に text-decoration: underline; を付けたのに、一部の文字だけ下線が出ない、という場合があります。これは内側の要素に text-decoration: none; が指定されていたり、その要素自身が別の text-decoration を持っていたりするためです。たとえば見出しの中のリンクは、リンク側のスタイルが優先されて親の下線が引き継がれないことがあります。意図どおりに線を出したいときは、線を付けたい要素そのものに指定するのが確実です。

display の指定で効き方が変わる

text-decoration は文字に対する装飾なので、対象は基本的にテキストを含む要素です。span のようなインライン要素や、テキストを持つブロック要素では問題なく線が引かれます。一方で、中身が空の要素や、画像だけを置いた要素には線が表示されません。線を引きたいのに反映されないときは、その要素に実際にテキストが入っているか、また display: block や inline-block などの指定で範囲がずれていないかを確認してみてください。

thickness や offset が古い環境で無視される

text-decoration-thickness や text-underline-offset は比較的新しいプロパティで、現在の主要ブラウザでは使えますが、かなり古い環境では無視されることがあります。これらが効かない場合でも下線そのものは表示されるため、太さや位置の調整は「対応していれば見栄えが良くなる」程度の補助的な指定として考えておくと安心です。

まとめ

text-decoration は、文字に線を付けて装飾するためのプロパティです。要点を振り返ります。

• text-decoration-line で underline・overline・line-through の線の位置を指定する
• text-decoration-style で solid・double・dotted・dashed・wavy の線種を選ぶ
• text-decoration-color と text-decoration-thickness で線の色と太さを変える
• 下線と文字の間隔は text-underline-offset で調整する（ショートハンドには含まれない）
• リンクの下線は text-decoration: none; で消せるが、本文リンクは下線を残すと親切

まずは text-decoration-line で線を出し、そこから種類・色・太さ・位置を足していくと、迷わず思いどおりの装飾に近づけます。

参考ページ

• text-decoration – CSS: カスケーディングスタイルシート | MDN
• text-decoration-line – CSS: カスケーディングスタイルシート | MDN
• text-decoration-style – CSS: カスケーディングスタイルシート | MDN
• text-underline-offset – CSS: カスケーディングスタイルシート | MDN