【CSS】他にもある「ごちゃごちゃした背景で文字を読みやすくする方法」

　どうも！LSSです！！

昨日の記事では、文字を読みやすくするために使う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;">
<span style="background-color: #ffffff;">text-shadow以外にも、例えば<br />「文字部分だけ、塗りつぶし背景を使う」<br />という手が考えられます。</span>
</div>

 <div>タグで用意した、ぱんだちゃんボックスの中に、更に<span>タグを入れ、その中に文章を書きます。

<span>タグに style="background-color: #ffffff;"と、「背景を白にする指定」を追加すると、文字部分だけ白で塗りつぶす事になり、文字が「ぱんだの読み難さ」から解放される事になりますね^^

ついでに文字の中央寄せ

文字の中央寄せを追加

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-align:center;">
<span style="background-color: #ffffff;">text-shadow以外にも、例えば<br />「文字部分だけ、塗りつぶし背景を使う」<br />という手が考えられます。</span>
</div>

<div>タグの方に、text-align:center;を追加します。

これにより、このボックスの中の文字は「中央寄せ」される事になります^^

「背景を活かす」という意味では、こうしておいたほうがいいかもですね。

せっかくの塗りつぶし背景をあえて半透過させてみる

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-align: center;"><span style="background-color: #ffffffa0;">text-shadow以外にも、例えば<br />「文字部分だけ、塗りつぶし背景を使う」<br />という手が考えられます。</span></div>

「文字が読みやすくなったのはいいけど、その部分の背景がまったく表示されないのも…。」
という場合に使えるのがこれ。

今度は<span>のほうのbackground-colorに指定していた色を「半透過色」にしてみました。

#ffffffa0 のように８桁の16進数で指定すると、最後の２桁（この場合a0）が非透過度を指定する、半透過色になります。

※「【CSS】色指定　様々な方法（色名・RGB・HSLなど）」参照。

あとがき

前回、今回ともに、「上に乗せた文字が読みづらい時に、読みやすくする方法」について書いてみました。

サンプルに選んだ「ぱんだちゃんコード」が思った以上に「黒文字を乗せにくい」背景でしたが、例えば
「旅先での思い出の写真」や、
「がんばって作った料理・デザートの写真」に
「オシャレな感じで文字を乗せて演出したい^^」と思われた時に、この記事の内容が役に立つかも知れません^^

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^