【CSS】text-decorationを使ってみる

今回は「text-decoration」の使用方法をご紹介していきます！
下線を引く以外にも色々できますので実用性のあるものをピックアップしていきます！

text-decorationを使ってみる

text-decorationはCSSの一括指定プロパティで、テキストの装飾的な線の表示を設定します。
一括指定プロパティなので、それぞれ設定できるものを分割してご紹介します！

・text-decoration-line
・text-decoration-color
・text-decoration-style
・text-decoration-thickness

text-decoration-lineについて

text-decoration-lineは使用する装飾の種類を設定します。指定できるのは下記、

・text-decoration-line: underline;
・text-decoration-line: overline;
・text-decoration-line: line-through;

See the Pen text-decoration-line by そす (@Sosgoyo) on CodePen.

underlineは下線。
overlineは上線。
line-throughは打消し線。　

underlineは使うシーンが多いイメージですね！overlineは使うことあるのでしょうか…(笑)

text-decoration-color

text-decoration-colorはtext-decoration-line でテキストに追加された装飾の色を設定します。

text-decoration-color: red;
text-decoration-color: #000000;

See the Pen text-decoration-line by そす (@Sosgoyo) on CodePen.

text-decoration-style

text-decoration-styleは text-decoration-line で指定された線の種類を設定します。

・text-decoration-style: solid;
・text-decoration-style: double;
・text-decoration-style: dotted;
・text-decoration-style: dashed;
・text-decoration-style: wavy;

See the Pen text-decoration-line by そす (@Sosgoyo) on CodePen.

solidは普通の線ですね。
doubleは二重線。
dottedは点線。
dashedは破線。
wavyは波線です。

text-decoration-thickness

text-decoration-thicknessは、要素内のテキストに用いられる装飾線の太さを設定します。
指定できる値はpxやem、％など様々な形式で指定することが可能です。

See the Pen text-decoration-style by そす (@Sosgoyo) on CodePen.

text-decorationで一括で設定する

最初にご紹介したtext-decorationで上記内容を一括指定することも可能です。
例えば、下線・波線・赤色・3pxの太さを一括で指定してみましょう！

See the Pen text-decoration-thickness by そす (@Sosgoyo) on CodePen.

まとめ

というわけで今回は「text-decoration」の使用方法についてご紹介いたしました！
是非ご活用ください！