このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
text-decoration-line
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
* Some parts of this feature may have varying levels of support.
text-decoration-line はCSS のプロパティで、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。
試してみましょう
text-decoration-line: none;text-decoration-line: underline;text-decoration-line: overline;text-decoration-line: line-through;text-decoration-line: grammar-error;text-decoration-line: spelling-error;text-decoration-line: underline overline;text-decoration-line: underline line-through;<section> <p> I'd far rather be <span>happy than right</span> any day. </p></section>p { font: 1.5em sans-serif;}複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定のtext-decoration プロパティを使用したほうが便利かもしれません。
構文
/* 単一のキーワード */text-decoration-line: none;text-decoration-line: underline;text-decoration-line: overline;text-decoration-line: line-through;text-decoration-line: blink;text-decoration-line: spelling-error;text-decoration-line: grammar-error;/* 複数のキーワード */text-decoration-line: underline overline; /* 2 本の装飾線 */text-decoration-line: overline underline line-through; /* 複数の装飾線 *//* グローバル値 */text-decoration-line: inherit;text-decoration-line: initial;text-decoration-line: revert;text-decoration-line: revert-layer;text-decoration-line: unset;text-decoration-line プロパティはnone または以下のリストにある1 つ以上の空白で区切られた値を指定します。
値
noneテキストの装飾を行いません。
underlineテキストの各行に下線を引きます。
overlineテキストの各行の上線を引きます。
line-throughテキストの各行の中央を貫く線を引きます。
blinkテキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は非推奨であり、CSS アニメーションに取って代わりました。
spelling-errorそれぞれのテキスト行は、ユーザーエージェントのスペルミス強調表示方法を使っており、ほとんどのブラウザーでは赤い点線で表示されます。
grammar-errorそれぞれのテキスト行は、ユーザーエージェントの文法エラー強調表示方法を使っており、ほとんどのブラウザーでは緑の点線で表示されます。
メモ:spelling-error およびgrammar-error の値を使用したとき、ブラウザーはtext-decoration 一括指定に指定される他のプロパティ（text-underline-position、color、stroke など）を無視します。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | すべての要素。::first-letterおよび::first-line にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
text-decoration-line =
none|
[underline||overline||line-through||blink]|
spelling-error|
grammar-error
例
基本的な例
<p>こちらのテキストには赤い波線の下線が付いています。</p><p>このテキストには上線と下線がついています。</p>.wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red;}.both { text-decoration-line: underline overline;}エラーの例
この例では、最初の段落にはスペルミスが含まれており、誤字に対してブラウザーのスペルミス用スタイルが適用されています。2 番目の段落では文法エラー用のブラウザースタイルが使用されています。これらのtext-decoration-line 値に非対応のブラウザーではスタイル変更は発生しません。
<p>このテキストには<span>スペルミス</span>があります。</p><p>このテキストには文法エラーがあります。</p>.spelling { text-decoration-line: spelling-error;}.grammar { text-decoration-line: grammar-error;}仕様書
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-line-property |
ブラウザーの互換性
関連情報
- 複数の線の装飾プロパティを一度に設定するときは、代わりに一括指定の
text-decorationプロパティを使った方が便利かもしれません。 text-underline-offset::spelling-error::grammar-error