どうも！LSSです！！
背景つきのボックスに文字を入れた時、背景がごちゃごちゃしていて文字が読みづらくなった、という経験はありませんか？
そんな時に、文字色を変えてみたり、文字サイズを大きくしたり、太字にしたり…で対処する事があるかと思いますが、それでもどうにもならない時に
「text-shadowを使う」
という、もうひとつの手段があります！という内容の記事です^^
なお、今回のサンプルとして、「白と黒を使用しているために極端に文字が読み難くなる」、水玉デザイナーの「ぱんだちゃんコード」を使用しています！
※width、heightの指定を削除し、他にボックス装飾要素を加えて使用しています。
- 普通に文字を乗せるとこんな感じ
- 文字の右下1px1pxに白いtext-shadowを追加してみる
- 左上にもtext-shadowを追加
- 左上、右下、それぞれ2pxずらしてみる
- さらに欲張って3pxずらしてみる
- 位置をずらさず、5pxのぼかしをかけてみます
- 位置をずらさず、5pxのぼかしを３重にかけてみます
- あとがき
普通に文字を乗せるとこんな感じ
元
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
コード
<div style="background-color: lightblue; background-size: 50px 50px; background-image: radial-gradient(circle 3px at 33% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 17% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 20% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 28% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 36% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 13% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 83% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 67% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 70% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 78% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 86% 65%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 63% 65%,#000000ff 99%,transparent 0%); border: 10px outset lightblue; border-radius: 10px; padding: 0.6em; font-size: 25px; font-weight: bold; color: black;">と、まぁ、そんなわけで、text-shadowは<br />文字の読みやすさ改善にも<br />おおいに使える！と思うわけです^^</div>
青文字部分は、ボックスの追加装飾（盛り上がって見える枠線、角丸、内部に余白）を施す指定、オレンジの文字は文字に対する指定（フォントサイズ25px、太字、文字色を黒）です。
ぶっちゃけ、ひどく読みづらいですねｗｗｗ
文字の右下1px1pxに白いtext-shadowを追加してみる
元（比較用）
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
1px1pxの白いtext-shadow追加
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
コード
<div style="background-color: lightblue; background-size: 50px 50px; background-image: radial-gradient(circle 3px at 33% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 17% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 20% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 28% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 36% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 13% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 83% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 67% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 70% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 78% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 86% 65%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 63% 65%,#000000ff 99%,transparent 0%); border: 10px outset lightblue; border-radius: 10px; padding: 0.6em; font-size: 25px; font-weight: bold; color: black; text-shadow: 1px 1px 0px white;">と、まぁ、そんなわけで、text-shadowは<br />文字の読みやすさ改善にも<br />おおいに使える！と思うわけです^^</div>
赤文字部分がtext-shadowを追加した部分です。
並べてみたのを見比べてみると、ちょっとだけ下の方が読みやすくなってますね。
左上にもtext-shadowを追加
元（比較用）
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
左上にもtext-shadowを追加
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
コード
<div style="background-color: lightblue; background-size: 50px 50px; background-image: radial-gradient(circle 3px at 33% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 17% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 20% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 28% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 36% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 13% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 83% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 67% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 70% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 78% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 86% 65%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 63% 65%,#000000ff 99%,transparent 0%); border: 10px outset lightblue; border-radius: 10px; padding: 0.6em; font-size: 25px; font-weight: bold; color: black; text-shadow: 1px 1px 0px white, -1px -1px 0px white;">と、まぁ、そんなわけで、text-shadowは<br />文字の読みやすさ改善にも<br />おおいに使える！と思うわけです^^</div>
右下、左上、それぞれ1pxずらしたところに白いtext-shadowを配置しています。
さらに文字が認識しやすくなりましたね！（それでもまだ見づらさは残りますが^^;）
左上、右下、それぞれ2pxずらしてみる
元（比較用）
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
左上、右下、それぞれ2pxずらしてみる
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
コード
<div style="background-color: lightblue; background-size: 50px 50px; background-image: radial-gradient(circle 3px at 33% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 17% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 20% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 28% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 36% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 13% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 83% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 67% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 70% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 78% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 86% 65%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 63% 65%,#000000ff 99%,transparent 0%); border: 10px outset lightblue; border-radius: 10px; padding: 0.6em; font-size: 25px; font-weight: bold; color: black; text-shadow: 2px 2px 0px white, -2px -2px 0px white;">と、まぁ、そんなわけで、text-shadowは<br />文字の読みやすさ改善にも<br />おおいに使える！と思うわけです^^</div>
文字まわりの白い部分の幅が広がった事で、より背景と文字が見分けやすくなりました！
さらに欲張って3pxずらしてみる
元（比較用）
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
さらに欲張って3pxずらしてみる
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
コード
<div style="background-color: lightblue; background-size: 50px 50px; background-image: radial-gradient(circle 3px at 33% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 17% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 20% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 28% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 36% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 13% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 83% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 67% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 70% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 78% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 86% 65%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 63% 65%,#000000ff 99%,transparent 0%); border: 10px outset lightblue; border-radius: 10px; padding: 0.6em; font-size: 25px; font-weight: bold; color: black; text-shadow: 3px 3px 0px white, -3px -3px 0px white;">と、まぁ、そんなわけで、text-shadowは<br />文字の読みやすさ改善にも<br />おおいに使える！と思うわけです^^</div>
あまり読みやすさって意味では2pxとそう変わらないかもですね。
左上と右下しかフォローしてないものだから、右上とかの寂しさのボロが出始めているような気もしますｗ
位置をずらさず、5pxのぼかしをかけてみます
元（比較用）
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
位置をずらさず、5pxのぼかしをかけてみます
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
コード
<div style="background-color: lightblue; background-size: 50px 50px; background-image: radial-gradient(circle 3px at 33% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 17% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 20% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 28% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 36% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 13% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 83% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 67% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 70% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 78% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 86% 65%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 63% 65%,#000000ff 99%,transparent 0%); border: 10px outset lightblue; border-radius: 10px; padding: 0.6em; font-size: 25px; font-weight: bold; color: black; text-shadow: 0px 0px 5px white;">と、まぁ、そんなわけで、text-shadowは<br />文字の読みやすさ改善にも<br />おおいに使える！と思うわけです^^</div>
位置をずらすのをやめ（0px 0px）、5pxサイズの白いぼかしをかけてみました。
これ、色をredとか目立つ色に変えると分かりますが、この場合は白が目立たなくて、ぼかしがあるのかないのか分からないですね^^;
位置をずらさず、5pxのぼかしを３重にかけてみます
元（比較用）
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
位置をずらさず、5pxのぼかしを３重にかけてみます
文字の読みやすさ改善にも
おおいに使える！と思うわけです^^
コード
<div style="background-color: lightblue; background-size: 50px 50px; background-image: radial-gradient(circle 3px at 33% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 17% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 20% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 28% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 36% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 13% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 83% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 67% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 70% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 78% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 86% 65%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 63% 65%,#000000ff 99%,transparent 0%); border: 10px outset lightblue; border-radius: 10px; padding: 0.6em; font-size: 25px; font-weight: bold; color: black; text-shadow: 0px 0px 5px white,0px 0px 5px white,0px 0px 5px white;">と、まぁ、そんなわけで、text-shadowは<br />文字の読みやすさ改善にも<br />おおいに使える！と思うわけです^^</div>
「袋文字作成ツール」を試していた時に気づいたんですが、text-shadowのぼかしは重ねてかけると色濃くなるんですね。
それを思い出して３重に0px 0px 5px whiteの指定を重ねてみました。
サンプルを見ると、位置ずらし2pxの時並みの強さでカバーされていながら、こっちのほうが上品な気がしますが、どうでしょうか？
あとがき
今回、この記事を書きながら色々試していたわけですが、書きながらつくづく思った事は…
「ぱんだちゃんコード、黒文字を乗せるのには向かない！！」
でしたｗｗｗ
ちょっと悪条件すぎたかもですね^^;
でも、そんな悪条件下でも、「2pxずらし」や「３重ぼかし」はそれなりに読みやすさが改善したように思います！！
ここまで読みづらい背景じゃなくても「ん…ちょっと文字が読み難いかな？？」って時に、text-shadowを使ってみるのもいいかもです^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
