【CSS】文字の縁取りについて解説！

シュウ

今回は【CSS】文字の縁取りに解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
webkit-text-strokeの使い方について学びたい方へ
今回は文字の縁取り(輪郭線)について解説しております。

文字の縁取りについて

CSSの-webkit-text-strokeプロパティは、テキストに輪郭線（アウトライン）をつけるためのプロパティです。これを使うことで、テキストを目立たせたり、デザインにアクセントを加えたりすることができます。
今回は以下のようなイメージになります。

文字の縁取りは、text-shadowでも可能ですが、今回は-webkit-text-strokeプロパティを解説していきます。

個人的な意見ですが、あまり日本語には適しないとおもいます。
数字や、英語表記の見出しなどで使用をすることをオススメします。

text-strokeとは、テキストの輪郭: 文字の外側に輪郭線を描き、文字を浮き上がらせたり、立体的に見せる効果があります。
以下のように記述します。

-webkit-text-stroke: <width> <color>;
text-stroke: <width> <color>; /* 標準化されたプロパティ */
-webkit-background-clip: text;

width: 輪郭線の太さを指定します。px（ピクセル）やemなどの単位を使用できます。
color: 輪郭線の色を指定します。カラーキーワード、16進数、rgb()関数など、通常の色の指定方法が使用できます

-webkit-background-clip: textは、CSSのプロパティの一つで、WebKit系のブラウザ（Safari、Chromeなど）で主に使用されます。このプロパティは、要素の背景画像や色を、テキストの輪郭線内にクリップする（切り抜く）効果を生み出します。
このプロパティ単体では効果が見られません。

より多くのブラウザで動作させるためには、CSSプリプロセッサを使用して、ベンダープレフィックスを自動的に付与することをおすすめします。

  text-stroke: <width> <color>;
  -webkit-text-stroke: <width> <color>; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  background-clip: text; /* 標準プロパティを追加 */
  -moz-background-clip: text; /* Firefox用 */ 
  text-fill-color: transparent; /* 標準プロパティを追加 */