CSS ・ 文字・フォント
text-shadow
文字の影
文字に影を付けます。横のずれ・縦のずれ・ぼかし・色の順に指定します。
01
サンプルコード
HTML
1<p class="shadow">影を付けた文字</p>
2<p class="glow">ぼかしだけの影</p>
CSS
1p {
2 font-size: 28px;
3 font-weight: bold;
4 margin: 8px 0;
5}
6.shadow {
7 text-shadow: 3px 3px 4px rgba(0, 0, 0, .4);
8}
9.glow {
10 color: #fff;
11 text-shadow: 0 0 8px #b68235;
12}
02
実行結果
ブラウザでの表示
03
解説
text-shadow は文字の形にそって影を付けるプロパティです。横のずれ 縦のずれ ぼかし 色 の順にスペース区切りで書きます。
横・縦はプラスで右・下、マイナスで左・上にずれます。ぼかしは省略でき、0 にするとくっきりした影になります。
ずれを 0 にしてぼかしだけ付けると、文字の周りが光るような表現になります。カンマで区切ると、複数の影を重ねられます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
none | 影なし（初期値） |
2px 2px #000 | 横・縦のずれと色 |
2px 2px 4px #000 | 横・縦のずれ・ぼかし・色 |
0 0 8px #fff | ずれなしで周りをぼかす |
1px 1px #000, -1px -1px #fff | カンマ区切りで複数の影 |
写真の上の文字を読みやすくする
背景画像の上に白い文字を載せるとき、薄い影を付けると読みやすくなります。
CSS
1.hero-title {
2 color: #fff;
3 text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
4}
注意点
- 01影を強くしすぎると、文字がにじんで読みにくくなります。色は半透明（rgba）にするのがおすすめです。
- 02要素の箱そのものに影を付けるときは box-shadow を使います。