記事内に商品プロモーションが含まれる場合があります
今回はCSSのbox-shadowを使って影（ドロップシャドウ）をつける方法と、コピペで使えるおしゃれな影のサンプルを10個紹介します。ぜひ参考にしてみてください。
CSSのbox-shadowの使い方
それでは、まずbox-shadowプロパティの使い方を紹介します。何かの要素に影をつけたいときには、例えば以下のように書きます。
◯◯ {
box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定;
}
例 .box {box-shadow: 2px 2px 4px -2px gray inset}
◯◯の部分はセレクタですね。ここで影をつける要素を指定します。
あとは、値を半角スペース区切りで指定していきます。左右の向きと上下の向きではpxでどちらの方向へ影を伸ばすかを指定します。この2つは指定が必須です。
一方で、後半ぼかし〜内側指定までは、指定しなくてもOKです。といっても何のことだか分からないと思うので順番に解説していきます。
その1：ぼかしのない影を作る
右と下に4pxずつ伸びる影の例
.example {
box-shadow: 4px 4px;
}
はじめの2つの値だけを指定しています。1つめの値が左右の方向指定です。正の値を指定すると、右方向に伸びます。左側に伸ばしたいときには「-4px」というようにマイナスの値を指定します。
2つめの値は上下の方向指定です。こちらも同様に、上に伸したいときにはマイナスの値を指定すればOKです。
左に4px、上に6px伸びる影の例
.example {
box-shadow: -4px -6px;
}
このように、上下左右好きな方向に、好きな長さの影を作ることができます。
その2：影の色を変える
影の色を黒から変えたいときには、半角スペースを空けて色を指定します。
影の色を#668AD8にする例
.example {
box-shadow: 6px 6px #668AD8;
}単純に半角スペースを区切って色コードや色名を指定するだけでOKです。下の記事で配色見本とともに色コードを紹介しているので、参考にしてみてください。
その3：影をぼかす
影をぼかしたいときには3つめの値に、ぼかす度合いをpx単位で指定します。
影を4px分だけぼかす例
.example {
box-shadow: 2px 2px 4px;
}右下2pxに影に4pxのぼかしを加えています。
影の色を変えつつぼかす例
.example {
box-shadow: 2px 2px 4px gray;
}色を変えたいときには、3つの値の後に色コードや色名を書けばOKです。影の色をグレイにしたので、少し影が薄くなっていることが分かるかと思います。
上下左右対称に影をぼかす例
.example {
box-shadow: 0 0 8px gray;
}上下と左右それぞれの影の向きを0にしています。言い換えると、向きを指定していません。これにより、影が偏ることなく全体に広がるようになります。この例だと8px分のぼけたグレイの影がかかっています。
その4：影の広がりを調整する
4つめに書いた値は「影の広がり」具合を決めるものになります。「作った影をそのまま縮小したり、拡大したりできる」というイメージですね。マイナスの値を指定すると、影は小さくなります。
影を縮小させる例
.example {
box-shadow: 10px 10px 15px -10px;
}右と下に10pxずつ伸ばし、15px分ぼかしている影に対して、-10px分縮小させています。水色のボックスのサイズに対して、影が小さめになっているのが分かるかと思います。
影を拡大し、色も指定する例
.example {
box-shadow: 5px 5px 5px 10px rgba(0,0,0,0.2);
}今度は10px分影を拡大してみました。色を指定する場合には、4つの値の後にコードを書けばOKです（rgbaは透明色にもできる色の書き方ですね）。
その5：影を内側にかける
ボックスの内側に影をつけたいということもあるかと思います。そんなときは値の一番最後にinsetと書けばOKです。
内側にぼかした影をかける例
.example {
box-shadow: 2px 2px 4px inset;
}ボックスの内側に影がかかります。右と下の方向に2pxずつ伸び、4pxのぼかしがかかっています。
影の向きを変え、色も変える例
.example {
box-shadow: -5px -5px 10px #668AD8 inset;
}マイナスの値にすれば影のかかる向きが変わります。
その6：カンマ区切りで内側と外側両方に影をかける
box-shadowはカンマ区切りにより複数の値を指定することができます。これにより、内側と外側どちらにも影をつけることも可能です。
内側にぼかした影をかける例
.example {
box-shadow: 3px 3px 6px -2px #555,
3px 3px 8px rgba(255,255,255,0.8) inset;
}外側にはぼかした影を、内側には白色の影をつけています。カンマを3つ以上つけて複数の影を指定することもできます。
色々な影のCSSサンプル
ここからは実際に影を使った表現例を紹介していきます。どれもコピペで使うことができます。
ボタンに使えそうな影
控えめにぼかし影をつけてみた表現です。ボタンに影をつけると押せることが一目見て分かるので良いですね。なお、ホバー時には影が無くなって沈むようにしています。 サンプルを見る
<a class="sample" href="~">BUTTON</a>CSS
.sample {
display: inline-block;
padding:5px 10px;
color: #FFF;
text-decoration :none;
background: skyblue;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
transition: .3s;
}
.sample:hover {
box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
ぼかさない場合
もはや影と言えない形ですが、box-shadowを使って表現しています。ホバー時には影が縮みます。お好みで色を変えて使ってくださいませ。 サンプルを見る
<a class="sample" href="~">BUTTON</a>CSS
.sample {
display: inline-block;
padding:5px 10px;
color: #FFF;
text-decoration :none;
background: #eb8787;
box-shadow: 3px 3px #ffbe75;
transition: .3s;
}
.sample:hover {
box-shadow: 1px 1px #ffbe75;
}立体感を出してみた場合
insetを使って、内側にも影をつけたサンプルです。背景色に対して少し暗めの色の影にすることで立体感を表現しています。 サンプルを見る
<a class="sample" href="~">BUTTON</a>CSS
.sample {
display: inline-block;
padding:5px 10px;
color: #FFF;
text-decoration :none;
background: #87b9eb;
box-shadow: 0 2px 2px rgba(0,0,0,0.2), 0 -4px 5px -2px #6d95ce inset;
border-radius: 2px;
transition: .3s;
}
.sample:hover {
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}ふんわりとした影
ぼかしを大きくすることで、ふわっとさせています。最近のWebデザインのトレンドにもなっている（気がする）表現ですね。影に色をつけても良いでしょう。 サンプルを見る
<div class="sample">これは例です</div>CSS
写真が浮かんでるように
画像に影をつけて浮いているように見せるサンプルです。以下のようにコードをCSSに書いておけば、影をつけたい要素にshadowというクラス名を追加するだけで影がつけられるようになります。 サンプルを見る
<img class="shadow" src="~" />CSS
.shadow {
box-shadow: 5px 10px 20px rgba(0,0,0,0.25);
}ヘッダーで使えそうな影
最近だとマテリアルデザインなどで、ヘッダーに影をつけることもあるのではないかと思います。ヘッダーに影を控えめにつけたサンプルを1つ紹介しておきます。 サンプルを見る
<header> Header </header>CSS
header {
position: relative;/*fixedの場合もありますね*/
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
/*以下色とかの装飾*/
padding: 17px;
color: #FFF;
font-weight: bold;
background: #4293f5;
}