マテリアルデザインで欠かせないものが「影」。
影を操るものはマテリアルデザインを制します。ということで、CSSで影を表現するbox-shadowについて、使い方のおさらいをしておきましょう。
はにわまん影があると少しリッチな雰囲気になることが多いです！
基本的な使い方
box-shadowは、6つの値を指定できます。
基本的な設定イメージは以下のとおり。
.box-shadow {
box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.4) inset;
}<div class="box-shadow"></div>右から順番に言葉で表すと、
| 指定場所 / 説明 |
|---|
box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.4) inset;水平方向の影の距離。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。 |
box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.4) inset;垂直方向の影の距離。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。 |
box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.4) inset;ぼかし距離。値が大きいほど影がぼやけます。（負の値は指定できません） |
box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.4) inset;広がりの距離。正の値を指定すると影の形状を「全方向」に拡大、負の値を指定すると縮小します。 |
box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.4) inset;影の色。rgbaで指定されることが多いです。 |
box-shadow: 1px 1px 3px 2px rgba(0,0,0,0.4) inset;指定すると影が内側に表示される（内側に表示させたい時だけ書く。基本は省略） |
注意点
box-shadowを使う上での注意点をまとめておきます。
余白を作っておくこと
box-shadowはブロック要素の外側に存在します。したがって、余白がない場合は、影が見えなくなります。
影を指定していますが、影が消えているのが分かります。
<div class="box-shadow-wrapper">
<div class="box-shadow-space"></div>
</div>.box-shadow-wrapper {
width: 100px;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
overflow: hidden;
}
.box-shadow-space {
width: 100px;
height: 100px;
box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.4);
}内側のボックスを小さくして余白を確保してみます。
<div class="box-shadow-wrapper">
<div class="box-shadow-space"></div>
</div>.box-shadow-wrapper {
width: 100px;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
overflow: hidden;
}
.box-shadow-space-min {
width: 90px;
height: 90px;
box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.4);
}透過画像に使うとおかしくなる
pngやsvgなどの画像の背景に透過処理を施している要素に対しては、box-shadowでは意図した影にならない可能性があります。
box-shadowではなく、filter: drop-shadow()を使うといいでしょう。
透過画像にbox-shadowを適応した場合
画像の外側に影が落ちます。
<div class="box-shadow-png"><img src="hoge.png"></div>.box-shadow-png img {
box-shadow: 5px 5px 3px 0 rgba(0,0,0,0.4);
}透過画像にdrop-shadowを適応した場合
画像の外側ではなく、透過以外のオブジェクトに影が落ちます。
<div class="drop-shadow-png"><img src="hoge.png"></div>.drop-shadow-png img {
filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.4));
}影の実用例
box-shadowの実用的に使われる例を紹介していきます。
ベーシックな影
下、右に影を落とす、box-shadowのもっとも基本となる影の作り方です。
<div class="box-shadow-base"></div>.box-shadow-base {
width: 100px;
height: 100px;
box-shadow: 5px 5px 3px 0 rgba(0,0,0,0.4);
margin: 0 auto;
}上下左右にぼかす影
垂直方向と、水平方向の値を0にします。「ぼかしの大きさ」と、全方向への「ぼかしの距離」を指定することで、ボックスの周りに「ぼやけた」影を落とすことができます。
<div class="box-shadow-blur"></div>.box-shadow-blur {
width: 100px;
height: 100px;
box-shadow: 0 0 3px 2px rgba(0,0,0,0.4);
margin: 0 auto;
}影の大きさを小さくする
box-shadowの4つ目の値の指定で影の大きさを指定できます。全方位の距離に適応される値ですので、影の面積を決める際に使用しましょう。
値をマイナスにすると小さくなり、プラスにすると大きくなります。
<div class="box-shadow-size"></div>.box-shadow-size {
width: 100px;
height: 100px;
box-shadow: 20px 20px 3px -10px rgba(0,0,0,0.4);
margin: 0 auto;
}第二の「border」として使う
ちょっと変わった使い方。box-shadowはクッキリとした線も表現できます。従って、borderの上にborderを重ねる（実際にはbox-shadowですが、）といった使い方もできます。
ポイントは1から3番目までの値は0にして、4番目の値だけを指定することです。
<div class="box-shadow-border"></div>.box-shadow-border {
width: 100px;
height: 100px;
border: 8px solid rgba(0,0,0,0.2);
box-shadow: 0 0 0 8px rgba(0,0,0,0.4);
margin: 0 auto;
}舞空術
作ってみたかったので、ちょっとネタ的な。。
※ box-shadowとは関係ありません。
空中に浮かび上がってる的な影を作ってみます。
<div class="box-shadow-float"></div>.box-shadow-float {
width: 100px;
height: 100px;
border: 1px solid rgba(0,0,0,0.3);
margin: 0 auto 50px;
position: relative;
}
.box-shadow-float::after {
width: 90px;
height: 30px;
content: '';
background: rgba(0,0,0,0.4);
position: absolute;
border-radius: 90px / 30px;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
}おわり
box-shadowについて紹介しました。
目立たせすぎる必要はありませんが、さりげなく影をつけてあげることで飛躍的に視認性が上がったりします。今回紹介した実例を使いつつ、少しでも見やすいサイトを考えてみてください！
