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




クラウディア　












1.　概要				


2.　装飾の種類		


3.　スタイルの種類	


4.　やってみる		


5.　色について		


6.　参考サイト		




1.　概要


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



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



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



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



　ともできます。


2.　装飾の種類





値							意味	


none			なし		


underline	下線		


overline		上線		


line-through	取り消し線	


blink		点滅（※）	



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


3.　スタイルの種類


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




値						意味	


solid	一本線	


double	二本線	


dotted	点線	


dashed	破線	


wavy		波線	




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>



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


　上下　



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


5.　色について


　文字の色が、「text-decoration-color」では、何故か、うまくつかないんだな。
　少なくとも、「Vivaldi 7.5.3735.58」では、うまく表示されません。
　なので、「color」を使用しています。



<span style="text-decoration-color: green;">text-decoration-color: green</span>　<span style="color: green;">color: green</span>　



　と、実際に下に書いてみると、わたしの環境では、右側しか色が変わってないんだな。
　なので、文字列に色を付けるときも、「color」を使っています。


　text-decoration-color: green　color: green　




6.　参考サイト


　本ページは、下記のサイトを参考にさせていただきました。


「text-decoration - CSS: カスケーディングスタイルシート」







AbemaTV　無料体験