text-decoration

by 1 contributor:

概要

text-decoration CSS プロパティは underline、overlineline-throughblink のテキストフォーマットを設定するのに使用されます。

下線 (underline) と上線 (overline) はそれぞれテキストの上下に配置され、取り消し線 (line-through) はテキスト上にかかります。

注記: CSS Text Decoration Level 3 で、このプロパティは text-decoration-colortext-decoration-linetext-decoration-style の 3 つの CSS プロパティの短縮形として変更されています。他のショートハンド・プロパティと同様に、ショートハンド内で明示的に指定されなかった場合は、デフォルトの値が適用されます。

  • 初期値 以下の各ロングハンドプロパティの初期値が使用されます:
    • text-decoration-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • text-decoration-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • text-decoration-line: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • 適用対象 全要素
  • 継承 継承しない
  • メディア 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 rgb(0,0,0).
  • アニメーションの可否 以下の各プロパティのショートハンドとして補完します:
    • text-decoration-color: 可。color の値として補完します。
    • text-decoration-style: 不可
    • text-decoration-line: 不可
  • 正規順序 order of appearance in the formal grammar of the values

構文

Formal syntax: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

半角スペースで区切った、1 つ以上 の値が許可されています:

none
テキストの装飾は行われません。
underline
テキストに下線が引かれます。
overline
テキストの上部に線が引かれます。
line-through
テキストの中腹部に線が引かれます。
blink 
ゆっくりと点滅するキーワードとなります。現在は有効ですが、廃止予定で仕様ではブラウザがこの値を無視することを許可しています。テキストを点滅させ ない ことが WAI-UAAG の チェックポイント 3 を満足することに注意してください。
-moz-anchor-decoration
Mozilla CSS 拡張仕様 です。Web コンテンツには適していません。

CSS コンテンツ

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;
}

HTML コンテンツ

<h1 class="under">Underlined Header</h1>
<p class="line">If you want to strike out text, use line-through.</p>
<p class="blink">This text might blink for you - if you use Explorer, it will not.</p>
<h1 class="over">and now an overlined header.</h1>
<p>This <a class="none" href="textdecoration.html">link will not be underlined</a> , as most links are by default.  Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.</p>
<p class="underover">This text has both underline and overline.</p>

実際の例

注意

テキスト装飾は、子孫要素にも適用されます。これは、親要素で指定されたテキスト装飾を子孫要素で無効化できないことを意味します。

例えば、マークアップ:
<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-style の値をサポート追加
CSS Level 2 (Revision 1) 勧告 有意な変更なし
CSS Level 1 勧告 最初期の仕様

ブラウザ実装状況

機能 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)
Effect removed in 23.0 (23.0)
(有) but without effect (有) but without effect 4.0
Effect removed in 15.0
(有) but without effect
ショートハンド・プロパティ 6.0 (6.0) 未サポート 未サポート 未サポート 未サポート
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本機能 1.0 (1.0) (有) (有) (有) (有)
blink 1.0 (1.7 or earlier)
Effect removed in 23.0 (23.0)
(有) but without effect (有) but without effect 4.0
Effect removed in 15.0
(有) but without effect
ショートハンド・プロパティ 6.0 (6.0) ? ? ? ?

関連情報

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

Contributors to this page: dskmori
最終更新者: dskmori,
サイドバーを隠す