Dec. 12th,2020
プロパティについて
＃
概要
“text-decoration-line”プロパティは要素のテキストに引く下線、上線、取り消し線を指定するプロパティです。
“text-decoration-line”プロパティは子要素に継承されませんが、それでも下線や上線、取り消し線は子孫のものも含むすべてのテキストに設定が反映されます。子孫要素に別途“text-decoration”プロパティや“text-decoration-line”プロパティを適用したとしても設定を取り消すことはできません。
サンプルコード
span { text-decoration-line: underline;}
＃
値
| 値 | 説明 |
|---|---|
| none | ライン装飾を行わず、禁止もしない (祖先要素にライン装飾が設定されている場合にそれを“none”で取り消すことはできません。) |
| underline | テキストに下線を引く |
| overline | テキストに上線を引く (“underline”とは逆側に線を引きます。) |
| line-through | テキストの中央に線を引く |
blink |
テキストを点滅させる (非推奨であり、代わりにCSSアニメーションを使用することが推奨されます。ユーザー・エージェントは点滅を無効にすることができます。) |
spelling-error |
ユーザー・エージェントがスペリングの誤りがある箇所を示すために使用するライン装飾 (どのような装飾を使用するかはユーザー・エージェントに依りますが、通常は赤色の波線が使用されます。他のライン装飾に影響を与えるプロパティは無視される場合があります。) |
| grammar-error |
ユーザー・エージェントが文法の誤りがある箇所を示すために使用するライン装飾 (どのような装飾を使用するかはユーザー・エージェントに依りますが、通常は緑色の波線が使用されます。他のライン装飾に影響を与えるプロパティは無視される場合があります。) |
| 共通キーワード |
“underline”、“overline”、“line-through”、“blink”はホワイトスペースで区切って記述することで複数併用することができます。
span { text-decoration-line: underline line-through;}
＃
使用例
＃
テキストに引く線の種類を指定する
<p>
彼女は「<span>猫は上のかぎり黒くてことはみな白き</span>」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
</p>
span { text-decoration-line: underline;}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span { text-decoration-line: overline;}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span { text-decoration-line: line-through;}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span { text-decoration-line: blink;}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
span { text-decoration-line: spelling-error;}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
＃
＃
