カテゴリ一覧から記事を探す

【CSS】box-shadowで要素に影を付ける方法とサンプルまとめ

【CSS】box-shadowで要素に影を付ける方法とサンプルまとめ

CSSで影を付けてかっこよくしたい。

影の付け方が正直良く分からない。
ボックスに影をつけるだけでなく、透過画像に影を上手につけるにはどうしたらいい?文字に影を付けるときは?

要素に影を付けるための基本をすべて書いていきます。

さて、前回はCSSのpositionについて解説しました。

今回は、要素に影を付けるためのbox-shadowというプロパティについて主に解説しつつ、透明画像に影を付けるときの応用や文字に影を付ける方法についても解説していきます。

1.box-shadowで何ができる?

box-shadowを使いこなせると、影を付けれるようになりボタンや要素に質感を出すことができるようになります。

例えば以下のボタンには影がついています。

影がついていないバージョンは以下の通り。

ボタンに限らず、影を付けるだけでよりおしゃれにすることが可能です。

このように、box-shadowは要素の輪郭に影を付けることができます。

 基本的にはborderの外側に影ができます。

2.box-shadowの使い方

box-shadowの基本的な使い方は以下の通りです。

CSS
○○{
  box-shadow: 横の位置 縦の位置 ぼかし度 色;
}

設定しようと思えばより多くの設定ができるのですが、基本的にはこの4つの値を指定することが多いかなと感じています。

また、ぼかし度以降の部分はあってもなくても大丈夫です。
(色を省くと、影の色は真っ黒になります)

その他の設定方法についても後述します!

box-shadowの基本 : ぼかしのない影

まずは影のつけかたの基本から。

CSS
.example-box{
  background: #ddd;
  box-shadow: 3px 3px #3c3c3c;
}

上記のようにCSSを指定すると、以下のようになります。
(不必要なCSSについては省いています。)

box-shadowの基本 : ぼかしのない影

#3c3c3cの色の影が右に3px、下に3pxずれて表示されています。

ここのpxをマイナスにすれば、左と上へずれます。

CSS
.example-box{
  background: #ddd;
  box-shadow: -3px -3px #3c3c3c;
}

影は右下へずれるのがいつも見慣れているものなので、使う機会はあまりないと考えていいでしょう。

左上へ影をずらした

box-shadowの基本 : 影の色を変える

影の色を変えなければ、ボックスの色が例えばオレンジだった場合に変な感じになってしまいます。

影の色の変え方例は、以下の通りです。

CSS
.example-box{
  background: #ff9800;
  box-shadow: 4px 4px #ffd54f;
}

ボックスの色を#ff9800にし、影の色を#ffd54fに設定しました。

box-shadowの基本 : 影の色を変える

色を変えてみるのもおしゃれかもしれません。

「ボックスの色も影の色も違うものを考えなければならないのか・・・」という方は、以下のような指定方法も簡単でおすすめです。

CSS
.example-box{
  background: rgb(255,152,0);
  box-shadow: 4px 4px rgb(255,152,0,0.5);
}

色合いは先ほどのオレンジ色のものとほぼ変わりません。

ボックスの背景色をrgb形式で指定して、影の色はrgba形式で半透明にすれば1色考えるだけでいいので簡単になります。
0.5の部分が透明度で、50%の透過度にしてね、という意味合いになります。

box-shadowの基本 : 影をぼかす

影をぼかすためのCSSは以下の通りです。

CSS
.example-box{
  background: #ddd;
  box-shadow: 3px 3px 5px #3c3c3c;
}

5px分ぼかすという意味になります。

box-shadowの基本 : 影をぼかす

このようなボックスはよく見かけますね!

影の向き(ずれ)を指定せず、0pxにすると影が全体に広がります。

CSS
.example-box{
  background: #ddd;
  box-shadow:   0 0 5px #3c3c3c;
}

影を全体に広げる

ここまで覚えれば、box-shadowについての基本はバッチリです!

ここから先は、その他の設定方法について解説していきます。

影の広がりを調節(拡大・縮小)する

最初にbox-shadowのCSSについて、以下のように説明しました。

CSS
○○{
  box-shadow: 横の位置 縦の位置 ぼかし度 色;
}

ぼかし度の後に、影の広がりを調節するための値も書くことができます。

CSS
○○{
  box-shadow: 横の位置 縦の位置 ぼかし度 影の広がり 色;
}

これは、作った影を拡大・縮小する場合に使います。
要素の大きさと比べて大きめの影や小さめの影が作れるということです。

次のように書けば縮小できます。

