text-decoration

概要

text-decoration CSS プロパティは underline、overline、line-through、blink のテキストフォーマットを設定するのに使用されます。下線 (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" に第二の装飾が施されます。

構文

/* 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-line、text-decoration-color、text-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;
}

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

仕様

ブラウザ実装状況

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

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

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

関連情報

• list-style 属性は HTML <ol> / <ul> リストの要素の見た目を制御します。