との違いは何ですか？

は、打ち消した価格のように、もう関係ないか正しくないものの文脈のために残すテキストを示します。は文書から削除されたテキストを示し、置き換えた内容を示すと並べることが多く、datetime と cite 属性を付けられます。

実行できるHTMLドキュメント: 下線と取り消し線

Q: HTML で文字に下線を引くには？

で囲むか、CSS で text-decoration: underline を指定します。 は綴りの誤りを示すなど固有の意味があるときだけ使い、見た目だけの下線なら や要素自体に CSS を指定します。

Q: HTML で取り消し線を引くには？

古い価格のようにもう正しくないテキストには を、編集で削除されたテキストには を使います。どちらもテキストの上に線を引きます。CSS では text-decoration: line-through で同じ見た目になります。

Q: タグは非推奨ですか？

いいえ。 は HTML 4 で非推奨になりましたが、HTML5 で新しい意味を持って復活しました。綴りの誤りや中国語の文中の固有名詞など、文字以外の注釈が付いたテキストを表します。有効なタグですが、適した場面はまれです。

Q: タグはどうなりましたか？

は廃止されています。ブラウザは今でも取り消し線を表示しますが、正しい HTML ではありません。意味に応じて か を使うか、text-decoration: line-through を使いましょう。

Q: と の違いは何ですか？

は、打ち消した価格のように、もう関係ないか正しくないものの文脈のために残すテキストを示します。 は文書から削除されたテキストを示し、置き換えた内容を示す と並べることが多く、datetime と cite 属性を付けられます。

HTML の下線と取り消し線: u、ins、s、del タグ

HTML で文字に下線を引くには か CSS の text-decoration を、取り消し線を引くには <s> か <del> を使います。各タグの意味、<ins> と <del> で編集を示す方法、リンクでないテキストに下線を引くと読み手が混乱する理由を解説します。

このページのコードはエディタで実行できます - 編集してすぐに結果を確認できます。

著者 Kevin Spektor, Co-founder & CTO

公開日：Sep 24, 2026

HTML で文字に下線を引く方法

方法は 2 つあります。 タグか、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: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

下線の問題は 3 行目にあります。読み手は下線のあるテキストをリンクだと思ってクリックします。普通のテキストに下線を引くのは、はっきりした理由があるときだけにしましょう。

u タグの意味

 は汎用の「下線」ボタンではありません。現在の HTML では、言葉にされていない注釈の付いたテキストを表します。「ここに何か特別なことがある」と示しつつ、それが何かは言わない印です。実際によく使われるのは次の場面です。

綴りの誤りを示す (ワープロのように、赤い波線で示すことが多い)。
中国語の文中の固有名詞を示す (中国語での組版の慣習)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

強調には  か  を (太字を参照)、本のタイトルには <cite> を使います。見た目だけがほしいなら CSS を使いましょう。

取り消し線: s と del

HTML にはテキストの上に線を引くタグが 2 つあり、意味が異なります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

タグ	意味	主な用途
`<s>`	もう正しくない、関係ないが、文脈のために残す	古い価格、売り切れのチケットの種類
`<del>`	文書から削除された	編集、変更履歴、ToDo リストの完了項目

ins と del で編集を示す

<ins> は <del> の相方で、追加されたテキストを示します。ブラウザは初期状態で下線を引きます。どちらも datetime (変更した日時) と cite (説明のある URL) を受け付けます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

この赤と緑のスタイルは、差分 (diff) でおなじみの見た目です。ins に text-decoration: none を指定して初期の下線を消し、リンクに見えないようにしています。

CSS で下線と取り消し線を引く

text-decoration はどの要素でも見た目の部分を担当します。色とスタイルを指定でき、text-decoration-thickness で太さを決めます。純粋に装飾のための線なら、これが適した方法です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

リンクの下線を消す方法、下線の位置、その他の text-decoration の詳細は CSS の下線のページで解説しています。

アクセシビリティ

<s>、<del>、<ins> へのスクリーンリーダーの対応はまちまちです。削除や挿入として読み上げるものもありますが、多くは普通のテキストとして読むので、聞き手には「価格 49 ドル 29 ドル」と聞こえ、どちらが現在の価格かわかりません。違いが重要なら、言葉でも伝えましょう。たとえば画面には表示せず読み上げだけされるテキストを使うか、単純に「通常 49 ドル、現在 29 ドル」と書きます。

よくある間違い

リンクでないテキストに下線を引く。 読み手がクリックしようとします。目立たせるなら太字、色、背景を使いましょう。
強調のために  を使う。  か  を使いましょう。
<strike> を使う。 廃止されています。<s>、<del>、text-decoration: line-through を使いましょう。
文書の履歴で削除した内容に <s> を使う。 それは <del> の役割で、いつ削除したかも記録できます。
線だけで意味を伝える。 多くのスクリーンリーダーは線を読み上げません。

よくある質問

HTML で文字に下線を引くには？

 で囲むか、CSS で text-decoration: underline を指定します。 は綴りの誤りを示すなど固有の意味があるときだけ使い、見た目だけの下線なら  や要素自体に CSS を指定します。

HTML で取り消し線を引くには？

古い価格のようにもう正しくないテキストには <s> を、編集で削除されたテキストには <del> を使います。どちらもテキストの上に線を引きます。CSS では text-decoration: line-through で同じ見た目になります。

タグは非推奨ですか？

いいえ。 は HTML 4 で非推奨になりましたが、HTML5 で新しい意味を持って復活しました。綴りの誤りや中国語の文中の固有名詞など、文字以外の注釈が付いたテキストを表します。有効なタグですが、適した場面はまれです。

<strike> タグはどうなりましたか？

<strike> は廃止されています。ブラウザは今でも取り消し線を表示しますが、正しい HTML ではありません。意味に応じて <s> か <del> を使うか、text-decoration: line-through を使いましょう。

<s> と <del> の違いは何ですか？

<s> は、打ち消した価格のように、もう関係ないか正しくないものの文脈のために残すテキストを示します。<del> は文書から削除されたテキストを示し、置き換えた内容を示す <ins> と並べることが多く、datetime と cite 属性を付けられます。