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

2020.12.07
HTML&CSS

CSSだけで、縁取りされたアウトライン文字を作る方法の備忘録です。

text-shadowで設定する

CSSの「text-shadow」プロパティで文字を縁取りする方法です。

text-shadowは、本来は文字にドロップシャドウを設定するプロパティですが、影の位置と大きさを調整することで、文字を縁取ることができます。

SAMPLE

<p class="sample">SAMPLE</p>

.sample {
  color: #fff;
  text-shadow: 1px 0 0 #333, 0 1px 0 #333, -1px 0 0 #333, 0 -1px 0 #333;
}

text-shadowについて

text-shadowでは、X軸方向のオフセット(ずらし具合)、Y軸方向のオフセット、ぼかしの半径、影の色の値を設定することができます。

SAMPLE

.sample {
  color: #fff;
  text-shadow: 1px 2px 5px #333;
}

値の左から順に、「1px」はX軸方向、「2px」はY軸方向のずれ、「5px」はぼかしの大きさ、「#333」が影の色を設定しています。

影の位置をX軸方向だけに「1px」ずらして、ぼかしの半径の値を「0」にすることで、一辺に線をつけることができます。

SAMPLE

.sample {
  color: #fff;
  text-shadow: 1px 0 0 #333;
}

text-shadowは、カンマ区切りで複数の影を設定することができるので、全ての面に線がつくように追加していきます。下のサンプルでは、さらにY軸方向にだけ「1px」ずらした線を追加しています。

SAMPLE

.sample {
  color: #fff;
  text-shadow: 1px 0 0 #333, 0 1px 0 #333;
}

さらにX軸方向にだけ「-1px」、Y軸方向にだけ「-1px」それぞれずらした影を追加して、縁取り文字は完成します。

X軸方向、Y軸方向にそれぞれ「1px」「−1px」ずらした線をつけることも可能ですが、その場合四隅の部分に隙間が空いてしまうので、少し手間でも各辺4つずつに設定した方がきれいに縁取ることができます。

縁取る以外にもドロップシャドウを追加することができるので、アレンジすれば立体的な縁取り文字を作ることもできます。

SAMPLE

.sample {
  color: #fff;
  text-shadow: 1px 0 0 #13c3ac,
               0 1px 0 #13c3ac,
               -1px 0 0 #13c3ac,
               0 -1px 0 #13c3ac,
               3px 3px 0 #13c3ac;
}

text-strokeで設定する

CSSの「text-stroke」プロパティで文字を縁取りする方法です。

線の太さと色を設定するだけで、簡単に文字の縁取りができます。

SAMPLE

<p class="sample">SAMPLE</p>

.sample {
  color: #fff;
  text-stroke: 1px #333;
  -webkit-text-stroke: 1px #333;
}

線は文字の内側に引かれるため、太くなると文字が潰れてしまいます。

また、IEには対応しておらず表示できるブラウザが限定されてしまうため、通常のWebサイトでは「text-shadow」を使った方法の方が向いています。