CSSで文字を縁取る方法【text-strokeとtext-shadowの使い方】

縁取り文字ってどうやって作るの？

縁取り文字はCSSのプロパティで実装できますが、2種類の方法があります。

今回は2種類を比較しながらサンプルを使って解説していきます。

CSSで文字を縁取る方法

CSSで文字を縁取るには2つの方法があります。

共通のHTMLはこちらです。

<p>じゅんぺいブログ</p>
<p>四字熟語2023</p>
<p>WordPress</p>

平仮名・カタカナ・漢字・画数の多い漢字・数字・ローマ字と一通りの種類を含めてみました。

それでは解説していきます。

方法①：text-strokeで縁取り文字

text-strokeで文字を縁取る場合は以下のように書きます。

p {
  color: #87cefa;
  -webkit-text-stroke: 1px #8b0000; /* ベンダープレフィックス */
  text-stroke: 1px #8b0000;
}

縁の太さと色を書くだけなので簡単ですね。

text-strokeはIEで使えず非推奨とされていましたが、現在はIEのサポートも終了しているので気兼ねなく使えるようになりました。

ただしベンダープレフィックスは必要なので忘れず書いておきましょう。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

綺麗に縁取り出来ているかと思います。

それではこの縁を1pxから4pxにしてみるとこのようになります。

See the Pen
縁取り文字：text-stroke（太い） by junpei (@junpei-sugiyama)
on CodePen.

『ぺ』や『熟』など小さい箇所は潰れかけています。

さらに左上のHTML・CSSをクリックして文字を小さくすると思い切り潰れてしまいます。

なので縁取りをする際は太くしすぎないように注意しましょう。

方法②：text-shadowで縁取り文字

text-shadowで文字を縁取る場合は以下のように書きます。

p {
  color: #87cefa;
  text-shadow: 1px 1px 0 #8b0000, -1px -1px 0 #8b0000,
  -1px 1px 0 #8b0000,  1px -1px 0 #8b0000,
  1px 0 0 #8b0000, -1px  0 0 #8b0000,
  0 1px 0 #8b0000,  0 -1px 0 #8b0000;
}

text-strokeと比べるとかなりコード量が多いですが、これは正確には縁取りしているわけではなく、8方向に影をつけています。

text-shadowについては以下の記事を参照下さい。

サンプルはこちらです。

See the Pen
縁取り文字：text-shadow（細い） by junpei (@junpei-sugiyama)
on CodePen.

text-strokeとあまり変わらないように見えますが、太くすると違いが分かります。

1pxの箇所を全て4pxにしてみます。

See the Pen
縁取り文字：text-shadow（太い） by junpei (@junpei-sugiyama)
on CodePen.

角がギザギザケバケバしています。

これ防ぐというより誤魔化すには、ぼかせばOKです。

ぼかしは3つ目の値なので、3つ目の値を全て4pxにしてみます。

p {
  color: #87cefa;
  text-shadow: 4px 4px 4px #8b0000, -4px -4px 4px #8b0000,
  -4px 4px 4px #8b0000,  4px -4px 4px #8b0000,
  4px 0 4px #8b0000, -4px  0 4px #8b0000,
  0 4px 4px #8b0000,  0 -4px 4px #8b0000;
}

See the Pen
縁取り文字：text-shadow（太い・ぼかす） by junpei (@junpei-sugiyama)
on CodePen.

かなり自然になり、縁が太い場合なら潰れてしまうtext-strokeより良さそうですね（左上のHTML・CSSをクリックして文字を小さくすると分かります）

まとめ

今回はtext-strokeとtext-shadowを使った縁取り文字の方法を解説してきました。

1pxの細い縁取りならtext-strokeでいいと思いますが、太い縁取りは場合によってはtext-shadowの方が良いかも知れません。

なので両方とも知っていると使い分けが出来るのでおすすめです。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！