実行できるCSSドキュメント: CSS 下線

Q: CSS でテキストに下線を引くには？

要素に text-decoration: underline; を指定します。線の見た目は text-decoration-color、text-decoration-style、text-decoration-thickness、text-underline-offset で調整します。

Q: リンクの下線を消すには？

a 要素に text-decoration: none; を指定します。多くの読み手は下線でリンクを見つけるので、別の方法でリンクが目立つようにしましょう (色を変え、ホバーやフォーカスのときに下線を出すなど)。

Q: 下線の色を変えるには？

text-decoration-color か、ショートハンドを使います: text-decoration: underline #f59e0b;。指定しなければ、線は文字色になります。

Q: テキストと下線の間を空けるには？

text-underline-offset を使います。例: text-underline-offset: 4px;。値を大きくするほど、線がテキストから離れて下がります。

Q: 子要素の下線を消せないのはなぜですか？

親が引いた下線は子要素をまたいで描かれ、子要素の中からは消せません。下線を指定している要素で消すか、子要素を display: inline-block にしましょう。親の装飾は inline-block には届きません。

CSS で下線を引く方法

text-decoration: underline はテキストの下に線を引きます。色を指定しなければ、線は文字色になります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    .under { text-decoration: underline; }
    .styled {
      text-decoration: underline wavy #f59e0b;
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }
  </style>
</head>
<body>
  <p class="under">A plain underline</p>
  <p class="styled">A wavy amber underline, 2px thick, 5px below</p>
</body>
</html>

2 行目は text-decoration のショートハンドで線の位置、種類、色を指定し、太さと位置は専用のプロパティで指定しています。仕様ではショートハンドの中に太さを書くこともできますが、Safari は太さを含めると宣言全体を捨てるので、text-decoration-thickness は別に書きましょう。

text-decoration のプロパティ

プロパティ	値	初期値
`text-decoration-line`	`underline`, `overline`, `line-through`, `none` (組み合わせ可)	`none`
`text-decoration-style`	`solid`, `double`, `dotted`, `dashed`, `wavy`	`solid`
`text-decoration-color`	任意の色	`currentColor` (文字色)
`text-decoration-thickness`	長さ、パーセント、`auto`、`from-font`	`auto`
`text-underline-offset`	長さ、パーセント、`auto`	`auto`

text-decoration は最初の 4 つのショートハンドですが、太さは入れないでください。Safari は太さを含む text-decoration の宣言を無視します。text-underline-offset は別のプロパティなので、単独で書く必要があります。

線の種類、色、太さ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline styles</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    p { margin: 10px 0; text-decoration-line: underline; }
    .solid { text-decoration-style: solid; }
    .double { text-decoration-style: double; }
    .dotted { text-decoration-style: dotted; }
    .dashed { text-decoration-style: dashed; }
    .wavy { text-decoration-style: wavy; text-decoration-color: #dc2626; }
    .thick { text-decoration-thickness: 4px; text-decoration-color: #2563eb; }
  </style>
</head>
<body>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="wavy">wavy and red, like a spelling error</p>
  <p class="thick">4px thick and blue</p>
</body>
</html>

下線の位置を動かす: text-underline-offset

初期状態では線は文字のすぐ近くにあり、g、p、y などのディセンダー (ベースラインより下に出る部分) を避けて途切れます。text-underline-offset で線をさらに下げると、見出しやリンクがすっきり見えることがよくあります:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline offset</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; color: #111827; }
    p { text-decoration: underline #2563eb; text-decoration-thickness: 2px; margin: 12px 0; }
    .o2 { text-underline-offset: 2px; }
    .o6 { text-underline-offset: 6px; }
    .o10 { text-underline-offset: 10px; }
  </style>
</head>
<body>
  <p>Typography (auto)</p>
  <p class="o2">Typography (2px)</p>
  <p class="o6">Typography (6px)</p>
  <p class="o10">Typography (10px)</p>
</body>
</html>

ディセンダーの周りの切れ目は、初期状態で有効な text-decoration-skip-ink: auto によるものです。途切れない線にするには none を指定します。

リンクの下線を消す

リンクにはブラウザのスタイルシートで下線が付いています。text-decoration: none で消せます。多くの読み手は下線でリンクを見つけるので、ホバーとキーボードフォーカスのときに下線を戻し、リンクには本文と違う色を付けましょう:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link underlines</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; color: #111827; }
    nav a {
      color: #2563eb;
      text-decoration: none;
      margin-inline-end: 16px;
    }
    nav a:hover,
    nav a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" id="first">Home</a>
    <a href="#docs">Docs</a>
    <a href="#blog">Blog</a>
  </nav>
  <p>Links in a paragraph, like <a href="#more">this one</a>, keep their underline.</p>
</body>
</html>

ナビゲーションバーやボタンは下線を消してもよい場所です。位置そのものが「リンク」であることを示しているからです。文章の段落の中では下線を残しましょう。リンクの状態については hover のページで詳しく解説しています。

上線と取り消し線

text-decoration-line はテキストの上や中央にも線を引けて、複数の値を指定できます:

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

CSS の取り消し線は見た目だけです。削除された内容 (変更された価格、取り除かれた項目) なら、HTML の下線のページのように <s> や <del> でマークアップし、意味をスタイルだけでなくマークアップにも持たせましょう。

よくある間違い

見た目のために <u> で下線を引く。 <u> はスペルミスのように、ほかと異なると印を付けたテキスト用です。デザインとしての下線には CSS を使いましょう。
リンクではないテキストに下線を引く。 読み手はクリックしようとします。強調には太字、色、背景を使いましょう。
本文中のリンクの下線を、ほかの手がかりなしで消す。 違いが見えない読み手には、色だけでは足りません。
親の下線を子要素から消そうとする。 内側からは取り消せません。親を変えるか、子要素を inline-block にしましょう。
text-underline-offset をショートハンドに入れられると思う。 独立したプロパティです。
ショートハンドに太さを入れる。 text-decoration: underline 2px は Chrome と Firefox では動きますが、Safari は宣言全体を捨てます。text-decoration-thickness を使いましょう。

よくある質問

CSS でテキストに下線を引くには？

要素に text-decoration: underline; を指定します。線の見た目は text-decoration-color、text-decoration-style、text-decoration-thickness、text-underline-offset で調整します。

リンクの下線を消すには？

a 要素に text-decoration: none; を指定します。多くの読み手は下線でリンクを見つけるので、別の方法でリンクが目立つようにしましょう (色を変え、ホバーやフォーカスのときに下線を出すなど)。

下線の色を変えるには？

text-decoration-color か、ショートハンドを使います: text-decoration: underline #f59e0b;。指定しなければ、線は文字色になります。

テキストと下線の間を空けるには？

text-underline-offset を使います。例: text-underline-offset: 4px;。値を大きくするほど、線がテキストから離れて下がります。

子要素の下線を消せないのはなぜですか？

親が引いた下線は子要素をまたいで描かれ、子要素の中からは消せません。下線を指定している要素で消すか、子要素を display: inline-block にしましょう。親の装飾は inline-block には届きません。