CSS
.example-box{
  background: #ddd;
  box-shadow: 10px 10px 15px -10px #3c3c3c;
}

10px縮小してみました。影がボックスの大きさよりも小さくなっています。

影の広がりを調節(縮小)する

次は、拡大させてみます。

CSS
.example-box{
  background: #ddd;
  box-shadow: 5px 5px 5px 10px #6c6c6c;
}

10px拡大させてみました。
ボックスの大きさより10px大きい影が5pxずれて表示されています。

影の広がりを調節(拡大)する

値が4つになり、なにが何を意味しているのか分からなくなる時が出てきますので、意味をしっかり覚えておきましょう!

3.内側に影をつける

影を要素の内側につけることで、くぼんだ感じを表現することもできます。

次のCSSのように、最後にinsetを付け足すことでできます。

CSS
○○{
  box-shadow: 横の位置 縦の位置 ぼかし度 色 inset;
}

次のCSSを指定して見ます。

CSS
.example-box{
  background: #ddd;
  box-shadow: 5px 5px 5px #6c6c6c inset;
}

すると、以下のように左上の内側に影がでました。

内側に影をつける

内側にも外側にも影をつける

内側にも外側にも影をつけることができます!

カンマ,で区切ることで影を増やすことができます。

CSS
.example-box{
  background: #ddd;
  box-shadow: 5px 5px 5px #f44336,5px 5px 5px #2196f3 inset;
}

外側の影(赤色),内側の影(青色)としてみました。

内側にも外側にも影をつける

 同じようにカンマで区切っていけば、外側に3つ、4つとさらに影を増やすことも可能です。

影はborderの外側・内側にくる

気を付けたいのが、影はborder(枠線)の外側・内側にくるということです。

黒色の枠線を追加してみると、以下のようになります。

枠線が太すぎると気持ち悪く見えるので、注意が必要です。
影はborderの外側・内側にくる

逆にそれを利用すれば、2重線や3重線なども表現可能です。

CSS
.example-box{
  background: #ddd;
  border: solid 5px #4caf50;
  box-shadow: 0 0 0 5px #f44336,0 0 0 5px #2196f3 inset;
}

内側の影が青色、枠線が緑色、外側の影が赤色です。

影はずれやぼかしを無くして、拡大のみ行うことで枠線のように見せることが可能です。
3重線をつける

特殊な場合でしか使いませんが、おしゃれなボックスデザインを作りたいときの参考になれば。

4.filter: drop-shadowについて

少し余談になります。使う機会がほぼないので飛ばしてもOKです。

影をつける方法として、filter: drop-shadowというものもあります。

box-shadowとの違いは何か説明するならば、以下の画像を見てもらえばわかりやすいと思います。

filter: drop-shadowについて

どちらも、背景が透明な画像に対してCSSを適用させています。

box-shadowの場合だと画像の枠に影ができてしまうのですが、filter: drop-shadowを使えば透明画像の文字の部分に影を付けることができます。

そんな便利なfilter: drop-shadowの使い方は以下を参考にしてください。

CSS
.example-img{
  filter: drop-shadow(3px 3px 2px #3c3c3c);
  -webkit-filter: drop-shadow(3px 3px 2px #3c3c3c);
}

かっこの中に入るものはbox-shadowと基本的に同じになりますので、なんとなくわかるかと思います。

対応ブラウザについて

box-shadowは心配しなくてもいいのですが、filterについては、最新のIE11で使えない他、Android4.4以降でなければ使うことができませんので注意してください。

最新情報はfilterの対応ブラウザでご確認ください。

透明画像に影を付けたいといった状況になった場合は、画像加工で影を付けるのが得策と言えるでしょう。

5.文字に影をつけるには?

今回は要素に影を付ける方法について紹介していますが、文字に影を付けたい!と思った場合はtext-shadowというものを使います。

同じような意味で使え、理解しやすいと思いますので、ここで紹介しておきます。

CSS
○○{
  text-shadow: 横の位置 縦の位置 ぼかし具合 色;
}

このように指定してあげれば使うことができます!

例は以下の通りです。

CSS
.example-text{
  text-shadow: 2px 2px 2px #ffc107;
}

文字に影をつけるには?

カンマで区切って影の数を増やすことも可能ですが、内側に影をつけたり、影の拡大・縮小は行えません。

6.まとめ

今回はbox-shadowについて解説しつつ、drop-shadowとの違いや文字に影を付ける方法についても解説しました。

box-shadowについてはよく使いますので、しっかりと意味を抑えて自分で扱えるようになっておきたいところです!