【CSS】テキストにアウトラインを付ける

CSSでテキストにアウトラインを付けたい！

概要

今回の記事では、CSSでテキストにアウトラインを付ける手順を掲載する。

環境

• Google Chrome 116.0.5845.96（Official Build）（64 ビット）

手順書

text-shadowを使ってテキストにアウトラインを付ける例。

.outlined-text {
    color: #000000;
    text-shadow:
        -1px -1px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        1px 1px 0 #ffffff;
}

<span class="outlined-text">ネコニウム研究所</span>

こんな感じになる。

ネコニウム研究所

text-shadowを多く設定するとアウトラインの幅が大きくなる。

.outlined-text {
    color: #000000;
    text-shadow:
        -1px -1px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px 1px 0 #ffffff,
        1px 1px 0 #ffffff,
        0px -2px 0 #ffffff,
        0px 2px 0 #ffffff,
        -2px 0px 0 #ffffff,
        2px 0px 0 #ffffff,
        -2px -2px 0 #ffffff,
        2px -2px 0 #ffffff,
        -2px 2px 0 #ffffff,
        2px 2px 0 #ffffff
}

こんな感じ。(ちょっと無理があるような)

ネコニウム研究所

-webkit-text-strokeを使うと簡単にアウトラインを付けれるけどWebkitベースのブラウザ（ChromeとかSafariとか）でしか機能しない。

.outlined-text {
    color: #000000;
    -webkit-text-stroke: 1px #ffffff;
}

ネコニウム研究所

こっちの方がコードはスマートなんだけども、テキストが細いとアウトラインの色で潰れちゃう。

ネコニウム研究所

フォントによるかもだけどキレイに出力するには結構大きめのフォントサイズにする必要がありそう。（上記は64px）

まとめ（感想文）

leafletの地図の上にテキストを載せたい時に見やすくなるかもね！