text-decoration（テキスト装飾）プロパティ

最終更新：2026-09-13

text-decoration text-decoration（テキスト装飾）プロパティ

text-decoration プロパティはテキストに装飾線を追加します。最も一般的なのは下線、上線、打ち消し線です。これは text-decoration-line、text-decoration-style、text-decoration-color、text-decoration-thickness の 4 つのサブプロパティのショートハンドです。既定ではリンク（a 要素）に下線が引かれますが、リセットスタイルでは通常この下線を消します。

カテゴリ
初期値	none
継承	いいえ
適用対象	all
アニメーションタイプ	shadow
CSS バージョン	CSS1
状態	標準

📝 構文

text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness>;

⚙️ 値

値	タイプ	説明
`<text-decoration-line> \|\| <text-decoration-style> \|\| <text-decoration-color> \|\| <text-decoration-thickness>`	値	テキスト装飾のショートハンド（下線、打ち消し線など）

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
text-decoration	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： リンクの既定の下線を消すには text-decoration: none; を使ってください。ただし、アクセシビリティを維持するため、色の変化などの別の視覚的手がかりを残してください。

重要： CSS3 では text-decoration は既定で継承されなくなりましたが、祖先の装飾線は子のテキストにまたがって描画されます。細かく制御したい場合はサブプロパティを使ってください。

❓ よくある質問

Qtext-decoration の下線と border-bottom の下線の違いは何ですか？

Atext-decoration が描く線はテキストにぴったり沿い、位置と太さはブラウザーが制御します。border-bottom は要素の下端の境界線で、行全体の下部にあり、スタイル・色・距離を正確に制御できますが、要素の全幅にわたって伸びます。

QCSS で下線の色や線の種類だけを変更するにはどうすればよいですか？

A3 つのサブプロパティを使います。色には text-decoration-color、線の種類（solid、dashed、dotted、wavy）には text-decoration-style、太さには text-decoration-thickness です。それぞれを他の既定値のまま個別に設定できます。

QCSS だけでリンクの既定の下線を消すにはどうすればよいですか？

Aリンクに text-decoration: none を書きます。消した後も、色の変化やホバー効果などの別の視覚的区別を残してください。そうしないとユーザーがリンクと見分けられず、アクセシビリティが損なわれます。