text-decoration

概要

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

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

• 初期値 以下の各ロングハンドプロパティの初期値が使用されます:
  • 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 プロパティ : letter-spacing 、 text-align 、 text-decoration 、 text-decoration-color 、 text-decoration-line 、 text-decoration-style 、 text-rendering 、 text-shadow 、 text-transform 、 text-indent 、 white-space 、 word-spacing