CSS Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

CSSで文字を縁取る方法

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

  • 方法①:text-stroke
  • 方法②:text-shadow

共通の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については以下の記事を参照下さい。

あわせて読みたい
CSSのtext-shadowでテキスト(文字)に影をつける方法【サンプル付き】
CSSの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-stroketext-shadowを使った縁取り文字の方法を解説してきました。

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

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作