CSSで文字を縁取りする方法【太い縁でもキレイに表示】

縁取り縁取り

Webフォントが使えるようになったことで、画像に頼らなくてもロゴやコピーをテキストとCSSで表現できるようになりました。

しかし、背景によって文字が読みづらい場合、文字を縁取りしたくなる場合があります。

そんなときに使えるCSStext-shadowなどで縁取り文字にする方法を紹介します。

ただし太い縁にするときは一工夫必要になります。

以下の実装例は画像ではなく、htmlとCSSだけで実装しています。

方法1.text-shadowを使う

text-shadowはテキストに影をつけるためのCSSです。「縁」とは少し違います。しかしこれを工夫することで「縁」を表現しています。

CSSを以下のように指定します。

メリット：IEでも使える

デメリット：太い線のとき、きれいな縁にならない（そのためぼかす）

細い縁の場合（1px）

縁取り

<style>
.shadow{
    padding: 10px;
    color: #CCC;
    font-weight: bold;
    font-size: 100px;
    text-shadow:
           1px 1px 0px #000, -1px -1px 0px #000,
          -1px 1px 0px #000,  1px -1px 0px #000,
           1px 0px 0px #000, -1px  0px 0px #000,
           0px 1px 0px #000,  0px -1px 0px #000;
    margin: 0;
}
</style>
<p class="shadow">縁取り</p>

text-shadowを複数回使って文字の周りを四方八方に1周させている状態です。上、右、下、左、左上、右上、右下、左下に1pxのぼやけない影を指定しています。

太い縁の場合（3px）

縁取り

<style>
.shadow{
    padding: 10px;
    color: #CCC;
    font-weight: bold;
    font-size: 100px;
    text-shadow:
            3px 3px 0px #000, -3px -3px 0px #000,
           -3px 3px 0px #000,  3px -3px 0px #000,
            3px 0px 0px #000, -3px -0px 0px #000,
            0px 3px 0px #000,  0px -3px 0px #000;
    margin: 0;
}
</style>
<p class="shadow">縁取り</p>

text-shadowで太い縁を作ろうとすると一部の角がトゲトゲになってしまっているのがわかるでしょうか。

美しくないですね。デザイナーとしては気になるところです。

ぼかしてごまかす

縁取り

<style>
.shadow{
    padding: 10px;
    color: #CCC;
    font-weight: bold;
    font-size: 100px;
    text-shadow:
            3px 3px 3px #000, -3px -3px 3px #000,
           -3px 3px 3px #000,  3px -3px 3px #000,
            3px 0px 3px #000, -3px -0px 3px #000,
            0px 3px 3px #000,  0px -3px 3px #000;
    margin: 0;
}
</style>
<p class="shadow">縁取り</p>

text-shadowは本来影をつけるためのCSSです。ぼかすことで角のトゲトゲをごまかすことができます。

ぼかしが気にならない場合はこの方法がオススメです。

text-shadowを減らしたバージョン

ところでtext-shadowに8つも指定していると修正が大変です。以下は4つ（上、右、下、左）だけ指定した場合です。

あまり気にならなければこちらでもよいかと思います。

縁取り

<style>
.shadow{
    padding: 10px;
    color: #CCC;
    font-weight: bold;
    font-size: 100px;
    text-shadow:
            3px 3px 3px #000, -3px -3px 3px #000,
           -3px 3px 3px #000,  3px -3px 3px #000;
    margin: 0;
}
</style>
<p class="shadow">縁取り</p>

方法2.-webkit-text-strokeを使う

CSSの-webkit-text-strokeはまさに文字の縁取りをするためのCSSです。しかし残念ながらIEには対応していません。

CSSに以下のように指定します。

メリット：きれいな縁になる

デメリット：IEで使えない、内側にも縁が描写される（そのため一工夫必要）

細い縁の場合（1px）

縁取り

<style>
.stroke{
    padding: 10px;
    color: #CCC;
    font-weight: bold;
    font-size: 100px;
    -webkit-text-stroke:1px #000;
    position: relative;
    margin: 0;
}
</style>
<p class="stroke">縁取り</p>

細い縁の場合は問題ありませんね。

太い縁の場合（3px × 2）

縁取り

<style>
.stroke{
    padding: 10px;
    color: #CCC;
    font-weight: bold;
    font-size: 100px;
    -webkit-text-stroke:6px #000;
    margin: 0;
}
</style>
<p class="stroke">縁取り</p>

-webkit-text-strokeは文字の境界線に対して外側にも内側にも描写します。その合計値が指定したpx数になります。

※上記例の場合は6px＝外側3px ＋ 内側3px

しかし、このままでは文字がつぶれてしまい読みづらいので一工夫必要です。

その工夫とは「縁のない同じ文字を重ねる」ことです。

縁のない同じ文字を重ねる

縁取り縁取り

<style>
.stroke{
    padding: 10px;
    color: #CCC;
    font-weight: bold;
    font-size: 100px;
    -webkit-text-stroke:6px #000;
    position: relative;
    margin: 0;
}
.fuchiue{
    -webkit-text-stroke: 0;
    position: absolute;
}
</style>
<p class="stroke"><span class="fuchiue">縁取り</span>縁取り</p>

<style>
.stroke{
    padding: 10px;
    color: #CCC;
    font-weight: bold;
    font-size: 100px;
    -webkit-text-stroke:6px #000;
    position: relative;
    margin: 0;
}
.stroke::before{
    content: "縁取り";
    -webkit-text-stroke: 0;
    position: absolute;
}
</style>
<p class="stroke">縁取り</p>

同じ文字を用意し、まったく同じCSSをかけ、「position: absolute」で上に重ねるという方法です。top,leftは指定不要です。

ソースは2パターンあります。

html側にspanタグで文字を用意する方法か、beforeを使ってCSS側に文字を用意する方法です。

いずれにしても文字を2回記述する必要があることはデメリットともいえます。

決まったロゴやコピーライトに使うくらいなら実現できるでしょう。

比較表

	stroke	text-shadow
細い縁	縁取り	縁取り
太い縁	縁取り	縁取り
工夫版	縁取り縁取り	縁取り

まとめ

太い線のとき、ぼかしてもいいなら問題なし。IEでも利用可。

IEでは表示できないがきれいに縁取りできる。
IEで縁がなくていいならアリ。

　

-webkit-text-strokeとtext-shadowそれぞれ使った文字の縁取り方法を紹介しました。

それぞれのメリットデメリットと上記の比較表を加味してあなたのサイトにとって最適な方を利用してみてください。

以上、CSSで縁取り文字にする方法でした。