CSSのtext-decorationの使い方を完全ガイド！初心者でもわかる下線と取り消し線の設定

テキストの装飾（text-decoration）を使った下線・取り消し線

先生と生徒の会話形式で理解しよう

生徒

「CSSで文字に下線をつけたり、取り消し線を引いたりできますか？」

先生

「できますよ。text-decorationというプロパティを使えば簡単にできます。」

生徒

「text-decorationって、どうやって使えばいいんですか？」

先生

「では、基本的な使い方から丁寧に説明していきますね。」

1. CSSで文字に下線をつけるには？

文字の下に線を引きたいとき、CSSではtext-decorationプロパティを使って下線（アンダーライン）をつけることができます。

例えば、リンクのように見せたい文字に下線をつける場合に便利です。


<style>
    .underline-text {
        text-decoration: underline;
    }
</style>

<p class="underline-text">この文章には下線がついています。</p>

ブラウザ表示

2. CSSで取り消し線をつける方法

文字に取り消し線（横線）をつけたい場合も、同じくtext-decorationプロパティを使います。取り消し線は「打ち消し」を意味し、「もう使わない」「間違っている」といった印象を与えます。


<style>
    .line-through-text {
        text-decoration: line-through;
    }
</style>

<p class="line-through-text">この文章には取り消し線がついています。</p>

ブラウザ表示

3. 下線と取り消し線を同時につけるには？

text-decorationプロパティには複数の値を指定することができます。そのため、下線と取り消し線を同時につけることも可能です。


<style>
    .underline-strike {
        text-decoration: underline line-through;
    }
</style>

<p class="underline-strike">この文章には下線と取り消し線が両方ついています。</p>

ブラウザ表示

4. text-decorationを使うときの注意点

text-decorationを使う際、装飾の効果はタグの中の文字全体にかかることになります。

たとえば、段落全体に適用した場合、段落のすべての文字に線がつきます。一部の文字だけに装飾したいときは、spanタグを使ってその部分だけを囲み、クラスを適用するのがポイントです。


<style>
    .underline-only {
        text-decoration: underline;
    }
</style>

<p>この文章の中の<span class="underline-only">この部分だけ</span>に下線をつけています。</p>

ブラウザ表示

5. text-decorationを解除するには？

既についている下線や取り消し線を外したい場合は、text-decorationの値をnoneにします。

たとえば、aタグ（リンク）は自動で下線がついていますが、それを非表示にしたい場合に便利です。


<style>
    a {
        text-decoration: none;
    }
</style>

<a href="#">このリンクには下線がありません</a>

ブラウザ表示

6. よくある疑問と解説

プログラミング初心者の方からよくある質問をいくつかご紹介します。

「text-decoration: underline;」と「border-bottom: 1px solid;」の違いは？
下線はどちらでも見た目は似ていますが、text-decorationはテキストに対する線で、borderはボックス（枠）に対する線です。意味が違います。
全部の文字に線がついてしまうのを避けたい
一部だけに装飾したい場合は、spanタグで囲む方法を使いましょう。