cssでテキストや文字に縁取り（アウトライン）や光彩を追加できたら便利だと考えたことはないでしょうか？css3から追加されたプロパティで、直接この要望に応えるものはないのですが、text shadowというプロパティを使えば、これらを実現することが可能です。
今回は、このtext shadowの基本的な使い方と、それを使って実際に縁取り(アウトライン)や光彩を追加する方法を解説します。
text-shadowの基本的な使い方
text-shadowの書き方は以下のように、「水平方向の距離」、「垂直方向の距離」、「影のぼかしの大きさ[半径]」、「影の色」の順番にスペース区切りで配置します。
影のぼかしの大きさ[半径]と影の色は省略することも可能です。省略した場合、影のぼかしの大きさ[半径]は「0」、影の色はテキストの色[color]と同じになります。
それでは、具体例を見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 |
.sample1{ text-shadow:3px 3px 0 #f00; } .sample2{ text-shadow:-3px -3px 0 #f00; } .sample3{ text-shadow:-3px -3px 1px #f00, 3px 3px 5px #00f; } |
text-shadowのサンプル1
text-shadowのサンプル２
text-shadowのサンプル３
「text-shadowのサンプル1」、「text-shadowのサンプル２」の例を見ともらうとわかる通り、水平方向は正数のときは左方向に、負（マイナス）の場合は右方向に影が移動します。
垂直方向は、正数のとき下方向、負（マイナス）の場合は上方向に影が配置されます。
そして、影のぼかしの大きさ[半径]が「0」のとき、ぼかしはかかりません。
「text-shadowのサンプル3」のように、「水平方向の距離」、「垂直方向の距離」、「影のぼかしの大きさ[半径]」、「影の色」を「，」で区切ると、複数のシャドウを重ねることができます。
影のぼかしの大きさ[半径]は数値が大きくなる程ぼかし範囲が大きく色が薄くなります。
text-shadowで光彩を表現する方法
「text-shadowの基本的な使い方」を読んでもらえれば、光彩の作り方はなんとなくわかってもらえたかもしれませんが、あらためて解説いたします。光彩というと、例えば文字の周りに光が差したような表現のことですが、text-shadowを使うとこういった表現も可能になります。設置方法はいたってシンプルで、text-shadowの「水平方向の距離」と「垂直方向の距離」の値を「0」に、「影のぼかしの大きさ[半径]」を光彩の大きさ、「影の色」を光彩の色として値を設定するだけです。たとえば、文字（テキスト）に黄色い半径10pxぐらいの大きさの光彩をつけるとしたら以下のように設定します。
|
1 2 3 |
.text{ text-shadow:0 0 10px #FF0; } |
光彩のサンプル
光彩にあたる色の調整は感覚になりますが、基本でも解説した、複数のシャドウを重ねる方法をつかって、濃さを調整します。
text-shadowで縁取り（アウトライン）を装飾する方法
次に、text-shadowを使って縁取り（アウトライン）をつける方法を解説しますが、これは、1pxの縁取り（アウトライン）をつける場合と２px以上の縁取り（アウトライン）をつける場合で違ってきます。それではそれぞれの設定方法を説明します。
１pxの縁取り（アウトライン）を装飾する場合
text-shadowで１pxの縁取り（アウトライン）を作る方法として一番見栄え良くできるのは、「影のぼかしの大きさ[半径]」を「0」で設定して、上下左右にそれぞれ１pxずつずらす方法です。
実際の方法をご確認ください。
|
1 2 3 |
.outline1{ text-shadow:1px 1px 0 #f00,-1px 1px 0 #f00,1px -1px 0 #f00,-1px -1px 0 #f00; } |
１pxの縁取り（アウトライン）
サンプルはわかりやすくするために、文字の色を白で配置しております。
4方向にそれぞれ1pxずつの影を配置することで、1pxの縁取り（アウトライン）ができあがりました。この方法は、text-shadowを設置する文字（テキスト）が1px以上の線で構成されていることを前提としていますので、あまり細い線の書体には向かない方法かもしれません。
さらに付け加えおくと、この方法は２px以上の縁取り（アウトライン）には向きません、縁取り（アウトライン）の太さを書体の太さに依存しているというのもありますが、テキストの4つ角に隙間ができてしまうので完全な縁取り（アウトライン）作る事ができないためです。
２px以上の縁取り（アウトライン）を装飾する場合
１pxの縁取り（アウトライン）を装飾する方法では、２px以上の縁取り（アウトライン）を装飾することができないということで、２px以上の場合の設置方法を解説します。
まずは、次のサンプルをご確認ください。
|
1 2 3 |
.outline2{ text-shadow:0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00; } |
２px以上の縁取り（アウトライン）
これは、文字（テキスト）に３pｘの縁取り（アウトライン）を設置した例です。
方法としては、とてもシンプルですが、「影のぼかしの大きさ[半径]」を「３px」を何枚もかさねることで、縁取り（アウトライン）を表現しております。「影のぼかし」部分に関していは、先ほども触れたとおり値が大きくなる程色が薄くなる傾向があるので、薄くなった分を埋めるために何枚も影を重ねています。
重ねる回数は目分量になりますが、この部分が濃くなることで縁取り（アウトライン）が表現されます。
最後に
記事は以上です、影を描くcssのプロパティであるtext-shadowを違う形で装飾に使っているので、多少イメージしたものと違うところがあるかもしれませんが、設置も簡単ですし是非ご活用ください。そしてもし、さらに良い方法がありましたらご紹介いただけると幸いです。
