最終更新日: 2020年11月22日
text-shadowで白抜き文字を作る方法を解説！
CSSのtext-shadowプロパティを使って白抜き文字を作る方法をサンプルコード付きで解説します。text-shadowプロパティを使えば簡単に白抜き文字を作成出来ます。
コンテンツ [表示]
白抜き文字とは？
白抜き文字とは、文字の色が白色で黒色の縁取りが付いた文字の事です。また縁取り文字、袋文字と言われることもあります。
白抜き文字は文字自体は白で、境界の線のみが表示されているため通常の文字とは見た目が異なり、タイトルや見出しなど強調したい箇所で用いられます。
今回はこの白抜き文字をCSSを使って実現してみたいと思います。
text-shadowで白抜き文字を作る方法
CSSで白抜き文字を作成するには文字に影を付けるtext-shadowプロパティを利用します。
text-shadowプロパティで白抜きしたサンプルコードは下記の通りです。
解説
白抜き文字を作成するにはまず白抜きしたい文字のcolorをwhiteに設定します。
そしてtext-shadowプロパティを使い、上下左右斜めの8方向で1pxの黒の影を付けています。これできれいに縁取りされ白抜き文字が完成します。
