HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用51. 要素やテキストに影(光彩)をつけるプロパティ(text-shadow, box-shadow)

      2017/07/11

text-shadowプロパティ(テキスト シャドウ)

テキストに対して、影(光彩)の効果をつけるプロパティ。
CSS3で追加されたプロパティです。
ベンダープレフィックスは不要
※Internet Explorer 10以上から対応

text-shadowプロパティの各ブラウザの対応状況
Can I use -text-shadow-

box-shadowプロパティ(ボックス シャドウ)

要素に対して、影(光彩)の効果をつけるプロパティ。
CSS3で追加されたプロパティです。
ベンダープレフィックスは不要
※Internet Explorer 9以上から対応

box-shadowプロパティの各ブラウザの対応状況
Can I use -box-shadow-

text-shadowとbox-shadowの指定方法(外側)

外側に影(光彩)の効果を指定する場合は4つの値を下記の順に指定します。
x軸の移動 y軸の移動値 ぼかしのサイズ 色
各値は、半角スペースで区切ります。順番は変更できません。
x軸の移動値、y軸の移動値、ぼかしのサイズの単位は、主にpxで指定します。(値が0の場合は、単位は省略できます)
色に関しては、カラーコードまたはこの先で解説するrgba()などが使用できます。

text-shadow

box-shadow

box-shadowの指定方法(内側)

box-shadowは要素の内側に対しても使用できます。
内側に影(光彩)の効果を指定する場合は inset を追加した 5つの値を下記の順に指定します。
inset x軸の移動値 y軸の移動値 ぼかしのサイズ 色

box-shadowの内側指定

x軸とy軸の移動値について

各軸の値にマイナス指定をするとx軸は左方向に、y軸は上方向に移動させることができます。

box-shadowの方向を左上に指定

text-shadowとbox-shadowの値の複数指定

値のセットをカンマで区切ることによって複数指定が可能です。
指定数に、制限は特にありません。
重なり順は左のセットが一番上に重なり、次のセットが下に重なります。
下記のコードは、ブルー(#00f)の下に、グリーン(#0f0)が重なるようにしています。ぼかしは、なしにしています。

box-shadowの値の複数指定

box-shadowの場合は、内側と外側ごとに指定もできます。

box-shadowの方向を変えて複数指定

text-shadowを使ったフチ文字の作成

テキストには、borderを指定することができないので、text-shadowを重ねがけすることで、擬似的にフチ文字を再現することができます。
ポイントは、x軸とy軸の移動値を0pxにし、ぼかしのサイズと色だけ指定します。
いくつ指定すればフチ文字のように見えるかは、テキストのサイズや色により変わります。
下記は、各値のセットを見やすいように、改行して記述しています。

texr-shadowを使ったフチ文字

text-shadowとbox-shadowの注意点

text-shadowとbox-shadowで作った影の部分は、実体がないため、適度な余白を設定しないと重なってしまいます。
余白の設定は、margin, padding。テキストは、line-heightも使えます。

text-shadow、box-shadowが重なる場合

他にも、親要素に overflow: hidden; が設定されているとはみ出した影が表示されなくなります。
下記のコードは、親要素と子要素の幅と高さが同じなので、影が表示されません。
この場合は、親要素の幅、高さを広げるか、paddingで調整する必要があります。
影がついているかは、overflowを解除するとわかります。

overflowで影が見えなくなる場合

まとめ

  • text-shadowプロパティは、テキストに影(光彩)の効果をつけることができる
  • box-shadowプロパティは、要素に影(光彩)の効果をつけることができる
  • 外側の指定は、x軸の移動値、y軸の移動値、ぼかしのサイズ、色
  • box-shadowは内側の指定が可能
  • 内側の指定は、inset、x軸の移動値、y軸の移動値、ぼかしのサイズ、色
  • 値のセットは、カンマで区切ると複数指定ができる
  • text-shadow、box-shadowを設定したテキストや要素は、重ならない用に余白を設定する

 - HTML・CSS