CSSのbox-shadowで要素に影をつける方法を徹底解説

こんにちは!ライターのナナミです。

WEBサイトを作っていて、ボタンとかに影をつけたいなぁと思ったことはありませんか?

box_shadow-first1

こんな感じでちょっと浮いて見えると、ボタンの質感が出てリッチなデザインになりますね。

今回はこんなボタンもさくっと作れちゃう、box-shadowについてまとめました!

・box-shadowとは何か
・box-shadowの使い方
・box-shadowの実用例
・ジェネレーターの紹介

という流れで、基礎から実践的な内容まで紹介していきます。

要素に影をつけられるようになると、WEBサイト上で奥行きのあるレイアウトも作れちゃいます
ぜひ覚えていってください!

box-shadowとは?

box-shadow要素の輪郭に影をつけるプロパティです。

box_shadow1

要素にbackgroundで色を指定すると、その要素の範囲に背景色がつきますよね。
色がついた範囲の輪郭、そこに影をつけるような感じになります。

要素の角を丸くしたりしても、それに合わせて影を作ってくれる、とても便利なプロパティです。

box-shadowの使い方

box-shadowの使い方はとっても簡単です。

CSSは下記のように書きます。

CSS

横の位置、縦の位置は、影が表示される位置をpxで指定します

プラスの値だと、横は右、縦は下にずれます。
マイナスの値だと、横は左、縦は上にずれます。

影のぼかし度と影の広さは、影の見た目を決める数値です。

ぼかし度が大きくなればぼかしが強くなり、影の広さを大きくすれば影自体が大きくなります。
これもpxで指定します。

では、細かい使い方を見ていきましょう!

基本の使い方

まずは基本、よく見るような影の指定方法です。

box_shadow1

HTML

CSS

影の位置をそれぞれ2pxにしているので、右に2px、下に2pxずれた影になります。
光源が左上にある感じですね。

影をシャープにする

影といえばふんわりぼやけているイメージですが、デザインによってはシャープな影の方が合うこともありますね。

ぼかし具合の値を0にすると、シャープな影を作ることができます。

box_shadow2

HTML

CSS

内側に影をつける

box-shadowは、要素の内側に影をつけることもできます。

指定方法は簡単、記述の最後にinsetと入れるだけです。

box_shadow3

HTML

CSS

要素自体がちょっとへこんでいるような感じにできますね!

複数の影をつける

box-shadowは、一つの要素に複数指定することができます
下記のように「,(カンマ)」で区切って記述するだけです。

box_shadow4

HTML

CSS

外側の影も内側の影も両方つけたいときでも、これなら大丈夫ですね!

box-shadowの実用例

使い方で色々説明したように、box-shadowは色々な設定を行なうことができます。
組み合わせるといろんな表現ができそうですね!

今回その一例を挙げてみたので、参考にしてみてください。

ポラロイド写真風

box_shadow-ex1

HTML

CSS

写真に内側の影をつけて、周りの要素に外側の影をつけました。
こういう写真の見せ方も可愛いですね!

ボタンが浮いているように見せる

box_shadow-ex2-1

HTML

CSS

定番中の定番、ボタンがちょっと浮いている感じです。

シンプルですが、ユーザーが「ボタンだな」とすぐわかるデザインにできるのはかなり魅力です。

下記のように、マウスオーバーしたときに影の大きさやボタンの位置を調整してあげると、よりボタン感が増すと思います。

box_shadow-ex2-2

HTML

CSS

CSSだけでもこれだけできちゃうなんて、素敵ですね!

マテリアルデザイン

box-shadowを最大限活用している例の一つに、マテリアルデザインというものがあります。

マテリアルデザインとは、Googleが発表したデザインのフレームワーク(決まりごと)です。

画面内で「ものが重なっていたら影ができる」というような、現実世界っぽい見せ方などを取り入れています。

そうすることで、ユーザーがどのように操作すればいいのかを直感で理解できるようなデザインにするのが目的です。

マテリアルデザインについての詳細は、こちらの記事が詳しく解説してくれています。
https://saruwakakun.com/html-css/material

では、実際にマテリアルデザインを取り入れてみましょう。

box_shadow-ex3

HTML

CSS

マテリアルデザインで使われている、Cardという見せ方です。
ただのコンテンツではなく、クリックなどの動きが期待できる見た目になりますね。

このように、box-shadowは単純に影という見栄えを加えるだけでなく、ユーザーの利便性向上にも一役買ってくれるのです。

対応ブラウザ

とっても便利なbox-shadow、さらに嬉しい点があります。

カレントブラウザだけでなく、オールドブラウザでも使うことができるのです。

厳密にはIE8以前は使えないのですが、一般的なユーザーでIE8以前を使っている人はまずいないでしょう。

つまり、基本的に何も気にせず使って大丈夫です、やったぁ!

コピペするだけ! ジェネレーター紹介

イメージしている影があるんだけど、数値をどうすればいいのかわからない…
実装方法はわかったけど、影の色とか色々試しながらやりたい…

そんな方でも大丈夫、ジェネレーターという強い味方がいます!

ジェネレーターとは、数値や色を選んだりするだけでCSSコードを生成してくれる超便利なものです。

検索するといろんな種類がでてきます。

そんな中から、オススメのジェネレーターを二つご紹介します。

box-shadowとborder-radiusジェネレーター

box_shadow-generator1
http://www.bad-company.jp/box-shadow/

影と角丸を両方指定できるジェネレーターです。
数値も色も感覚的に指定できます、色々試せますね!

影の複数指定にも対応しているので、とりあえず困ったらこれでOKです。

box-shadow | css-generator.net – border-image

box_shadow-generator2
https://css-generator.net/box-shadow/

上記のものよりすっきりとした感じのジェネレーターです。
色の複数指定はできませんが、影の色の透過度を指定することができます。

一つの影だけでいいから、色にこだわって作りたい方はこちらがおすすめです。

文字や画像に影をつけたい場合

box-shadowは要素そのものに影をつけるので、文字や絵に沿った影をつけることはできません。
文字や絵に影をつけるときには、text-shadowdrop-shadowを使います。

文字に影をつけるtext-shadow

textshadow2
文字に沿った影をつけたい場合は、text-shadowを使います。

text-shadowの詳細や使い方はこちらの記事をチェック!

画像にそった影をつけるdrop-shadow

drop_ shadow1
画像の絵柄に沿った影をつけたい場合は、drop-shadowを使います。

drop-shadowの詳細や使い方はこちらの記事をチェック!

まとめ

いかがでしたか?

たかが影、されど影。
影ながらWEBサイトをリッチに仕上げてくれるbox-shadowは、もはや必須スキルと言っても過言ではないでしょう。

マテリアルデザインなども活用しながら、ユーザーにとって使いやすいWEBサイトをばんばん作っちゃってください!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説