text-decoration
BaselineWidely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
text-decoration はCSS の一括指定プロパティで、テキストの装飾的な線の表示を設定します。これはtext-decoration-line、text-decoration-color、text-decoration-style およびさらに新しいtext-decoration-thickness プロパティの一括指定です。
試してみましょう
text-decoration: underline;text-decoration: underline dotted;text-decoration: underline dotted red;text-decoration: green wavy underline;text-decoration: underline overline #ff3028;<section> <p> I'd far rather be <span>happy than right</span> any day. </p></section>p { font: 1.5em sans-serif;}文字列の装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、<p>This text has <em>some emphasized words</em> in it.</p> というマークアップと、p { text-decoration: underline; } のスタイル規則では、段落全体に下線が引かれます。em { text-decoration: none; } のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、em { text-decoration: overline; } の規則で "some emphasized words" に第二の装飾が施されます。
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
text-decoration: underline;text-decoration: overline red;text-decoration: none;/* グローバル値 */text-decoration: inherit;text-decoration: initial;text-decoration: revert;text-decoration: revert-layer;text-decoration: unset;text-decoration プロパティは、個別指定の text-decoration プロパティを表す 1 つまたは複数の値を空白で区切って指定します。
値
text-decoration-line使用する装飾の種類を設定します。
underlineやline-throughなどです。text-decoration-color装飾の色を設定します。
text-decoration-style装飾に使用する線のスタイルを設定します。
solid,wavy,dashedなどです。text-decoration-thickness装飾に使われる線の太さを設定します。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | すべての要素。::first-letterおよび::first-line にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして |
形式文法
例
text-decoration の値のデモ
.under { text-decoration: underline red;}.over { text-decoration: wavy overline lime;}.line { text-decoration: line-through;}.plain { text-decoration: none;}.underover { text-decoration: dashed underline overline;}.thick { text-decoration: solid underline purple 4px;}.blink { text-decoration: blink;}<p>このテキストには下付近に 1 本の線があります。</p><p>このテキストの上に線があります。</p><p>このテキストには取り消し線があります。</p><p> この<a href="#">リンクには下線が引かれていません</a >が、リンクは一般的には既定で下線があります。ユーザーはハイパーリンクを示すアンダーラインを頼りにしていることが多いので、アンカーの文字装飾を削除する場合は注意が必要です。</p><p>このテキストには上<em>と</em>下に線があります。</p><p> 対応しているブラウザーでは、このテキストは実に太い紫色の下線があります。</p><p> 使用しているブラウザーによっては、このテキストは点滅しているかもしれません。</p>結果
仕様書
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-property |
| Scalable Vector Graphics (SVG) 2 # TextDecorationProperties |
ブラウザーの互換性
関連情報
- text-decoration の個別指定プロパティは、
text-decoration-line、text-decoration-color、text-decoration-style、text-decoration-thicknessです。 text-decoration-skip-ink、text-underline-offset、text-underline-position属性もテキストの装飾に影響しますが、一括指定プロパティには含まれません。list-style属性は HTML の<ol>および<ul>のリストの表示方法を制御します。