Web blog WEBブログ

ボックスに影を付ける (box-shadow)

2019.04.29

こんにちは。コーダーの兼山です。

CSSのbox-shadowを使って影をつける基本の方法を幾つか紹介します。
コピペ後、影の長さや、ぼかし等、好みに合わせて調整して活用してみましょう。

右と下に伸びるぼかしのない影

1つめの値が左右の方向指定。
2つめの値は上下の方向指定。

値が大きくなるほど、影が伸びます。

左と上に伸びるぼかしのない影

1つめの値が左右の方向指定。
2つめの値は上下の方向指定。

この場合、「-(マイナス値)」を指定します。
値が大きくなるほど、影が伸びます。

影の色を変える

影の色を変えたい場合、色コード、色名を指定します。

影をぼかす

3つめの値が、ぼかしの指定です。
値が大きくなるほど、ぼかしが強くなります。

影の色を変えてぼかす

影の色を変えたい場合、色コード、色名を指定します。

四方対称に影をぼかす

上下と左右それぞれの影の向きを0にすることで、
全体に影が広がる指定になります。

影の広がりを拡大させる

4つめの値を指定することで影を大きく表示しています。
値が大きくなるほど、影の広がりが大きくなります。

影の広がりを縮小させる

4つめの値を「-(マイナス値)」で指定することで影を小さく表示しています。

影の広がりを調整し、影の色を変える

影の色を変えたい場合、色コード、色名を指定します。

内側の左と上に影をかける

ボックスの内側に影を指定する場合、
一番最後の値へ「inset」を指定します。

1つめの値が左右の方向指定。
2つめの値は上下の方向指定。
3つめの値は、ぼかしの指定。

内側の右と下に影をかける

1つめの値が左右の方向指定。
2つめの値は上下の方向指定。
3つめの値は、ぼかしの指定。

この場合、「-(マイナス値)」を指定します。
値が大きくなるほど、影が伸びます。

内側の影の色を変える

影の色を変えたい場合、色コード、色名を指定します。

内側と外側両方に影をかける

カンマで区切って指定することで、複数の指定をすることが可能です。
内側、外側へ、同時指定することもできます。

下方向にだけ影をつける

4番目の指定(広がり値)をぼかしの値と同じだけ負の値で指定(縮小)すると左右の影が消えます。

備考:box-shadowについて

指定方法は以下の通りです。

box-shadow: 左右方向の指定 上下方向の指定 ぼかし具合の指定 広がりの指定 影の色の指定 内側指定;

複数指定の場合、カンマ『,』で区切ります。

まとめ

box-shadowを使うと、ボックスの横並び等で生じるマージンの指定などを気にする必要が無くなりますし、立体的な表現ができるので積極的に使いたいですね。

レスポンシブや、モバイルのコーディングにも活用しましょう!

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口