CSSのtext-shadowでテキスト(文字)に影をつける方法【サンプル付き】

テキストに影をつける方法教えてくれる？

テキストを立体的に見えるようにドロップシャドウをつけることがあります。

ドロップシャドウとは『テキストや画像に影が落ちているような表現』になります。

それにはCSSのtext-shadowというプロパティを使いますが、

text-shadowは、

方向
ぼかし具合
色

などいろいろと調整が可能です。

テキストに影をつけると立体的になるだけでなく、見やすくなります。

例えば当ブログのサムネイル右下にある更新日ですが、文字が白なので背景色も白だと影をつけないと見えなくなります。

text-shadow使用

このようにテキストを見えやすくしたり目立たせるときに使います。

それではtext-shadowとサンプルを使いながら解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

text-shadowでテキスト(文字)に影をつける方法

今回はtext-shadowというCSSのプロパティを使ってテキストに影を作ります。

これからいろいろなパターンをご紹介しますが、HTMLは共通でこちらになります。

<p>じゅんぺいブログ</p>

CSSの基本はこちらになります。

p {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 2;
  text-align: center;
}

これは影とは無関係なので無視してOKです。

text-shadowは以下のように指定できます。

例）
p {
  text-shadow: 3px 3px 5px #c0c0c0;
}

これはそれぞれの値を半角スペースで区切り、全部で4つの値を指定できます。

値の意味は左から順に以下のようになります。

p {
  text-shadow: ① ② ③ ④;
}

水平方向の影の位置 ※必須
垂直方向の影の位置 ※必須
影のぼかし具合
影の色

この中で必須なのは水平方向・垂直方向の位置だけですが、実質色も必須かと思います。

これを1つずつサンプルを使って解説していきます。

水平・垂直方向の位置

水平・垂直方向は必須になります。

まずはこのコードでサンプルを見てみます。

p {
  text-shadow: 5px 5px #c0c0c0;
}

これは『右に5px・下に5px』という意味で、色の解説はあとでしますが指定しないと見にくいのでここでも書いておきます。

See the Pen
text-shadow：基本 by junpei (@junpei-sugiyama)
on CodePen.

数値を大きくすれば位置も大きく動きます。

例えば以下のようにすると『右に10px・下に15px』になります。

p {
  text-shadow: 10px 15px #c0c0c0;
}

See the Pen
text-shadow：適用前 by junpei (@junpei-sugiyama)
on CodePen.

水平方向か垂直方向の片方だけ影をつける

水平方向か垂直方向の片方だけ影をつけたいときは、以下のように書きます。

/* 水平方向のみ */
p {
  text-shadow: 5px 0 #c0c0c0;
}
/* 垂直方向のみ */
p {
  text-shadow: 0 5px #c0c0c0;
}
/* これはNG(影は出ない) */
p {
  text-shadow: 5px #c0c0c0;
}

See the Pen
text-shadow：基本 by junpei (@junpei-sugiyama)
on CodePen.

右下ではなく左上にする

値をマイナスにすれば反対方向になります。

p {
  text-shadow: 5px 5px #c0c0c0; /* 右下 */
}
p {
  text-shadow: -5px -5px #c0c0c0; /* 左上 */
}

See the Pen
text-shadow：マイナスの値 by junpei (@junpei-sugiyama)
on CodePen.

もちろん右上・左下にも可能です。

影のぼかし具合

ここまでは影を一切ぼかしていませんが、以下のようにすると影をぼかすことが出来ます。

p {
  text-shadow: 5px 5px 4px #c0c0c0; /* 4pxがぼかし具合 */
}

See the Pen
text-shadow：ぼかす by junpei (@junpei-sugiyama)
on CodePen.

影の色

影の色を指定しないと、影の色は文字色と同じになります。

/* 文字色も影も黒 */
p {
  color: black;
  text-shadow: 5px 5px 4px;
}
/* 文字色も影も緑 */
p {
  color: green;
  text-shadow: 5px 5px 4px;
}

See the Pen
text-shadow：文字色と影の色が同じ by junpei (@junpei-sugiyama)
on CodePen.

しかし影の色を指定すれば、文字色と別の色にできます。

/* 文字色は黒、影はグレー */
p {
  color: black;
  text-shadow: 5px 5px 4px gray;
}
/* 文字色は緑、影はオレンジ */
p {
  color: green;
  text-shadow: 5px 5px 4px orange;
}

ぼかしは省略してカラーコードを書いてもOKです。

See the Pen
text-shadow：文字色と影の色が別 by junpei (@junpei-sugiyama)
on CodePen.

文字色と同じだと影は見えにくいので、必須ではありませんが基本的には書くようにした方がいいかと思います。

影を複数

text-shadowは複数つけることが可能です。

その場合カンマで区切って書けばOKです。

/* 影を2つ */
p {
  text-shadow: 3px 3px #ff8484, 6px 6px #7fbfff;
}
/* 影を3つ */
p {
  text-shadow: 3px 3px #ff3838, 6px 6px #389bff, 9px 9px #ff9b38;
}

複数書く場合は位置をズラさないと重なってしまうので、少しずつズラしましょう。

See the Pen
text-shadow：影を複数 by junpei (@junpei-sugiyama)
on CodePen.

影を全方向にして縁取り

影を複数つけるのを利用して、縁取り文字のようにできます。

例えば文字色が白で背景色も白だと当然見えなくなりますが、以下のように書くと縁取り文字のようになります。

/* 影を右下と左上 */
p {
  text-shadow: 3px 3px 5px #c0c0c0, -3px -3px 5px #c0c0c0;
}
/* 影を全方向 */
p {
  text-shadow: 3px 3px 5px #c0c0c0, -3px -3px 5px #c0c0c0, 3px -3px 5px #c0c0c0, -3px 3px 5px #c0c0c0;
}
/* 影を全方向(ぼかさない) */
p {
  text-shadow: 3px 3px #c0c0c0, -3px -3px #c0c0c0, 3px -3px #c0c0c0, -3px 3px #c0c0c0;
}
/* 位置はそのままでぼかすだけ */
p {
  text-shadow: 0 0 8px #555;
}

1つ目は右下と左上だけで、これでも縁取り文字のように見えますが、2つ目のように全方向に書くとより自然に見えるようになります。

ただし3つ目のようにぼかさないと、縁がギザギザになるのでご注意下さい。

あとは4つ目のように位置はそのままでぼかすだけにしても、縁取りのようになります。

See the Pen
text-shadow：影を全方向 by junpei (@junpei-sugiyama)
on CodePen.