【HTML/CSS】見出しや説明文を影付き文字にする方法（text-shadow）

[ad_tag id=”1828″]

見出しや説明文に影をつけたい！（text-shadow）

文字に影をつけて強調したい時や、おしゃれに見せたいときはよくあります。

WordPressのブロックエディタを使用していて、テキストシャドウ機能が付随している場合は問題ないですが、そうでない場合は、とりあえず文字入力欄にstyleタグで仕込んでみたり、それもできない時は追加CSSで記述したりしています。

これも記述のパラメータが多い（たかが４つですけど）ので、解っていればどうということはないのですが、パラメータの順番や記述方法がうろ覚えになりがちなので、ついつい検索してしまいます。

方法

CSSの記述はこうです。

<div class=”example”>
  <p>セレクター { text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色; }</p>
</div>

.example p { text-shadow: 3px 3px 6px #ccc; }

各パラメータを言葉で説明すると長くなってしまいますが、文字と影の離間距離とぼかしの大きさ、影の色を指定しています。

それでは、各パラメータについて解説します。

水平方向の距離

文字と影の水平方向の離隔距離の設定です。

上記の設定は

.example p { text-shadow: 0 0 6px #aaa; }

で、水平、垂直とも0です。

全体にぼかした影が入っています。

この影を水平方向に5px移動してみます。

.example p { text-shadow: 5px 0 6px #aaa; }

影が右側に5px移動しました。

左側に動かしたい場合は-5pxと設定します。

垂直方向の距離

文字と影の垂直方向の離隔距離の設定です。

この影を垂直方向に5px移動してみます。

.example p { text-shadow: 0 5px 6px #aaa; }

影が下に5px移動しました。

こちらも、上に動かしたい場合は-5pxと設定します。

水平方向と垂直方向の離隔距離指定の組み合わせで、文字に対して360度自由に影を移動できます。

影のぼかし

影をぼかす範囲の指定です。

まずは0指定の場合を見てみましょう。

.example p { text-shadow: 0 0 0 #aaa; }

一見、何もありませんね。

影の位置を5pxずらしてみましょう。

ぼかされていない文字が指定した文字色で表示されています。

この影文字を基準に、指定したpx数でぼかされていきます。

影の色

影の色を指定します。

これは16進数カラーコードでの指定です。

ベタ塗りの影になるので、影を透過したい場合はRGBで指定します。

.example p { text-shadow: 5px 5px 6px rgba( 255, 170, 170, 0.6); }

[ad_tag id=”1836″]

まとめ

いかがでしょうか？

影付き文字は、サイトのデザイン上、いろんな場所で使用する機会があります。

特に、背景画像の上の文字などは、文字色だけでは背景に沈んでしまい読みにくくなることが多いです。

そのために背景にオーバーレイを仕掛けることも多いのですが、画像は綺麗なままで文字を重ねたい場合などに影付き文字を使っています。

使いすぎると、却って読みにくくなったり、安っぽいデザインになったりしてしまいますのでご注意を。

[ad_tag id=”1839″]