CSSで文字に縁をつける方法としてはtext-shadowを使った方法がありますが、これだとせいぜい1pxぐらいしかいい感じに縁をつけることができません。。。
そこで今回はtext-strokeという文字装飾のCSSを使って、文字に縁をつける方法についてご紹介したいと思います！
text-strokeで文字に縁をつける
試しにtext-strokeで文字に1px、縁をつけたものが以下になります。
続いて2px、縁をつけたものは以下になります。
上のようにちゃんと2px、文字を縁取ってくれますが、文字のサイズが小さいと文字自体が縁で潰れてしまうこともあるので、ここは確認しながら縁の太さを設定する必要がありそうです！
実際にCSSでtext-strokeの設定する
では実際にCSSでtext-strokeの設定をする方法についてお話したいと思います。
今回は例として以下のHTMLを用意しました。
<span>テキストテキストテキスト</span>
上のHTMLに対して、今回は例として赤色で1px、縁をつけたい！となった場合は以下のようにCSSを設定します。
span {
text-stroke: 1px #ff0000;
-webkit-text-stroke: 1px #ff0000;
}
上のように設定することで、以下のように縁をつけてくれます。
縁の太さを変更したい場合は
これでもし2px、縁をつけたい場合は
span {
text-stroke: 2px #ff0000;
-webkit-text-stroke: 2px #ff0000;
}
上のようにpxの部分の数値を変更することで以下のように縁の太さを変更できます！
※ただ、最初の方でもお話したように文字サイズが小さいと上のように縁で文字が潰れてしまいます。。。
縁の色を変更したい場合は
もし縁の色を変更したい場合は
span {
text-stroke: 1px #ff0000;
-webkit-text-stroke: 1px #ff0000;
}
上の#ff0000のところのカラーコードを希望の色のものに変更することで縁の色を変更することができます！
例えば、青色の縁にしたい場合は
span {
text-stroke: 1px #0000ff;
-webkit-text-stroke: 1px #0000ff;
}
とすることで
このように色を変更できます！
まとめ
以上がtext-strokeで文字に縁をつける方法でした！
text-strokeは、IEなど一部のWebブラウザでは対応していない場合はありますが、キレイに文字に縁をつけてくれるので、サイトをデザインするうえで重宝できるCSSではないかと思われます(^-^)
