HTML・CSS文字に影(ドロップシャドウ)をつける方法

文字に影(ドロップシャドウ)をつける
文字に影(ドロップシャドウ)をつける

管理人まあこ
まあこ

画像にグラデーションをかけたでしょ。

果報丸
果報丸

うん、そうだね!グラデーションをかけたね。

管理人まあこ
まあこ

するとグラデーションと画像の上の文字が同じホワイトだから
重なって文字が読みにくくなっちゃったの。

果報丸
果報丸

ふーん!それでどうするの。

管理人まあこ
まあこ

グラデーションの色を変えてもいいんだけど
気に入っているしなぁ。

果報丸
果報丸

じゃあ、このままにしておくの。

管理人まあこ
まあこ

でも、文字が読みにくいし、文字に影(ドロップシャドウ)
をつけることにしたの。だから、今回は文字に影(ドロップシャ
ドウ)をつける方法
をご紹介していくわね。

fav-folder-dynamic-premium.png 1,文字に影(ドロップシャドウ)をつける方法について

flash-dynamic-premium.png1-1,影(ドロップシャドウ)

文字に影を付ける場合はtext-shadowプロパティを使用します。
X方向(水平方向)の影の位置とY方向(垂直方向)の影の位置は必須です。影のぼかし半径、影の色は省略できますが、色を省略した場合は文字色と同色が反映されます。

flash-dynamic-premium.png1-2,text-shadowプロパティの記述方法

それでは、text-shadowプロパティの記述方法をご紹介していきますね。
設定できるのは、次の4項目です。

Point

X方向(水平方向)の影の位置
Y方向(垂直方向)の影の位置
影のぼかし半径
影の色

CSSでは、それぞれの値を以下のように記述します。

text-shadow:X方向の位置 Y方向の位置 影のぼかし半径 影の色

では、それぞれの値についてご紹介していきますね。

flash-dynamic-premium.png1-3,X方向への距離について

右方向へ陰の距離を指定します。プラスの値だと右方向へ、マイナスの値だと左方向へ陰が移動します。単位はpxでもemでも指定可能です。

flash-dynamic-premium.png1-4,Y方向への距離について

上下方向への陰の距離を指定します。プラスの値だと下方向へ、マイナスの値だと上方向へ陰が移動します。単位はpxでもemでも指定可能です。
つまり

Point

X方向がプラスの値…右に移動(→)
X方向がマイナスの値…左に移動(←)
Y方向がプラスの値…下に移動(↓)
Y方向がマイナスの値…上に移動(↑)

ということになります。

flash-dynamic-premium.png1-5,影のぼかし半径について

値が大きくなれば、ぼかし半径が大きくなります。逆に値が小さいくなれば、ぼかし半径は小さくなります。単位はpxでもemでも指定可能です。ぼかし半径が未記述の場合、ぼかし半径は適用されません。

flash-dynamic-premium.png1-6,影の色について

影の色はRGB、色名にて指定が可能です。つまり、#ff0000はRGBの赤ですが、redという形でも指定することが可能です。

Point

text-shadow: 0px 0px 1px #ff0000,
text-shadow: 0px 0px 1px rgb(255 0 0),
text-shadow: 0px 0px 1px red,
はすべて同じです。

影の色は、text-shadowプロパティの値として一番最初に記述しても、一番最後に記述しても同じ結果になりますが、通常は最後に記述することが多いようです。最初に記載しましたが、未記述の場合は文字色と同色が反映されます。
また、極端にいえば

Point

text-shadow: 0px 0px 1px #ff8c04, 0px 0px 4px #ff8c04, 0px 0px 8px #ff8c04, 0px 0px 12px #ff8c04, 0px 0px 16px #ff8c04;

のように複数いくつでも指定することができます。

fav-folder-dynamic-premium.png 2,【コピペOK】影(ドロップシャドウ)サンプルBEST20

わかり易いように、大きな文字で表示しています。

flash-dynamic-premium.png2-1,基本的設定

TEXT SHADOW

<span style="text-shadow:3px 3px;">TEXT SHADOW</span>
.sample {
    text-shadow:3px 3px;
}

flash-dynamic-premium.png2-2,水平方向

TEXT SHADOW

<span style="text-shadow: 3px 0px 2px;">TEXT SHADOW</span>
.sample {
    text-shadow:3px 0px 2px;
}

