CSS テキストシェイディング

テキストの影

text-shadow 属性がテキストに影を追加します。

最も簡単な使用法は、水平影（2px）と垂直影（2px）のみを指定することです：

文字の影効果！

例

h1 {
  text-shadow: 2px 2px;
}

実際に試してみてください

次に、影に色（赤）を追加します：

文字の影効果！

例

h1 {
  text-shadow: 2px 2px red;
}

実際に試してみてください

次に、影にぼやけ効果（5px）を追加します：

文字の影効果！

例

h1 {
  text-shadow: 2px 2px 5px red;
}

実際に試してみてください

ヒント：訪問してください CSS フォント 異なるフォント、テキストサイズ、テキストスタイルを変更する方法を学ぶ章。

ヒント：訪問してください CSS テキスト効果 異なるテキスト効果を実現する方法を学ぶ章。

すべての CSS テキスト属性

属性 説明
color テキストの色を設定します。
direction テキストの方向/書き方向を指定します。
letter-spacing 文字間隔を設定します。
line-height 行高を設定します。
text-align テキストの水平な並び方を指定します。
text-decoration テキストに装飾効果を追加します。
text-indent テキストブロックの先頭行のインデントを指定します。
text-shadow テキストに影響を与える影を指定します。
text-transform テキストの大文字と小文字を制御します。
text-overflow ユーザーに非表示のオーバーフロー内容を示す方法を指定します。
unicode-bidi direction 属性とともに使用して、同一ドキュメント内の複数の言語をサポートするためのテキストの書き換えを設定または返します。
vertical-align テキストの垂直な並び方を指定します。
white-space 要素内の空白の処理方法を指定します。
word-spacing 単語間隔を設定します。