LINEで現役エンジニアに直接質問してみよう!登録無料

CSS box-shadowの使い方!影を付ける方法とサンプル5つを紹介

Webサイトを作成していて、「ボタンに影を付けたいな」「マウスがホバーしたら浮いたように見せたいな」と思ったことはありませんか?

そのようなときは「box-shadow」を使うと、簡単に表現出来ます。

CSSのbox-shadowの使い方・書き方

影をつけるCSSプロパティbox-shadowの使い方を解説します。画像や何か要素に影をつけたいときには、その要素に対してbox-shadowを下記のように付与します。

〇〇 {
  box-shadow: 横方向 縦方向 (ぼかし) (広がり) (影の色) (影の向き);
}

実際にbox-shadowを使った例は下記のようになります。

.elem {
  box-shadow: 5px 5px 4px -2px gray inset;
}

「横方向」「縦方向」は必ず値を指定しなくてはいけませんが、その他はオプションとなっています。ただし、オプションは右側を省略出来るだけで、ぼかしや広がりを省略して色のみを指定するといったことは出来ません。

基本: 横方向と縦方向の影

box-shadowの基本を解説します。まずは横方向と縦方向のみ使う方法をマスターしましょう。この部分には影をどのくらい上下左右に移動させるかを指定します。

長さはpxを使うのが一般的です。

この例では、下方向と右の方向にそれぞれ影が付きます。

影の付き方の基本として、右向きと下向きが正(プラス)の方向です。そのため、box-shadowの縦方向と横方向に正(プラス)の長さを指定すると、その向きに影が動きます。

もし、逆の向き(左向きや上向き)にしたい場合は、長さに-5pxなどの負の長さを指定します。

影のぼかし

このままでは「くっきりしすぎる影」なので、それをぼかしてみたいと思います。

ぼかすには、box-shadowの3番目の値を使います。

縦方向と横方向を0pxにして、ぼかしを10pxにしてみました。要素の影が外側に10pxぼかされているのがわかると思います。このように、ぼかしは特定の方向ではなく全方向に対して適用されます。

更に、縦方向と横方向を先程と同じ5pxにすると、Webページで見たことあるような影が作れます。

影の広がり(拡大・縮小を制御)

box-shadowの4番目の値で、影の広がりを指定できます。影の広がりとは、影をそのまま拡大したり縮小したり出来るイメージです。

正(プラス)の値にすると影は大きくなり、負(マイナス)にすると小さくなります。

影を大きくする例

この例では、右方向と下方向に5pxずつ移動させ、広がりを10pxに指定しています。

広がりは全方向に適用されるため、元の要素よりも影の大きさのほうが20px(右+左)分大きくなっています。

影を小さくする例

逆にこの例では、広がりに-10pxを指定しているので、全方向の影の長さが20px分小さくなっています。

影の色を変える例

box-shadowの5番目の値で、影の色を指定できます。今までは黒(#000)しか使ってきませんでした。この部分を使うと、灰色やオレンジなど自分の好きな色を使う事が出来ます。

また、透明度(alpha値)も同時に指定することが出来ます。

色の指定には、16進数表記、rgbrgbaなどを使うことが出来ます。

16進数で色を指定

色が変わりました。また、ぼかしや影の広がりも同じ色が適用されます。

rgbaで色を指定(影を透明にする)

rgbaを使うと、影に透明度をもたせることが出来ます。

内向き/外向きの影

box-shadowの6番目の値で影ができる方向を指定できます。方向は外向きか内向きかを指定できて、デフォルトで外側です。

内向きに作ることもできて、その場合はinsetを指定します。

また、内向きと外向きの両方を同時に定義することも出来ます。その場合は、カンマ区切りでそれぞれの影を定義します。

CSSのbox-shadowを使うときの注意点

box-shadowを使うときの注意点があるので解説します。

余白を作っておくようにましょう

box-shadowを使っていて中級者でもやりがちなのが、影のサイズは要素のサイズに加算されないという点に注意する必要があります。

どういうことなのかというと、下記の例のように、box-shadowがとても大きい場合でも、それによって要素のサイズが変わることは無い。ということです。

影のサイズは3px
影のサイズは40px

このように影のサイズは全く異なりますが、2つの要素の幅のサイズはどちらも同じ110pxです。

そのため、影の色付け部分が他の要素まで覆いかぶさってしまう場合があります。box-shadowを使う際には、周りの余白に気をつけて使うようにしましょう。

色々な影のデザインサンプル

影の応用範囲は幅広く、ちょっとした場所に付け加えるとWebサイトが一気に栄えます。ぜひ、マスターしましょう!

ボタンのぼかさない影

影を使って、ボタンがホーバーしたことをわかりやすくしています。

ボタンでぼかす影

影を下向きにして、立体感が出るようにしてみました。

ボタンで立体感を出す影

内向きの影を使うと、このように立体感のあるボタンも作ることが出来ます。

写真が浮かんで見える影

画像に影を使うと、浮かんで見えるようになります。

2つ目のボーターとして使う

影を使って、2つ目のボーダーを表現することも出来ます。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。