flash-dynamic-premium.png2-3,垂直方向

TEXT SHADOW

<span style="text-shadow: 0px 3px 2px;">TEXT SHADOW</span>
.sample {
    text-shadow: 0px 3px 2px;
}

flash-dynamic-premium.png2-4,ぼかし設定

TEXT SHADOW

<span style="text-shadow: 0px 3px 2px;">TEXT SHADOW</span>
.sample {
    text-shadow: 0px 0px 10px;
}

flash-dynamic-premium.png2-5,水平方向+ 垂直方向+ ぼかし設定

TEXT SHADOW

<span style="text-shadow: 3px 3px 10px;">TEXT SHADOW</span>
.sample {
    text-shadow: 3px 3px 10px;
}

flash-dynamic-premium.png2-6,水平方向+ 垂直方向+ぼかし設定+マイナス指定

TEXT SHADOW

<span style="text-shadow: -3px -3px 2px;">TEXT SHADOW</span>
.sample {
    text-shadow:  -3px -3px 2px;
}

flash-dynamic-premium.png2-7,影に色をつける

TEXT SHADOW

<span style="text-shadow:3px 3px #ff0000;">TEXT SHADOW</span>
.sample {
    text-shadow: 3px 3px #ff0000;
}

flash-dynamic-premium.png2-8,浮いて見える

TEXT SHADOW

<span style="text-shadow:0px 15px 3px #666666;">TEXT SHADOW</span>
.sample {
    text-shadow: 0px 15px 3px #666666;
}

flash-dynamic-premium.png2-9,複数の影を指定

TEXT SHADOW

<span style="text-shadow: 3px 3px 4px #ff8c04, -3px -3px 4px #ff0000;">TEXT SHADOW</span>
.sample {
    text-shadow: 3px 3px 4px #ff8c04, -3px -3px 4px #ff0000;
}

flash-dynamic-premium.png2-10,5つの影で発光

TEXT SHADOW

<span style="text-shadow: 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff; background: #000000;">TEXT SHADOW</span>
.sample {
    text-shadow: 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff; background: #000000;
}

flash-dynamic-premium.png2-11,10の影で発光

TEXT SHADOW

<span style="text-shadow: 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff; 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff; background: #000000;">TEXT SHADOW</span>
.sample {
    text-shadow: 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff; 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff; background: #000000;
}

flash-dynamic-premium.png2-12,白文字に2つの影を指定

TEXT SHADOW

<span style="color:#ffffff; text-shadow: 3px 3px 4px #cccccc, -2px -2px 10px #cccccc;">TEXT SHADOW</span>
.sample {
    color:#ffffff; text-shadow: 3px 3px 4px #cccccc, -2px -2px 10px #cccccc;
}

flash-dynamic-premium.png2-13,白文字に背景色を指定

TEXT SHADOW

<span style="color: #ffffff; text-shadow: 3px 3px 4px #ffffff; -2px -2px 10px #ffffff; background: #000000;">TEXT SHADOW</span>
.sample {
    color: #ffffff; text-shadow: 3px 3px 4px #ffffff; -2px -2px 10px #ffffff; background: #000000;
}

flash-dynamic-premium.png2-14,白文字にグラデーションの背景色を指定

TEXT SHADOW

<span style="color: #ffffff; text-shadow: 3px 3px 4px #cccccc, -2px -2px 10px #cccccc; background: linear-gradient(-80deg, #ff65ff, #65ffff); ">TEXT SHADOW</span>
.sample {
    color: #ffffff; text-shadow: 3px 3px 4px #cccccc, -2px -2px 10px #cccccc; background: linear-gradient(-80deg, #ff65ff, #65ffff);
}

flash-dynamic-premium.png2-15,白文字に5つの影で発光(ネオン風)

TEXT SHADOW

<span style="color: #ffffff; text-shadow: 0px 0px 10px #ff8c04, 0px 0px 10px #ff8c04, 0px 0px 10px #ff8c04, 0px 0px 10px #ff8c04, 0px 0px 10px #ff8c04; background: #000000;">TEXT SHADOW</span>
.sample {
    color: #ffffff; text-shadow: 0px 0px 10px #ff8c04, 0px 0px 10px #ff8c04, 0px 0px 10px #ff8c04, 0px 0px 10px #ff8c04, 0px 0px 10px #ff8c04; background: #000000;
}

