HPBUILD

リンクの下線を消したい、文字に取り消し線を入れたい——そんなときに便利なのが CSSのtext-decoration プロパティです。 テキストの装飾を簡単にコントロールできるこのプロパティについて、この記事でわかりやすく解説します。 text-decorationとは？ text-decorationは、文字に下線・上線・取り消し線などをつけるCSSプロパティです。 通常はリンクに自動で適用されていますが、自分でコントロールすることでデザイン性が高まります。 主な指定値 値効果 none装飾をすべて削除（下線などを消す） underline下線 overline上線 line-through取り消し線 よく使うパターン ① リンクの下線を消す コピー a { text-decoration: none; } ② 強調テキストに下線をつける コピー .important { text-decoration: underline; } ③ セール価格の取り消し線 コピー .old-price { text-decoration: line-through; } 応用：色やスタイルも指定できる text-decorationは詳細な指定も可能です（CSS3以降）。 コピー .custom-link { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy; } おわりに text-decorationは、リンクやテキストを視覚的に強調したり、意味を伝えたりするうえで欠かせないプロパティです。 基本の使い方を覚えれば、Webデザインの表現力がぐっとアップします。