CSSで文字に縁取りを付けよう

文字がライトテーマだとはっきり見えても、ダークテーマにすると見えにくくなる

あるいはその逆の場合もあったり、どうすればはっきり見やすくなるのか・・・

ライトテーマとダークテーマで文字色を切り替えればいいのかもしれないけれど、文字色は変えたくない。

そんな時は、文字に縁取りを付けて見やすくすればいい！

CSSで文字に縁取りを付けよう

そんな時はCSSで簡単に文字に縁取りを付けることができます。

記法は2種類あり

と

の2種類があり、-webkit-text-strokeは-webkit-text-stroke-colorと-webkit-text-stroke-widthのプロパティを両方一気に書くことが出来るので、-webkit-text-strokeの方が1行でプロパティを書けるのでおすすめです。

逆に、-webkit-text-stroke-colorと-webkit-text-stroke-widthはセットで書かないと期待する効果が得られません。

-webkit-text-strokeの記法

-webkit-text-strokeは下記のようにプロパティを設定します。

[width]にはサイズ、[color]には色を指定します。

[color]には普通のcolor（redやblue等）だけでなく、RGB値やHEX値、oklch()関数も書けます。

文字への縁取りの一例

文字色はTailwindcssのteal-300と合わせようと思うので、oklch()関数を使います。

<div class="text-5xl text-gray-600 edge-color">
    aaa
</div>

<div class="text-5xl text-gray-600 edge-color">
    aaa
</div>

.edge-color {
  -webkit-text-stroke: 1px oklch(85.5% 0.138 181.071);
}

.edge-color {
  -webkit-text-stroke: 1px oklch(85.5% 0.138 181.071);
}

文字に対して縁取りを入れることが出来ました。

また、先述のように下記の記法でも同じ効果が得られます。

.edge-color {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: oklch(85.5% 0.138 181.071);
}

.edge-color {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: oklch(85.5% 0.138 181.071);
}

ちなみに、どのブラウザでも使えるそうなので、安心して使えますね。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/-webkit-text-stroke

追記

他の部分をTailwindcssで書いていたので、

全部CSSに書き直して、CODE PENで作ってみました。

See the Pen color-stroke by gulf_stream (@Hitomi-Kuge) on CodePen.

参考になれば嬉しいです。