text-decoration

by 2 contributors:

text-decoration CSS プロパティは underline、overlineline-throughblink のテキストフォーマットを設定するのに使用されます。下線 (underline) と上線 (overline) はそれぞれテキストの上下に配置され、取り消し線 (line-through) はテキスト上にかかります。

テキスト装飾は、子孫要素にも描かれます。これは、親要素で指定されたテキスト装飾を子孫要素で無効化できないことを意味します。例えば、マークアップ: <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 Level 3 で、このプロパティは text-decoration-colortext-decoration-linetext-decoration-style の 3 つの CSS プロパティの短縮形として変更されています。他のショートハンド・プロパティと同様に、ショートハンド内で明示的に指定されなかった場合は、デフォルトの値が適用されます。

  • 初期値 以下の各ロングハンドプロパティの初期値が使用されます:
    • text-decoration-color: currentColor
    • text-decoration-style: solid
    • text-decoration-line: none
  • 適用対象 全要素. It also applies to ::first-letter and ::first-line.
  • 継承 継承しない
  • メディア visual
  • 計算値 as each of the properties of the shorthand:
    • text-decoration-line: 指定値
    • text-decoration-style: 指定値
    • text-decoration-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
  • アニメーションの可否 以下の各プロパティのショートハンドとして補完します:
    • text-decoration-color: 可。color の値として補完します。
    • text-decoration-style: 不可
    • text-decoration-line: 不可
  • 正規順序 order of appearance in the formal grammar of the values

構文

/* Keyword values */
text-decoration: none;                 /* テキスト装飾なし */
text-decoration: underline red;        /* 赤の下線 */
text-decoration: underline wavy red;   /* 赤の波状の下線 */

/* Global values */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

text-decoration プロパティは短縮形であり、3つの非短縮形: text-decoration-linetext-decoration-colortext-decoration-style の各プロパティの値が利用できます。

形式文法

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

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

仕様

仕様 策定状況 コメント
CSS Text Decoration Level 3
The definition of 'text-decoration' in that specification.
勧告候補
CSS Level 2 (Revision 1)
The definition of 'text-decoration' in that specification.
勧告 有意な変更なし
CSS Level 1
The definition of 'text-decoration' in that specification.
勧告 最初期の仕様

ブラウザ実装状況

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本機能 1.0 (1.7 or earlier) 1.0 3.0 3.5 1.0
blink 1.0 (1.7 or earlier)
23.0 (23.0)[1]
(有)[1] (有)[1] 4.0
15.0[1]
(有)[1]
ショートハンド・プロパティ 6.0 (6.0)[3]
36.0 (36.0)
未サポート 未サポート 未サポート 7.1[2]
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本機能 1.0 (1.0) (有) (有) (有) (有)
blink 1.0 (1.7 or earlier)
23.0 (23.0)[1]
(有)[1] (有)[1] 4.0[1] (有)[1]
ショートハンド・プロパティ 6.0 (6.0)[3]
36.0 (36.0)
? ? ? 8[1]

[1] blink 値は何の効果もありません。

[2] Safari は text-decoration-style をサポートしていません。

[3] このバージョンの Gecko では一部のみ実装されています。

関連情報

ドキュメントのタグと貢献者

Contributors to this page: mitsuba-clover, dskmori
最終更新者: mitsuba-clover,