CSS: text-shadow でテキストの「縁取り」を実現する

CSStext-shadow プロパティはテキストに影を付けるプロパティです。 text-shadow プロパティを利用して、テキストの「縁取り(アウトライン)」を 表現することができます。

text-shadow は通常次のように指定します。

text-shadow: 色 右方向 下方向 ぼかす範囲;

この影の設定(色 右方向 下方向 ぼかす範囲)をカンマ「,」で区切ることで複数の影をつけることができます。 縁取りを実現するには、上下左右に4つの影を設定します。

縁取り(アウトライン)のサンプル

サンプルをいくつか表示します。どの縁取り(アウトライン)が良いかは好みの問題ですから、 最終的な見た目は自分で微調整してください。

まずは上下左右に 1px だけずらし、ぼかしの無い縁取りです。

text-shadow で縁取り


text-shadow: 
    black 1px 0px 0px,
    black -1px 0px 0px,
    black 0px 1px 0px,
    black 0px -1px 0px;


次はぼかしを 1px いれてみます。

text-shadow で縁取り


text-shadow: 
    black 1px 0px 1px,
    black -1px 0px 1px,
    black 0px 1px 1px,
    black 0px -1px 1px;


すべて 1px にしてみます。

text-shadow で縁取り


text-shadow: 
    black 1px 1px 1px,
    black -1px 1px 1px,
    black -1px -1px 1px,
    black 1px -1px 1px;


上下のずらしを 2px にしてみます。

text-shadow で縁取り


text-shadow: 
    black 2px 2px 1px,
    black -2px 2px 1px,
    black -2px -2px 1px,
    black 2px -2px 1px;

HTML・CSS入門