最終更新日 2023/11/20

CSSで文字に影(ドロップシャドウ)、光彩、縁取りをかける方法

CSSで文字に影(ドロップシャドウ)、光彩、縁取りをかける方法です。
目次
  • 文字に影(ドロップシャドウ)を適用する
  • 文字に光彩を適用する
  • 文字に縁取り(アウトライン)を適用する
  • 参考: 要素に影(ドロップシャドウ)を適用する

文字に影(ドロップシャドウ)を適用する

文字(テキスト)に影を付けたい場合、text-shadowプロパティを用います。

文字の右下に影

Hamamatsu Web Design

文字の左上に影

Hamamatsu Web Design

文字の右下および左上に影

Hamamatsu Web Design

重ね掛けも可能。

文字に光彩を適用する

影の位置をずらさず中心から陰影を付けると、光彩を表現することができます。

Hamamatsu Web Design

文字に縁取り(アウトライン)を適用する

光彩の拡散具合を調整することで、縁取りを表現することもできます。

Hamamatsu Web Design

参考: 要素に影(ドロップシャドウ)を適用する

文字への装飾はtext-shadowプロパティを用いて表現することができました。同様に、div・table・imgなどの各要素に装飾を施す場合、box-shadowプロパティを用いることで表現することができます。text-shadowプロパティとほとんど構成は同じですが、box-shadowプロパティでは4番目の値として広がり距離を指定することができます。(詳細は割愛

div

table

th td
th td
th td

img

画像
クライアントサイド言語
サムネ画像
CSSで文字に影(ドロップシャドウ)、光彩、縁取りをかける方法