text-decoration
text-decoration
は CSS の 一括指定プロパティで、テキストの装飾的な線の表示を設定します。これは text-decoration-line
, text-decoration-color
, text-decoration-style
およびさらに新しい text-decoration-thickness
(en-US) プロパティの一括指定です。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
文字列装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、 <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" に第二の装飾が施されます。
構文
text-decoration
プロパティは、個別指定の text-decoration プロパティを表す1つまたは複数の値を空白で区切って指定します。
値
text-decoration-line
- 使用する装飾の種類を設定します。
underline
やline-through
などです。 text-decoration-color
- 装飾の色を設定します。
text-decoration-style
- 装飾に使用する線のスタイルを設定します。
solid
,wavy
,dashed
などです。 text-decoration-thickness
(en-US)- 装飾に使われる線の太さを設定します。
形式文法
<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'> (en-US)
例
.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 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>
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Text Decoration Module Level 4 | 草案 | text-decoration-thickness (en-US) を追加。なお、これはまだ公式には一括指定の一部ではありません。これはまだ未定義です。 |
CSS Text Decoration Module Level 3 text-decoration の定義 |
勧告候補 | 一括指定プロパティへ変更。 text-decoration-style の値への対応を追加。 |
CSS Level 2 (Revision 1) text-decoration の定義 |
勧告 | 実質的な変更なし。 |
CSS Level 1 text-decoration の定義 |
勧告 | 初回定義 |
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | すべての要素。 ::first-letter および::first-line にも適用されます。 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- text-decoration の個別指定プロパティは、
text-decoration-line
,text-decoration-color
,text-decoration-style
です。 list-style
属性は HTML の<ol>
および<ul>
のリストの表示方法を制御します。