文字を装飾する方法はさまざまですが、CSSを使った縁取りは影や立体感の演出できて視認性があがります。
今回紹介する方法は以下の３つです。
- text-stroke
- text-shadow
- （番外編）SVG
text-strokeで縁取る方法
text-strokeは文字の枠線を指定するプロパティです。
CSS3で新たに追加されたプロパティのため、-webkit-のようにベンダープレフィックス（接頭辞）が必要な点に注意してください。
また枠線が太くなると塗りつぶされた印象になるので、最大でも2pxまでに留めておくのが無難でしょう。
See the Pen text-decoration-sample1 by Usagi (@naniwa_usagi) on CodePen.
text-shadowで縁取る方法
text-shadowは影をつけるプロパティですが全方向に同じ色の影を作ることで擬似的に文字を縁取っているように見せることができます。
See the Pen text-decoration-sample2 by Usagi (@naniwa_usagi) on CodePen.
ただし、影を太くすると角の表現が不自然になります。
特に日本語表記の場合に目立つことが多いです。
text-shadowの幅は2~3px程度に留めておくのが良いでしょう。
See the Pen text-decoration-sample3 by Usagi (@naniwa_usagi) on CodePen.
（番外編）SVGで縁取る方法
HTMLのSVGタグを使用して縁取りを作ることも可能です。
stroke-widthで縁の幅を指定しますが、１以下の数字が文字がつぶれて見えないのでおすすめです。
サンプルでは0.5と設定しています。
また、stroke-linejoin: round;を設定すると枠線を丸めることができますのでお好みに応じて使い分けてみてください。
See the Pen Untitled by Usagi (@naniwa_usagi) on CodePen.
まとめ
テキストを縁取る方法は利用想定のブラウザなどによって選択肢が異なってきますので状況に応じて使い分けられるように使い方を覚えておきましょう！
今回は以上です。
