CSSで縁取り文字を作る方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、CSSで縁取り文字を作る方法をご紹介します。

text-strokeプロパティを使用して簡単に実装することが可能です。

それでは作り方を見て参りましょう！

CSSで縁取り文字を表現できるようになろう！

完成イメージ

実装のポイント

今回の実装のポイントは、

となります。

コードを見ながら確認していきましょう。

HTML

<p class="Text">キャッチコピー</p>

CSS

.Text{
  letter-spacing: 0.15em;
  -webkit-text-stroke: 1px #5bc8ac;
  text-stroke: 1px #5bc8ac;
  color: transparent;
  font-size: 40px;
}

CSSで作る縁取り文字サンプルコード

↓↓↓

See the Pen
yLNyYyX by 石森裕也 (@yuyaphotograph)
on CodePen.

参考記事

分かりやすく解説していただきありがとうございます。

text-shadowで縁取り文字を実装する方法などtext-stroke以外の実装を知りたい方はこちらオススメです！

text-strokeサポート状況を知りたい方はこちら。

まとめ

以上、CSSで縁取り文字を作る方法をご紹介しました。

Webサイト制作で使用する機会があれば使ってみてください(^o^)

最後までご高覧いただきありがとうございました！

あわせて読みたい

■HTMLでルビ（ふりがな）を振る方法

■CSSで複数行に渡ってテキストにマーカーを引く方法