box-shadowとは?影の装飾プロパティについての説明

こんにちは tanaka です。

cssプロパティ
box-shadow の説明です。

box-shadowは
ボックスモデルへ
影の装飾をつけるために使います。

box-shadowの
影の種類は、
外側と内側の
2種類あります。

 外側

画像blog-css-box-shadow03

 内側

画像blog-css-box-shadow04

box-shadowの
ボックスモデルに対する影の位置は、
 外側 = content + padding + border
 内側 = content + padding
に影を入れることができます。

外側は
content + padding + border の外側に影がつく

画像blog-css-box-shadow01

内側は
content + padding の内側に影がつく

画像blog-css-box-shadow02

box-shadowの
値は6個あります。

box-shadow: 30px 30px 20px 20px rgba(0, 0, 0, 0.5) inset;

左から順番に
 1:左右
 2:上下
 3:ぼかし距離
 4:膨張・収縮
 5:色
 6:inset (insetを入れると内側になる、デフォルトは外側)

それでは、
詳しくみて行きましょう。

box-shadow: 30px 30px 20px 20px rgba(0, 0, 0, 0.5) inset;

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

box-shadowの説明

box-shadowはボックスモデルへ影をつけるために使う

box-shadowは
ボックスモデルへ
影の装飾をつけるために使います。

box-shadowの
影の種類は、
外側と内側の
2種類あります。

 外側

画像blog-css-box-shadow03

 内側

画像blog-css-box-shadow04

box-shadowの
外側、内側の切り替えは
値の inset で行います。

box-shadowの
ボックスモデルでの影の位置は、
 外側 = content + padding + border
 内側 = content + padding
へ影を入れることができます。

外側は
content + padding + border の外側に影がつく

画像blog-css-box-shadow01

内側は
content + padding の内側に影がつく

画像blog-css-box-shadow02

box-shadowの値は6個

box-shadowの
値は6個あります。

box-shadow: 30px 30px 20px 20px rgba(0, 0, 0, 0.5) inset;

左から順番に
 1:左右
 2:上下
 3:ぼかし距離
 4:膨張・収縮
 5:色
 6:inset (内側に変更、デフォルトは外側)

box-shadow: 30px 30px 20px 20px rgba(0, 0, 0, 0.5) inset;

1:左右

影の左右位置を決めます。
マイナス指定すると、
逆方向へ影をつけることができます。

外側と内側は、
影がつく方向が
逆になっています。

どちらか分からなくなった時は、
マイナスの記号を
入れたり抜いたりしてみてください。

そうすると、
左右が入れ替わり
画面で確認できます。

外側

box-shadow: 30px 0px 10px 0px rgba(0, 0, 0, 0.5);

画像blog-css-box-shadow05

box-shadow: -30px 0px 10px 0px rgba(0, 0, 0, 0.5);

画像blog-css-box-shadow06
内側

box-shadow: 30px 0px 10px 0px rgba(0, 0, 0, 0.5) inset;

画像blog-css-box-shadow07

box-shadow: -30px 0px 10px 0px rgba(0, 0, 0, 0.5) inset;

画像blog-css-box-shadow08

2:上下

影の上下位置を決めます。
マイナス指定すると、
逆方向へ影をつけることができます。

外側と内側は、
影がつく方向が
逆になっています。

どちらか分からなくなった時は、
マイナスの記号を
入れたり抜いたりしてみてください。

そうすると、
上下が入れ替わり
画面で確認できます。

外側

box-shadow: 0px 30px 10px 0px rgba(0, 0, 0, 0.5);

画像blog-css-box-shadow09

box-shadow: 0px -30px 10px 0px rgba(0, 0, 0, 0.5);

画像blog-css-box-shadow10
内側

box-shadow: 0px 30px 10px 0px rgba(0, 0, 0, 0.5) inset;

画像blog-css-box-shadow11

box-shadow: 0px -30px 10px 0px rgba(0, 0, 0, 0.5) inset;

画像blog-css-box-shadow12

3:ぼかし距離

複雑な計算式により
影をぼかす距離を決めます。

あまり大きな数値を入れると
不格好になるので、

おおよそ、
上下左右の
影の大きさと同じか
それ以下が良いでしょう。

外側

box-shadow: 30px 30px 20px 0px rgba(0, 0, 0, 0.5);

画像blog-css-box-shadow13
内側

box-shadow: 30px 30px 20px 0px rgba(0, 0, 0, 0.5) inset;

画像blog-css-box-shadow14

4:膨張・収縮

影を膨張・収縮させます。

マイナスの数値も
指定できます。

プラス  = 膨張
マイナス = 収縮

あつかいが難しく
センスを問われる
値でもあります。

外側

box-shadow: 30px 30px 20px 20px rgba(0, 0, 0, 0.5);

画像blog-css-box-shadow15
内側

box-shadow: 30px 30px 20px 20px rgba(0, 0, 0, 0.5) inset;

画像blog-css-box-shadow16

5:色

影の色を変えることができます。

なるべく
rgba(0, 0, 0, 0.5)
で色の値を入れ、

最後の透過率を(0.5)にすると
影のように見えるので
おすすめです。

画像blog-css-box-shadow17

6:inset (内側に変更、デフォルトは外側)

影を
外側、内側
どちらにつけるかを決めます。

何も入れなければ外側
inset を入れると内側
になります。

まとめ

box-shadowとは

box-shadowは
ボックスモデルへ
影の装飾をつける。

box-shadowは2種類

box-shadowは
外側と内側の2種類。

 外側

画像blog-css-box-shadow03

 内側

画像blog-css-box-shadow04
box-shadowは外側、内側に影

box-shadowは、
 外側 = content + padding + border
 内側 = content + padding
に影が入る。

外側は
content + padding + border の外

画像blog-css-box-shadow01

内側は
content + padding の内

画像blog-css-box-shadow02
box-shadowの値は6個

box-shadowの
値は6個。

box-shadow: 30px 30px 20px 20px rgba(0, 0, 0, 0.5) inset;

左から
 1:左右
 2:上下
 3:ぼかし距離
 4:膨張・収縮
 5:色
 6:inset (内側に変更、デフォルトは外側)

box-shadow: 30px 30px 20px 20px rgba(0, 0, 0, 0.5) inset;
画面で確認

外側と内側とで、
影のつく方向が
逆にないる。

どちらか分からなくなった時は、

マイナスの記号を
入れたり抜いたりして
画面で確認すると良い。

以上、
box-shadow
の話でした。

ありがとうございました。

タイトルとURLをコピーしました