【CSS】「text-decorationすごい」のメモ。色、太さ、位置も変えられる

職場の方がtext-decorationで波線をつけてるのを見て、「オーすごい」と思い、調べたら色んなことができたのでメモ。

まずは実際に見てみましょー。

これまでborder-bottomでなんとかしていたことが、text-decorationで出来ちゃいます(・o・)

IEを無視すればできちゃうんですね!IEを無視すればできちゃうんです!

大事なことなので2回言ったよ

各スタイル解説

01.普通の下線(underline)

text-decoration: underline;

言わずもがな。いつもの下線です。

参考リンク:MDN / text-decoration

02.取り消し線(line-through)

text-decoration: line-through;

似たhtmlタグでdelがあるけど、そっちは明確に「削除する」意味があるときに使います。
delタグについてはこちらが参考になります。

参考リンク:MDN / text-decoration-line

03.色をつける(text-decoration-color)

text-decoration-color: orange;

ショートハンド

text-decoration: underline orange;

なんと色もつけられます(知らなかった…)今までborder-bottomで指定してました(・o・)

参考リンク:MDN / text-decoration-color

04.太さを変える(text-decoration-thickness)

text-decoration-thickness: 5px;

ショートハンド

text-decoration:underline 5px;

参考リンク:MDN / text-decoration-thickness

05〜08.二重線・点線・破線・波線(text-decoration-style)

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

ショートハンド

text-decoration: underline double;

参考リンク:MDN / text-decoration-style

09〜10.上線

text-decoration-line: overline;

下線だけでなく、上に線をつけることもできます。

下線、上線両方を指定することも可能。

text-decoration-line: underline overline;

参考リンク:MDN / text-decoration-line

11.文字と先の間に幅(text-underline-offset)

text-underline-offset: 15px;

テキストと線の間に余白を入れます。

text-underline-offsetはtext-decorationのショートハンドとしては使えず、個別に指定する必要があります。

参考リンク:MDN / text-underline-offset

12.線の引き方

text-decoration-skip-ink: none;

日本語表記のときはあまり意味がありませんが、英語表記のときは違いが顕著です。デフォルトではautoになってます。

text-decoration-skip-inkはtext-decorationのショートハンドとしては使えず、個別に指定する必要があります。

参考リンク:MDN / text-decoration-skip-ink

ショートハンドについて

一部のスタイルは「text-decoration」で一括指定できます。

text-decoration: underline line-through overline;
text-decoration: underline orange 5px;

チートシート的Codepen

良さげなCodepenがあったのでメモ✍

参考リンク

CSSのtext-decorationは意外と色々なスタイル調整ができる

MDN:text-decoration ほか