note for coding

白文字をダーク系の写真の上に配置することはよくあるが、見えづらいくなることが多い。見えづらい文字を見えやすく！Date: 2021.9.29 そこで視認性を上げるためにテキストにtext-shado.

ダーク系背景上の白文字を鮮明にするtext-shadowのTips

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

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

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

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

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

text-shadowを二度づけの場合

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

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

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

text-shadowを三度づけの場合

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

text-shadowを三度づけ＋サイズ違いの場合並べて見比べるまとめ

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

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