はじめに

みなさんは、テキストに縁をつけたことがありますか？

テキストに縁をつけるには、-webkit-text-stroke を使うことで、テキストに縁をつけることができます
しかし、-webkit-text-stroke だけを使うと以下の画像のように、デザイン的にあまり美しくないです！

そのため、この記事では、テキストの枠線と塗りの順番を入れ替え、デザイン的にいい感じにする方法を紹介しようと思います！

`paint-order` とは？

テキストの枠線と塗りの順番を入れ替えるには、paint-order というプロパティを使います！

paint-order は、テキストコンテンツやシェイプが描画されるときの塗りつぶしと輪郭 (およびマーカーの描画) の順序を制御することができるプロパティです。

paint-order の値は以下を指定することができます。

normal：通常の描画順にする
stroke・fill・markers：これらを指定する描画したい順序を指定する

/* 単一の値 */
paint-order: stroke; /* 最初に輪郭、それから塗りつぶしとマーカーを描画 */
paint-order: markers; /* 最初にマーカー、それから塗りつぶしと輪郭 */

/* 複数の値 */
paint-order: stroke fill; /* 最初に輪郭を、それから塗りつぶしを、そしてマーカーを描く */
paint-order: markers stroke fill; /* マーカー、輪郭、塗りつぶしの順に描く */

テキストの枠線と塗りの順番を入れ替える

テキストの枠線と塗りの順番を入れ替えるには、paint-order: stroke を指定することで、デザイン的にいい感じになります！

See the Pen Untitled by でぐぅー | Qiita (@sp_degu) on CodePen.

まとめ

この記事では、テキストの枠線と塗りの順番を入れ替え、デザイン的にいい感じにする方法を紹介しました！
ぜひこの記事を参考にテキストの縁をいい感じにしてみてください！

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。