flash-dynamic-premium.png2-16,白文字に2つの影を指定

TEXT SHADOW

<span style="color: #ffffff; text-shadow: 3px 3px 4px #000000, 0px 0px 10px #ff0000;">TEXT SHADOW</span>
.sample {
    color: #ffffff; text-shadow: 3px 3px 4px #000000, 0px 0px 10px #ff0000;
}

flash-dynamic-premium.png2-17,白文字に3つの影を指定

TEXT SHADOW

<span style="color: #ffffff; text-shadow: 0px 0px 2px #ff0000, 0px 0px 4px #ff0000, 0px 0px 8px #ff0000;">TEXT SHADOW</span>
.sample {
    color: #ffffff; text-shadow: 0px 0px 2px #ff0000, 0px 0px 4px #ff0000, 0px 0px 8px #ff0000;
}

flash-dynamic-premium.png2-18,白文字に4つの影を指定

TEXT SHADOW

<span style="color: #ffffff; text-shadow: -1px -1px #fb2eef, -1px 1px #fb2eef, 1px -1px #fb2eef, 1px 1px #fb2eef">TEXT SHADOW</span>
.sample {
    color: #ffffff; text-shadow: -1px -1px #fb2eef, -1px 1px #fb2eef, 1px -1px #fb2eef, 1px 1px #fb2eef;
}

flash-dynamic-premium.png2-19,白文字に5つの影を指定

TEXT SHADOW

<span style="color: #ffffff; text-shadow: 0px 0px 1px #ff8c04, 0px 0px 4px #ff8c04, 0px 0px 8px #ff8c04, 0px 0px 12px #ff8c04, 0px 0px 16px #ff8c04;">TEXT SHADOW</span>
.sample {
    color: #ffffff; text-shadow: 0px 0px 1px #ff8c04, 0px 0px 4px #ff8c04, 0px 0px 8px #ff8c04, 0px 0px 12px #ff8c04, 0px 0px 16px #ff8c04;
}

flash-dynamic-premium.png2-20,オレンジ文字に同色の影を指定

TEXT SHADOW

<span style="color: #ff8c04; text-shadow: 0px 15px 10px #ff8c04;">TEXT SHADOW</span>
.sample {
    color: #ff8c04; text-shadow: 0px 15px 10px #ff8c04;
}

以上、影(ドロップシャドウ)のサンプルを、20個ご紹介してしてきました。お気に入りの物があればコピペでご利用くださいね。

fav-folder-dynamic-premium.png 3,まとめ

今回は、文字に影(ドロップシャドウ)をつける方法をiご紹介してきました。
文字に影を付ける場合はtext-shadowプロパティを使用。
記述方法はtext-shadow: X方向の位置 Y方向の位置 影のぼかし半径 影の色;でそれぞれの値を記述。
X方向がプラスの値…右に移動(→)
X方向がマイナスの値…左に移動(←)
Y方向がプラスの値…下に移動(↓)
Y方向がマイナスの値…上に移動(↑)
ぼかし半径は値が大きくなれば大きくなり、値が小さいくなれば小さくなる。未記述の場合は未適用。
影の色は#ff0000 rgb(255 0 0) 色名で指定。未記述の場合は文字色と同色。複数いくつでも指定可。

この情報がお役に立てばブログランキングの応援お願いします。
にほんブログ村 ネットブログ Vtuber にほんブログ村 ネットブログ YouTube 人気ブログランキング Windows

最後までご覧頂き、ありがとうございます。わたしと果報丸の自己紹介です。今後ともよろしくお願い致します。

この記事を書いた人
管理人まあこ
まあこ

動画編集勉強中の超初心者です。勉強して理解した内容を、このサイトに記載していこうと思います。もし、誤りなどあれば教えてくださいね。(笑)
【職業】:看護師(ナース)
【居住地】:関西

この記事を書いた人
果報丸
果報丸

ボク、果報丸(かほうまる)って言います。実際の画像は、ブログ右上の写真です。いつもやんちゃなことをして、まあこちゃんに叱られています。これからもよろしくニャン。
【職業】:猫(まあこちゃんのペット)
【居住地】:関西(まあこちゃん家)

関連記事
スポンサーサイト