Zenn
🍣

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

2020/12/04に公開
CSS
tech

https://zenn.dev/catnose99/scraps/a1ec13e8a2d17350fbfe

CSSのtext-decorationって下線や打ち消し線を引くだけでなく、実は色々できたりします。あまり知られていないような気がしたのでまとめておきます。

普通に下線を引く場合

よく使うのは下線だったり、打ち消し線ですね。

下線と波線を指定する例

.foo {
  text-decoration: underline; /* 下線 */
}
.bar {
  text-decoration: line-through; /* 打ち消し線 */
}

下線の色を変えるtext-decoration-color

text-decoration-colorを使うと、下線や打ち消し線の色が変えられます。IEは未対応ですがモダンブラウザでは全て対応しています。

text-decoration-color: blueを指定した例

.foo {
  text-decoration: underline;
  text-decoration-color: blue; /* 線の色 */
}

波線や二重線にするtext-decoration-style

線のスタイルはtext-decoration-styleプロパティで波線や二重線、破線などに変えることができます。IE以外のモダンブラウザに対応。

text-decoration-styleのイメージ

↑ このようなイメージですね。

/*
 * それぞれに
 * text-decoration: underline;
 * text-decoration-color: orange;
 *　を指定しています
 **/
.underline-wavy {
  text-decoration-style: wavy; /* 波線 */
}

.underline-double {
  text-decoration-style: double; /* 二重線 */
}

.underline-dashed {
  text-decoration-style: dashed; /* 破線 */
}

.underline-dotted {
  text-decoration-style: dotted; /* 点線 */
}

borderプロパティを使っても二重線や破線などは実現できますが、テキストに対しての線の場合にはtext-decoration-styleを使った方がきれいに見えます。

テキストの上に線をひく値overline

text-decorationの値にはoverlineというものがあり、これを指定するとテキストの上に線が引かれます。使う機会はほとんどないような気がしますが。

text-decoration:overlineの使用例

.foo {
  text-decoration: overline; /* 上線 */
}

線の太さを変えるtext-decoration-thickness

text-decoration-thickness: 値を指定すれば、線の太さを変えることが可能です。caniuseを見るとChrome87〜対応と書いてあるのですが、自分の環境だとChrome87でもなぜか効きませんでした。Safari、FireFoxでは問題なく対応。

text-decoration-thicknessの使用例

.foo {
  text-decoration: underline;
  text-decoration-color: silver;
  text-decoration-thickness: 3px; /* 線の太さ */
}

下線と文字の重なり方を決めるtext-decoration-skip-ink

text-decoration-skip-ink: none;を指定すると、下線と文字列が重なる部分であっても下線が途切れることがなくなります。

text-decoration-skip-ink:noneを使用すると...

↑ 上がデフォルト（auto）で、下はnoneを指定した場合です。下の方は下線が途切れることなく伸びていることが分かります。

.text-skip-all {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

2022年9月現在、すべてのモダンブラウザで使用できます。

線と文字列との距離を決めるtext-underline-offset

text-underline-offset: 値という形で線と文字列の離れ具合を決めることができます。

たとえば15pxを指定すると以下のように線と文字列の間に大きな隙間ができます。

text-underline-offsetの使用例

.underline-spaced {
  text-decoration: underline;
  text-underline-offset: 15px;
}

値にはemやrem、%などの単位で値を指定することもできます。Chrome87〜、Safari、Firefoxに対応。最新の情報はtext-underline-offset - caniuseをどうぞ。

以上text-decorationに関する豆知識のまとめでした。より詳しく知りたい方は[MDNのtext-decorationの解説]を読むのがおすすめです。

Discussion