今回はCSSをなんとなくやったことあるよ！という方、
box-shadowのオプションってどれがなんだっけとなりがちな方向けに
box-shadowについて解説します。

box-shadowとは？

ブロック要素に影をつけるCSSプロパティです。
立体的なボタンを作りたいという場合に使用することが多いです。

「画像」

box-shadowプロパティの使い方

box-shadowは

box-shadow:左右の距離　上下の距離　ぼかし　拡散　色;

と数値を４つと色を指定します。

例としてdiv要素にbox-shadowを適用します。

html

<div>これはブロック要素です。</div>

box-shadow: 10px 10px 10px 0px #5bc0de;

↑の例ですと、わかりにくいので、横幅（width）と背景色(background-color)をつけてみます。

css

width:250px;
background-color:#eeeeee;
box-shadow: 10px 10px 10px 0px #5bc0de;

と、簡単に影をつけることができます。

box-shadowの数値をいじって検証してみる

それぞれ指定できる数値を使って遊んでみます。

左右方向の場合

１番目数値は左右方向です。
他の数値を0にして、1番目だけ数値を入れてみます。

width:250px;
background-color:#eeeeee;
box-shadow: 20px 0px 0px 0px #5bc0de;

右方向に指定した長さ分ずれます。
数値はマイナス指定もでき、左側にずれていきます。

上下方向の場合

2番目数値は上下方向です。
他の数値を0にして、2番目だけ数値を入れてみます。

width:250px;
background-color:#eeeeee;
box-shadow: 0px 20px 0px 0px #5bc0de;

ぼかしについて

3番目数値はどのくらいぼかすかで、
0以上の数字を指定する必要があります。
今回は1～3番目まで20pxを指定してみます。

width:250px;
background-color:#eeeeee;
box-shadow: 20px 20px 20px 0px #5bc0de;

拡散について

4番目の数値は影をどの程度広げるかを指定することができます。
注意点としては、上下左右に広がりますので、影が上からはみ出してしまうなんてことがありますので、
しっかり確認しましょう。
3番目のぼかしを0にして、4番目の拡散を20px指定してみます。

width:250px;
background-color:#eeeeee;
box-shadow: 10px 10px 0px 10px #5bc0de;

何度も繰り返してみる

繰り返し使って影を複数つけることもできます。
わかりやすいように色を変えて検証。

width:250px;
background-color:#eeeeee;
box-shadow: 10px 10px 0px 0px #5bc0de,
10px 10px 0px 0px #5bc0de,
10px 10px 0px 0px #5bc0de;

box-shadowを使って簡単に図形を書いてみる

簡単に入れ込むことができるbox-shadowを使用したテクニックを紹介します。

html

<span class="square"></span>

css

.square{
display: block;
width: 15px;
height: 15px;
background-color: #0098a6;
box-shadow: #fff 3px 3px,
#0098a6 3px 3px 0 0.5px
}

すると↓のように簡単にコーポレート系のサイトで入れこむことができる図形を描くことができます。

あとは入れ込みたいところへ、positionやpadding等で調整すれば応用が利きますので是非使ってみてください。

終わりに

box-shadowについて一つ一つ検証しながら進めてみました。
少しでもご参考にしていただけますと幸いです。

プロのデザイナーからテクニックを学びたいという方、まずは無料のカウンセリングでご相談ください。
もっと高度な技を学ぶこともできますよ！

<p align=”center”><a class=”btn-orange btn-3d” href=”https://akros-ac.jp/course/”>無料カウンセリングで相談する</a></p>