CSSでの文字の縁取りの方法【現役エンジニアが解説】

PROGRAM

今回は、CSSでの文字の縁取りの方法について、3つのパターンに分け、簡単に解説していきます。

text-shadow

text-shadowプロパティで縁取り可能です。

text-shadowプロパティで上下左右に影を付けることで表現します。

.hoge{
    font-size:40px;
    color:#000000;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #ffffff,
                -1px 1px 0 #FFF, 1px -1px 0 #ffffff,
                0px 1px 0 #FFF,  0-1px 0 #ffffff,
                -1px 0 0 #FFF, 1px 0 0 #ffffff;
}

上記のコードでは、hogeのクラスの要素の文字を40ピクセルで縁取り文字として表示しています。

text-stroke(IE以外)

text-strokeプロパティで文字の内外に縁を付けられます。

ただし、text-strokeプロパティはIEは未対応のため、注意が必要です。

.hoge{
    font-size:40px;
    color:#000000;
    text-stroke:1px #ffffff;
    -webkit-text-stroke:1px #ffffff;
}

上記のコードでは、hogeというクラスを持つ要素の文字を40ピクセルで縁取り文字として表示しています。

SVGとCSSによる縁取り

SVGのtext要素のプロパティのstrokeとstroke-widthでも縁取れます。

strokeプロパティには縁の色を指定し、stroke-widthプロパティには縁の太さを指定します。

<svg style="zoom:1.5;">
    <text x="10" y="50" style="font-size:40px;stroke:#ffffff;stroke-width:8;stroke-linejoin:round;">ほげ</text>
    <text x="10" y="50" style="font-size:40px;fill:#000000;stroke-linejoin:round;">ほげ</text>
</svg>

上記のコードでは、SVGを使って、ほげという文字を、文字サイズが40ピクセルの縁取り文字として表示しています。