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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

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

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

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

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

完成イメージ

CSSで作る縁取り文字

実装のポイント

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

  • text-stroke(テキストストローク)で縁取り文字を表現する
  • colorプロパティにはtransparentを指定して白抜き透過させる
  • 文字サイズは大きめに設定してあげないと潰れて読みづらくなってしまうので注意

となります。

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

HTML

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

CSS

index.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以外の実装を知りたい方はこちらオススメです!

参考 CSSで文字にボーダー(縁取り)をつけたい。かもメモ

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

参考 text-strokeのブラウザごとのサポート状況Can I use

まとめ

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

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

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

あわせて読みたい

HTMLでルビ(ふりがな)を振る方法

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です