HTML･CSS文字に影（ドロップシャドウ）をつける方法
画像にグラデーションをかけたでしょ。
うん、そうだね！グラデーションをかけたね。
するとグラデーションと画像の上の文字が同じホワイトだから
重なって文字が読みにくくなっちゃったの。
ふーん！それでどうするの。
グラデーションの色を変えてもいいんだけど
気に入っているしなぁ。
じゃあ、このままにしておくの。
でも、文字が読みにくいし、文字に影（ドロップシャドウ）
をつけることにしたの。だから、今回は文字に影（ドロップシャ
ドウ）をつける方法をご紹介していくわね。
1,文字に影（ドロップシャドウ）をつける方法
1-1,影（ドロップシャドウ）について
文字に影を付ける場合はtext-shadowプロパティを使用します。
X方向（水平方向）の影の位置とY方向（垂直方向）の影の位置は必須です。影のぼかし半径、影の色は省略できますが、色を省略した場合は文字色と同色が反映されます。
1-2,text-shadowプロパティの記述方法
それでは、text-shadowプロパティの記述方法をご紹介していきますね。
設定できるのは、次の4項目です。
● X方向（水平方向）の影の位置
● Y方向（垂直方向）の影の位置
● 影のぼかし半径
● 影の色
CSSでは、それぞれの値を以下のように記述します。
text-shadow:X方向の位置 Y方向の位置 影のぼかし半径 影の色
では、それぞれの値についてご紹介していきますね。
1-3,X方向への距離について
右方向へ陰の距離を指定します。プラスの値だと右方向へ、マイナスの値だと左方向へ陰が移動します。単位はpxでもemでも指定可能です。
1-4,Y方向への距離について
上下方向への陰の距離を指定します。プラスの値だと下方向へ、マイナスの値だと上方向へ陰が移動します。単位はpxでもemでも指定可能です。
つまり
● X方向がプラスの値…右に移動（→）
● X方向がマイナスの値…左に移動（←）
● Y方向がプラスの値…下に移動（↓）
● Y方向がマイナスの値…上に移動（↑）
ということになります。
1-5,影のぼかし半径について
値が大きくなれば、ぼかし半径が大きくなります。逆に値が小さいくなれば、ぼかし半径は小さくなります。単位はpxでもemでも指定可能です。ぼかし半径が未記述の場合、ぼかし半径は適用されません。
1-6,影の色について
影の色はRGB、色名にて指定が可能です。つまり、#ff0000はRGBの赤ですが、redという形でも指定することが可能です。
● text-shadow: 0px 0px 1px #ff0000,
● text-shadow: 0px 0px 1px rgb(255 0 0),
● text-shadow: 0px 0px 1px red,
はすべて同じです。
影の色は、text-shadowプロパティの値として一番最初に記述しても、一番最後に記述しても同じ結果になりますが、通常は最後に記述することが多いようです。最初に記載しましたが、未記述の場合は文字色と同色が反映されます。
また、極端にいえば
● text-shadow: 0px 0px 1px #ff8c04, 0px 0px 4px #ff8c04, 0px 0px 8px #ff8c04, 0px 0px 12px #ff8c04, 0px 0px 16px #ff8c04;
のように複数いくつでも指定することができます。
2,【コピペOK】影（ドロップシャドウ）サンプルBEST20
わかり易いように、大きな文字で表示しています。
2-1,基本的設定
TEXT SHADOW
2-2,水平方向
TEXT SHADOW
2-3,垂直方向
TEXT SHADOW
2-4,ぼかし設定
TEXT SHADOW
2-5,水平方向+ 垂直方向+ ぼかし設定
TEXT SHADOW
2-6,水平方向+ 垂直方向+ぼかし設定+マイナス指定
TEXT SHADOW
2-7,影に色をつける
TEXT SHADOW
2-8,浮いて見える
TEXT SHADOW
2-9,複数の影を指定
TEXT SHADOW
2-10,5つの影で発光
TEXT SHADOW
2-11,10の影で発光
TEXT SHADOW
2-12,白文字に2つの影を指定
TEXT SHADOW
2-13,白文字に背景色を指定
TEXT SHADOW
2-14,白文字にグラデーションの背景色を指定
TEXT SHADOW
2-15,白文字に5つの影で発光(ネオン風)
TEXT SHADOW
2-16,白文字に2つの影を指定
TEXT SHADOW
2-17,白文字に3つの影を指定
TEXT SHADOW
2-18,白文字に4つの影を指定
TEXT SHADOW
2-19,白文字に5つの影を指定
TEXT SHADOW
2-20,オレンジ文字に同色の影を指定
TEXT SHADOW
以上、影（ドロップシャドウ）のサンプルを、20個ご紹介してしてきました。お気に入りの物があればコピペでご利用くださいね。
3,まとめ
今回は、文字に影（ドロップシャドウ）をつける方法をiご紹介してきました。
● 文字に影を付ける場合はtext-shadowプロパティを使用。
● 記述方法はtext-shadow: X方向の位置 Y方向の位置 影のぼかし半径 影の色;でそれぞれの値を記述。
● X方向がプラスの値…右に移動（→）
● X方向がマイナスの値…左に移動（←）
● Y方向がプラスの値…下に移動（↓）
● Y方向がマイナスの値…上に移動（↑）
● ぼかし半径は値が大きくなれば大きくなり、値が小さいくなれば小さくなる。未記述の場合は未適用。
● 影の色は#ff0000 rgb(255 0 0) 色名で指定。未記述の場合は文字色と同色。複数いくつでも指定可。
最後までご覧頂き、ありがとうございます。わたしと果報丸の自己紹介です。今後ともよろしくお願い致します。
動画編集勉強中の超初心者です。勉強して理解した内容を、このサイトに記載していこうと思います。もし、誤りなどあれば教えてくださいね。(笑)
【職業】：看護師（ナース）
【居住地】：関西
ボク、果報丸（かほうまる）って言います。実際の画像は、ブログ右上の写真です。いつもやんちゃなことをして、まあこちゃんに叱られています。これからもよろしくニャン。
【職業】：猫（まあこちゃんのペット）
【居住地】：関西（まあこちゃん家）
- 関連記事
-
-
HTML･CSS文字に影（ドロップシャドウ）をつける方法
-
HTML･CSS画像にグラデーションをかける方法
-
HTML･CSS画像の上に文字を重ねる方法
-
