今回は、お仕事でテキストを縁取りする事態が発生したので、こちらを紹介していきます！！text-shadowを限界まで(?)使った実に厄介なものになっているので限界までわかりやすく説明しました（笑）最後の方にはトリッキーすぎる記述をSASSのmixinにまとめたものを用意しているので、ぜひ持って帰ってくださいね！

はじめに

まず最初に小言なんですけど、

なんでCSSで用意してくんねぇんだよぉぉおおぉぉお！！！！

ふぅ、スッキリした～☆

と、いうわけでなぜかCSSで用意されていないテキストの縁取りなんですが、「text-shadow」をトリッキーに使うことで実装できたので、こちらを紹介していきます！

text-shadowの基本

「text-shadow」はテキストに影を付けるプロパティになります。

See the Pen text-shadow by カノト (@kanoto) on CodePen.

値の内容は「横にXピクセル　縦にYピクセル　ぼかしNピクセル　影の色」の順になります。

さて、これの値が複数の場合はどうなるでしょうか？

やってみましょう！！（わかりやすいように影をめちゃずらしました）

See the Pen text-shadow複数 by カノト (@kanoto) on CodePen.

おわかりいただけただろうか・・・。

値を指定した個数だけ影が増えるのですね！！

この特性を使って、縁取りを作っていきます！

テキストに縁取りを付けてみよう

まずは基本形

考え方としては、ぼかし無しのシャドウをテキストの周り（上下左右）に配置すればOKという感じです！

それでは実際にやってみよう！

See the Pen 縁取りpart1 by カノト (@kanoto) on CodePen.

おぉ！いい感じ！！

と思いきや、ちょっとビミョーに切れてる・・・。

次に応用編

基本形だと、角が切れてしまう問題点がありました。

これに加えて縁を２ｐｘにした場合どうでしょう？

See the Pen 縁取りpart2 by カノト (@kanoto) on CodePen.

あっ、あっ・・・

これを4px, 5pxと増やしていくとドンドン崩れていきます（泣）

これを解決するために斜めにもtext-shadowを付ける必要があります！（８方向につけるイメージ）

See the Pen 縁取りpart3 by カノト (@kanoto) on CodePen.

これなら、2pxでも角が切れずに表示することが出来ます！

これを4px, 5pxと増やしても崩れることはないと思います！！！

SASSのミックスインを活用しよう！

さて、うまい具合に縁取りは出来たのですが・・・。

text-shadow: #000 2px 0px,  #000 -2px 0px,
            #000 0px -2px, #000 0px 2px,
            #000 2px 2px , #000 -2px 2px,
            #000 2px -2px, #000 -2px -2px,
            #000 1px 2px,  #000 -1px 2px,
            #000 1px -2px, #000 -1px -2px,
            #000 2px 1px,  #000 -2px 1px,
            #000 2px -1px, #000 -2px -1px;

これ見てどう思いますか笑

視認性悪すぎ！！！

おそらく、これで先輩にレビューしてもらったら

「お前、これ何やってんの？？？」

ってなりそうですよねｗｗ

おそらく、１つや２つだったら大丈夫かもしれませんが、何個もあった場合、CSSがカオスなことになると思います。

そこで、次はSASSのmixinを使ってまとめちゃおう！という話になります。

というわけで、ミックスイン作ってみました！！！

=text_border($weight: 1px, $color: #fff, $blur: 0px)
  text-shadow: $color $weight 0px $blur,  $color (-$weight) 0px $blur, $color 0px (-$weight) $blur, $color 0px $weight $blur, $color $weight $weight $blur, $color (-$weight) $weight $blur, $color $weight (-$weight) $blur, $color (-$weight) (-$weight) $blur, $color ($weight/2) $weight $blur,  $color (-$weight/2) $weight $blur, $color ($weight/2) (-$weight) $blur, $color (-$weight/2) (-$weight) $blur, $color $weight ($weight/2) $blur,  $color (-$weight) ($weight/2) $blur, $color $weight (-$weight/2) $blur, $color (-$weight) (-$weight/2) $blur

See the Pen 縁取り（SASS） by カノト (@kanoto) on CodePen.

まぁ、これでもなかなか辛いが、先輩ならきっとわかってくれるはず！！

ミックスインの説明をすると以下のようになります。

=text_border($weight: 縁の太さ, $color: 縁の色, $blur: 縁のアンチエイリアス)

説明には出してなかったのですが、縁を太くするとジャギー（角のギザギザ）が出る場合があります。

なので、ジャギーが出た場合は「$blur」に値(px)を指定して少しぼかしてあげればキレイな縁になると思います。

というわけで、みなさんもぜひ、この縁取りの方法を試してみてくださいね～！！