CSS - text-decoration 装飾・色・スタイル

1.　概要

2.　装飾の種類

3.　スタイルの種類

4.　やってみる

1.　概要

　詳細は「text-decoration - CSS: カスケーディングスタイルシート | MDN」をご参照ください。

　参考サイトによれば「文字列に使用される装飾的な線の表示を指定します。これは1つまたは複数の独立した text-decoration の値 (text-decoration-line, text-decoration-color, text-decoration-style) を一括指定します。」とのことです。


text-decoration: 装飾 色 スタイル;


　で定義するのですが、個別に


text-decoration-line:  装飾;
text-decoration-color: 色;
text-decoration-style: スタイル;


　ともできます。

2.　装飾の種類

　※非推奨であり、これを使用するより animation を使用せよとのこと

3.　スタイルの種類

　スタイルの種類は border と同じかと思って、そこにリンクさせようとか思いましたらば、微妙に違う。
　それはそうだわな、テキストの下線にくぼみはないわな。

4.　やってみる

　ちょっとやってみます。


<span style="text-decoration-line: none;">なし</span>、
<span style="text-decoration-line: underline;">下線</span>、
<span style="text-decoration-line: overline;">上線</span>、
<span style="text-decoration-line: line-through;">取り消し線</span>、
<span style="text-decoration-line: blink;">点滅</span>


　と書いたら以下のように表示されます。

 なし、下線、上線、取り消し線、点滅

　点滅は非推奨のためか Forefox 61.0 では点滅しておりません。


　スタイルを試してみます。


<span style="text-decoration-line: underline; text-decoration-style: solid;">一本線</span>、
<span style="text-decoration-line: underline; text-decoration-style: double;">二本線</span>、
<span style="text-decoration-line: underline; text-decoration-style: dotted;">点線</span>、
<span style="text-decoration-line: underline; text-decoration-style: dashed;">破線</span>、
<span style="text-decoration-line: underline; text-decoration-style: wavy;">波線</span>


　と書いたら以下のように表示されます。

　一本線、二本線、点線、破線、波線


　text-decoration でまとめることもできるわけで。


<span style="text-decoration: underline red wavy;">下部に赤い波線</span>


　は下記のように表示されます。

　下部に赤い波線


　装飾は、複数を一度に指定できるそうで、でも２番目を色と混同しないのかと心配しましたが。


<span style="text-decoration: underline overline green;">上下</span>


　うまく表示されるようです。

　上下

　装飾を省略することはできないが、以降は省略できるし、きちんと区別できるキーワードを使っているようです。

　うむ、うまくできている。