text-decoration
===============

**`text-decoration`** は CSS の一括指定プロパティで、テキストの装飾的な線の表示を設定します。これは `text-decoration-line`、`text-decoration-color`、`text-decoration-style` およびさらに新しい `text-decoration-thickness` プロパティの一括指定です。

試してみましょう
--------

文字列の装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、`<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-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-thickness`
構文
--


```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`

装飾に使われる線の太さを設定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `text-decoration-color`: `currentcolor`
* `text-decoration-style`: `solid`
* `text-decoration-line`: `none`
 |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `text-decoration-line`: 指定通り
* `text-decoration-style`: 指定通り
* `text-decoration-color`: 色の計算値
* `text-decoration-thickness`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `text-decoration-color`: 色
* `text-decoration-style`: 離散値
* `text-decoration-line`: 離散値
* `text-decoration-thickness`: 計算値の型による
 |

形式文法
----
```

text-decoration =   
  <'text-decoration-line'>   ||  
  <'text-decoration-style'>  ||  
  <'text-decoration-color'>    
  
```

例
-

### text-decoration の値のデモ


```css
.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;
}
```



```html
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>
  This <a class="plain" href="#">link will not be underlined</a>, as links
  generally are by default. Be careful when removing the text decoration on
  anchors since users often depend on the underline to denote hyperlinks.
</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">
  This text has a really thick purple underline in supporting browsers.
</p>
<p class="blink">
  This text might blink for you, depending on the browser you use.
</p>
```

仕様書
---

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-property |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 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>` のリストの表示方法を制御します。