今回はCSSで縁取り文字を表示する方法について簡単に解説します。
CSSで文字を縁取りする方法はいくつかあるのですが、今回は一番おすすめの方法のみご紹介します。
text-strokeプロパティ
text-strokeは文字の輪郭線の幅と色を指定することで、縁取り文字を生成できるプロパティです。
サンプル
See the Pen
Untitled by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.
記述例
HTML
<p>縁取り文字</p>
CSS
p {
color: #fff;
text-stroke: 1px red;
-webkit-text-stroke: 1px red;
}
文字色の指定はcolorプロパティを使用します。
text-strokeには、１つ目の値に輪郭線の幅、２つ目の値に輪郭線の色を指定します。
text-strokeだけでなく、-webkit-text-strokeの指定も忘れずに行いましょう。
まとめ
text-strokeプロパティを使えば簡単に縁取り文字を作ることができるので、コーディングのストックに入れておきましょう！
