Webデザイナーブログから学ぶホームページ制作

「text-shadow」プロパティは、テキストに影（シャドウ）を付けるためのCSSプロパティです。
文字の水平方向のずれ（X軸）、垂直方向のずれ（Y軸）、ぼかしの大きさ、影の色を指定することで、立体感やデザイン性を高めることができます。

テキストに影（シャドウ）を付けるための値は、「影の水平方向のずれ」「影の垂直方向のずれ」「影のぼかしの大きさ」「影の色」などを指定することができます。

影の水平方向・垂直方向のずれを指定する値には「px」「em」「rem」などの単位を指定することができ、影のぼかしの大きさを指定する値にも同様に「px」「em」などの単位を指定することができます。
影の色を指定する値には、「カラー名」「16進数カラーコード」「RGB」「RGBA」「HSL」「HSLA」などの色指定方法を使用することができます。

また、「text-shadow」プロパティでは、カンマ（ , ）で区切ることで複数の影を同時に指定することも可能です。

【指定できる値の種類】
・影の水平方向のずれ（X軸）：影を文字から水平方向にどの程度ずらすかを指定
・影の垂直方向のずれ（Y軸）：影を文字から垂直方向にどの程度ずらすかを指定
・影のぼかしの大きさ：影の広がり具合・ぼかしの強さを指定
・影の色：影のカラーを指定

テキストに影を付けたい場合は、「text-shadow」プロパティを使い、水平方向のずれ・垂直方向のずれ・ぼかしの大きさ・影の色を順に指定します。

セレクタ {
text-shadow: 水平方向のずれ 垂直方向のずれ ぼかしの大きさ 影の色;
}

/* 基本値 */
/* 影を右下に黒で表示 */
text-shadow: 2px 2px 2px black;
/* 少し大きめの影をつける */
text-shadow: 4px 4px 5px #888888;
/* 赤い影をつける */
text-shadow: 3px 3px 3px red;

/* 色指定 */
/* カラー名 */
text-shadow: 2px 2px 4px blue;
text-shadow: 2px 2px 4px orange;
text-shadow: 2px 2px 4px black;

/* 16進数カラーコード */
text-shadow: 2px 2px 4px #FF0000; /* 赤 */
text-shadow: 2px 2px 4px #00FF00; /* 緑 */
text-shadow: 2px 2px 4px #0000FF; /* 青 */

/* RGB値 */
text-shadow: 2px 2px 4px rgb(255, 0, 0);
text-shadow: 2px 2px 4px rgb(0, 255, 0);
text-shadow: 2px 2px 4px rgb(0, 0, 255);

/* HSL値 */
text-shadow: 2px 2px 4px hsl(0, 100%, 50%); /* 赤 */
text-shadow: 2px 2px 4px hsl(120, 100%, 50%); /* 緑 */
text-shadow: 2px 2px 4px hsl(240, 100%, 50%); /* 青 */

/* 複数 */
/* 複数の影を重ねる */
text-shadow: 1px 1px 0 #fff,2px 2px 3px #999;