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

 
4.1.1 概要
4.1.2 装飾の種類
4.1.3 スタイルの種類
4.1.4 やってみる

4.1.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: スタイル;
 ともできます。

4.1.2 装飾の種類

意味
none なし
underline 下線
overline 上線
line-through 取り消し線
blink 点滅(※)

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

4.1.3 スタイルの種類

 スタイルの種類は border と同じかと思って、そこにリンクさせようとか思いましたらば、微妙に違う。  それはそうだわな、テキストの下線にくぼみはないわな。
意味
solid 一本線
double 二本線
dotted 点線
dashed 破線
wavy 波線

4.1.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>
 は下記のように表示されます。  下部に赤い波線  装飾は、複数を一度に指定できるそうで、でも2番目を色と混同しないのかと心配しましたが。

<span style="text-decoration: underline overline green;">上下</span>
 うまく表示されるようです。  上下  装飾を省略することはできないが、以降は省略できるし、きちんと区別できるキーワードを使っているようです。  うむ、うまくできている。