CSSでテキスト文字の周りを縁取りする方法

テキスト文章をCSSスタイルで縁取るには、text-shadowプロパティを使います。

横方向と縦方向（プラス数値・マイナス数値）の2つは必須で、次がぼかしの長さ（初期値0）最後に色指定ができます。

「,」で区切って複数スタイルを適用できるので、8方向から丁寧に影をつければ縁取る事ができます。

CSSでテキスト文字の周りを縁取りする方法

今回はCSSネタです。

CSSスタイルのみを使って、テキストの周りを縁取りする方法についてご紹介します。

背面にある画像が影響してテキストが見にくくなった時、一つの選択肢になりますね。

※例えば白バックの上に白系の文字を載せると見えにくくなりますが、これを回避できます。

そんな時、周りを縁取る方法を覚えておけばすぐに解決できます。

CSSでのみ実現しますので、場面場面での改変がしやすいメリットがあります。

CSS text-shadow：基本編

使うのは、CSSのtext-shadowプロパティです。

これはテキストに「影」を作るスタイルですね。

基本構成

まずは縁取りしたいテキスト要素（pやhx）に、適当なclass名をつけましょう。

今回はブロック要素に対してではなく、テキスト要素に対してCSSを付与します。

HTMLソース

<p class="sh">サンプルテキスト</p>

今回はshadowにあてがって、クラス名を「sh」としています。

基本CSS

.sh{ text-shadow: 2px 2px; }

基本は、上記の様に値を2つ設定します。0pxでも良いので2つの値は必ず記述します。

ぼかし付きCSS

.sh{ text-shadow: 2px 2px 3px; }

上記は値が3つ設定してありますが、3つ目には「ぼかしの長さ」が指定できます。

3つ目が無い場合は、初期値（0px）となり「ぼかしなし」となります。

ぼかしと色付きCSS

.sh{ text-shadow: 2px 2px 3px #cc0000; }

これは末尾に色指定を追加したものです。影の色を指定できます。

色はrgba指定も可能です。rgba(255, 255, 255, 0.5);など透過も可能。

設置例

text-shadow: 2px 2px;	サンプルテキスト 基本形
text-shadow: 2px 2px 3px;	サンプルテキスト ぼかしが入っているのがわかります。
text-shadow: 2px 2px 3px #000;	サンプルテキスト ぼかし＋赤色

以下に各値の役割をまとめました。

CSS text-shadow：応用編

複数の値を適用できる

text-shadowは、複数のプロパティ値を入れる事ができます。

それぞれの間を「,」で区切る事で、何回でも影のスタイルを当てる事ができる訳です。

その際、水平値・垂直値・ぼかしの長さ・色の流れはセットです。

プロパティ値2つを重ねる

.sh{ text-shadow: 2px 2px 0 #fff, 3px 3px 0 #000; }

上記は2つのスタイルを当てており、カンマの後を改行しているだけです。

まずは文字から横2px縦2pxの位置に白影をつけ、そのさらに1px右と下（計3px）の位置に黒影を入れています。

プロパティ値5つを重ねる

.sh{ text-shadow: 1px 1px 0 #d00, 2px 2px #d00, 3px 3px #d00, 4px 4px #d00, 5px 5px #d00; }

上記は5つのスタイルを当てたものになります。

text-shadowはborderと違い、縁取りの「太さ」を設定する事ができません。

そのため1pxずつずらして5回重ねる事で、5pxの太さを実現しています。

3つ目のぼかしの数値は省略しているので「0」です。

設置例

text-shadow: 2px 2px 0 #fff, 3px 3px 0 #000;	SAMPLE TEXT 2種類の影がズレて見ています。
text-shadow: 1px 1px 0 #d00, 2px 2px #d00, 3px 3px #d00, 4px 4px #d00, 5px 5px #d00;	サンプルテキスト 厚みのある影を演出しています。

この様にカンマで区切る事により、1つのテキストに対して複数の影を付けることが可能です。

テキストを縁取る書き方

このtext-shadowをうまく重ねる事で、テキスト周りを縁取る事ができます。

実は水平方向と垂直方向は、マイナス数値も入れる事ができます。これをフル活用していく訳ですね。

縁取りCSS

4方向から重ねた場合

.sh{ text-shadow: 2px 2px #000, -2px 2px #000, 2px -2px #000, -2px -2px #000; }

上記は右下, 左下, 右上, 左下の4方向をそれぞれ指定しています。

正直4方向からのカバーのため、四隅部分が微妙に囲えていません。

8方向から重ねた場合

.sh{ text-shadow: 1px #d00, 1px 1px #d00, 0 1px #d00, -1px 1px #d00, -1px 0 #d00, -1px -1px #d00, 0 -1px #d00, 1px -1px #d00; }

上記は右, 右下, 下, 左下, 左, 左上, 上, 右上の8方向をそれぞれ指定しています。

3つ目のぼかしの数値は省略しているので「0」です。

設置例

text-shadow:2px 2px #000, -2px 2px #000, 2px -2px #000, -2px -2px #000;	サンプルテキスト 各隅が切れているように見えます。
text-shadow: 1px 0 #d00, 1px 1px #d00, 0 1px #d00, -1px 1px #d00, -1px 0 #d00, -1px -1px #d00, 0 -1px #d00, 1px -1px #d00;	サンプルテキスト きれいに縁取りができています。

上記の様に基本的には8方向から影をつけると、きちんと縁取りできます。

CSSでテキストを縁取る際は、文字と文字の間隔がある程度確保できていないと、つぶれてしまいます。

影をつける際は、一緒に適切な間隔スペースをつける様にしましょう。

一押し人気コーナー紹介