こんにちは、私です。

今回は、CSSを使って文字の周りに白枠を付ける方法。ちょっとしたデザインの工夫で、文字をより際立たせたいときに便利です。

テキストを白枠で囲む方法

HTML

<p class="outlined-text">白枠で囲まれた文字</p>

CSS

.outlined-text {
    color: black; /* 文字色 */
    text-shadow: 
        -1px -1px 0 #fff,  
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff; /* 白枠を作るためのシャドウ */
}

ざっくり解説

text-shadow プロパティを使って、文字の周りに影をつけています。この影を四方に少しずつずらして配置することで、文字の周りに白い枠ができるようにしています。

おわり

文字の周りに白枠をつけると、デザインにアクセントが加わり、文字がより見やすくなります。もちろん色を変えれば白枠以外にもできますし、text-shadow プロパティを使ったこの方法は、手軽に実現できるのでおすすめです。