白文字をダーク系の写真の上に配置することはよくあるが、見えづらいくなることが多い。

そこで視認性を上げるためにテキストにtext-shadowを当てる。font-weight:boldも使いたいけどデザイン的に使えない場合もあるので今回はfont-weight:normalで。フォントは見えづらい明朝系。

とりあえずのtext-shadowの場合

ベーシックな黒シャドウtext-shadow:0px 0px 8px #000;を当てた場合を見てみる。影のぼかしの大きさはフォントサイズの三分の一ぐらいにした。

背景がベタの場合はこれだけでもよい気がする。いつもはこれだけだった（だからこの記事を書くことにした）

p{ text-shadow:0px 0px 8px #000; }

[基本]text-shadowのプロパティ値

1つ目のプロパティ値：
影の水平方向の位置。大きくなるほど右へ。マイナス値も可。
2つ目のプロパティ値：
影の垂直方向の位置。大きくなるほど下がる。マイナス値も可。
3つ目のプロパティ値：
影のぼかしの大きさ。

text-shadowを二度づけの場合

ところで、text-shadowはプロパティ値のセットを複数設定できる。
書き方はプロパティ値のセットをカンマ（,）で区切るだけ。backgroundなどと同じだ。

p{ text-shadow: プロパティ値のセット2, プロパティ値のセット1; }

そこでtext-shadowを二度づけしてみる。text-shadow:0px 0px 8px #000, 0px 0px 8px #000;

明朝体の日本語もかなりクッキリ。

（実は、複数のプロパティ値の設定は違う色を重ねて派手にするという発想しかもっていなかったので、この二度づけクッキリ、が目からうろこだった。text-shadowの解説例で発想が固定されがち・・・汗。）

p{ text-shadow:0px 0px 8px #000, 0px 0px 8px #000; }

text-shadowを三度づけの場合

それではさらにtext-shadowを重てみる。

かなりエッジがたってきた。しかし影が強すぎてフォントを飲み込みそうな感じが出てきた気もする。

p{ text-shadow:0px 0px 8px #000, 0px 0px 8px #000, 0px 0px 8px #000; }

text-shadowを三度づけ＋サイズ違いの場合

そこでちょっと工夫して最後に重ねた（一番上の）影のぼかしの大きさを他の倍、フォントの三分の二にしてみる。

キモチエッジが和らいだ。

p{ text-shadow:0px 0px 16px #000, 0px 0px 8px #000, 0px 0px 8px #000; }

並べて見比べる

まとめ

どれが一番良いかは背景次第で変わる。
背景がベタなのか、写真なのか、写真に透過レイヤーを重ねているのか。写真のドーンは均一に近いのか暗部も多いのか。

また、font-weight:boldも併用できるとtext-shadowのプロパティセットを減らせるかもしれないし、逆に増やさないといけないかもしれない。

だから以下を覚えておくということで。

・text-shadowは重ねづけできる
・影のぼかしの大きさを変えるとさらに細かく調整できる