神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

【CSS】text-strokeを使って文字に縁をつける方法についてまとめてみた

2019.12.12
CSS

 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ではないかと思われます(^-^)

スポンサーリンク
検 索