【CSS】文字にアウトラインをつける

CSSだけを使って文字にアウトラインをつけて、白抜きにした感じの文字を表現する方法を紹介します。これを使えば、画像を作らなくてもテキストベースでアウトライン文字を作ることができます。

アウトラインの作り方

テキストにアウトラインをつけるには、text-shadowプロパティを使うことで表現することができます。

p {
  text-shadow: 1px 1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,-1px -1px 0 #000;
  color: #fff;
}

このように、カンマ区切りで四方向に1pxずつ影をつけることで、アウトラインを表現することができます。「1px 1px 0 #000」部分の値は、1番目が右方向にどれだけずらして影をつけるか、2番目が下方向にどれだけずらして影をつけるか、3番目が影をぼかす範囲、最後に色を指定しています。逆に左方向と上方向に影をつけたいときは、それぞれマイナスの値を指定すればできます。

以上が、CSSだけで文字にアウトラインをつける方法となります。