“text-decoration”プロパティ:テキストに線を引く

概要

“text-decoration”プロパティは要素のテキストに引く下線、上線、取り消し線を指定する以下のプロパティの一括指定プロパティです。

• “text-decoration-line”プロパティ
• “text-decoration-thickness”プロパティ
• “text-decoration-style”プロパティ
• “text-decoration-color”プロパティ

“text-decoration”プロパティによる下線や上線、取り消し線は子孫要素のものも含むすべてのテキストに引かれます。ただし、画像やインライン・ブロック(“display: inline-block;”)などのアトミック・インラインやフロー外の子孫に含まれるテキストには線は引かれません。ライン装飾の適用は継承とは異なるため、子孫要素に別途“text-decoration”プロパティや“text-decoration-line”プロパティ、“text-decoration-style”プロパティ、“text-decoration-color”プロパティ、“text-decoration-thickness”プロパティを適用したとしてもライン装飾を取り消したり、上書きすることはできません。

サンプルコード

値

値	説明
“<'text-decoration-line'>”値
none	テキストの装飾を行わず、禁止もしない (祖先要素にライン装飾が設定されている場合にそれを“none”で取り消すことはできません。)
underline	テキストに下線を引く
overline	テキストに上線を引く (“underline”とは逆側に線を引きます。)
line-through	テキストの中央に線を引く
blink	テキストを点滅させる (非推奨であり、代わりにCSSアニメーションを使用することが推奨されます。ユーザー・エージェントは点滅を無効にすることができます。)
<'text-decoration-line'>	“text-decoration-line”プロパティの値
他の値
<'text-decoration-thickness'>	“text-decoration-thickness”プロパティの値
<'text-decoration-style'>	“text-decoration-style”プロパティの値
<'text-decoration-color'>	“text-decoration-color”プロパティの値
共通キーワード

“<'text-decoration-thickness'>”値、“<'text-decoration-style'>”値、“<'text-decoration-color'>”値、“<'text-decoration-line'>”値をホワイトスペースで区切って1個ずつ指定できます。値を記述する順番は自由で、初期値のままで良い値は省略できます。ただし、“<'text-decoration-line'>”値を指定しない場合は既定値が線を引かない“none”のため、線は引かれません。

“<'text-decoration-style'>”値と“<'text-decoration-color'>”値をいずれも含まない指定はCSS1やCSS2と互換性があります。

仕様書

定義されている仕様書

text-decoration

none
underline
overline
line-through
blink
<'text-decoration-line'>
<'text-decoration-style'>
<'text-decoration-color'>
<'text-decoration-thickness'>

テキストに引く線を指定する

span { text-decoration: underline 2px wavy rgb(204,153,204);}


彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。