テキストの縁取りをCSSでつけてみる

今回はテキストの縁取りです。

デザインカンプにこんな縁取りのデザインがありました。

結論から言えば、これをCSSのみで忠実に再現するのは困難でした。

原因としては

・縁取りの線が太めで、さらにくっきりしていること

です。

現在のCSSで縁取りができるプロパティは2種類あります。

・text-strokeで縁取りをする。

・text-shadowで影をつけていき、縁取りのように見せる。

前者が圧倒的に簡単ですが、比較的新しめのプロパティで、対応ブラウザがまだ少なく、chromeでもベンダープレフィックスが必要なほどです。

一つずつ解説していきます。

⚫︎text-strokeで縁取りを行う場合

こちらは非常に簡単で

【HTML】

<p>縁取り</p>

【CSS】

p {

  -webkit-text-stroke: 2px #ff0000;

  text-stroke: 2px #ff0000;

}

これだけで縁取りが完成します。

縁取りのプロパティなだけあって、しっかり綺麗にできてます。

境界線の前後に色をつけるようなので、あまり太くすると文字がつぶれていきますので注意が必要です。

そういったこともあり、冒頭のような太めの縁取りは困難です。

⚫︎text-shadowで縁取り風に影をつける場合

基本的には影をつけるプロパティなので、結構CSSの量が多くなりますし、綺麗な表示にはならないので、ぼかさないと使えないかと思いました。

【HTML】

<p>縁取り</p>

【CSS】

p {

 text-shadow: 

3px 3px 0px #ff0000, 

-3px -3px 0px #ff0000, 

-3px 3px 0px #ff0000, 

3px -3px 0px #ff0000, 

3px 0px 0px #ff0000, 

-3px 0px 0px #ff0000, 

0px 3px 0px #ff0000, 

0px -3px 0px #ff0000;

}

角がガタガタで、縁の太さが大きくなるほどもっと顕著になります。

これにぼかしを入れてみると、、、（2pxのぼかし）

ちょっと見れる感じになります。

今回の件ではくっきり太めの縁取りだったため、使えなそうですが、使う機会はありそうです。

といったようにまだ完全に縁取りをCSSだけで解決するのが難しい状況もあるようです。

今回の冒頭のような縁取りを完全再現するのであれば、画像でやるしかないのかなーと考えています。

何かの参考になれば幸いです。