cssで要素に影をつける「box-shadow」の使い方解説

この記事では要素に影をつける方法について、サンプルを交えてわかりやすく解説していきます。

こんなぼくが解説します

CSSで影をつける方法はいくつか用意されていて、代表的なものは以下の3種類です。

box-shadow

最も基本的な影をつけるプロパティ

drop-shadow

透過した画像に合わせて影をつけられるプロパティ(※IE非対応)

text-shadow

文字に影をつけるプロパティ

本記事では初心者向けとして、最も基本的なbox-shadowについて解説していきます。

すでにbox-shadowをマスターしていて、文字に影をつけたい場合はtext-shadowを、透過画像に合わせて影をつけたい場合はdrop-shadowを参照してください。

box-shadowとは

box-shadowとは要素に影をつけるプロパティです。

要素に影をつけることで浮き上がって見えるため、目立たせたり、ボタンのように押せることをユーザーに伝えたりすることができます。例えばこんな感じです。

<a href="" id="demo_214">押せそうなボタン</a>

 #demo_214{
   display: inline-block;
   background-color: tomato;
   padding: 10px 20px;
   color: #fff;
   text-decoration:none;
   box-shadow: 2px 2px 4px gray;
 }

いかにも押せそうなボタンですね。このようにbox-shadowを使えば簡単に影をつけることができます。

対応ブラウザ

can i useによると、現在使用されているブラウザは問題なく表示されます。

IE8以下は表示されませんが、すでにほとんどの人がIE11にアップデートしているので無視して良いレベルでしょう。

参考：can i use

box-shadow の使い方

box-shadowは下記のようにして使います。

box-shadow: 横の距離 縦の距離 影のぼかし 影の広さ 色 (inset);

たくさん値を指定していますが、横の位置と縦の位置以外は省略しても構いません。一つずつ解説して言います。

シンプルな影

最低限の指定だけを使ってシンプルな影を作ってみましょう。

<div id="demo_215"></div>

 #demo_215{
   /*   影の指定 */
   box-shadow: 5px 5px;
   /*   以下装飾 */
   width: 200px;
   height: 100px;
   background-color: tomato;
 }

2つだけ値を指定したシンプルな影です。2つだけ指定した場合は、横の距離と縦の距離を指定したことになります。

左上を頂点として、右に5px、下に5pxの位置に影が出現します。

影をぼかす

3つ目の数値を指定することで、影にぼかしを加えることができます。ぼかしの値は大きくなればなるほど、影のぼかしも大きくなります。

<div id="demo_216"></div>

#demo_216{
   /*   影の指定 */
   box-shadow: 5px 5px 3px;
   /*   以下装飾 */
   width: 200px;
   height: 100px;
   background-color: tomato;
 }

影の色を変える

カラーネームや、カラーコードを指定することで影の色を指定することができます。また、rgba()を使って色を指定すれば、透明度を指定することも可能です。

<div id="demo_217"></div>

 #demo_217{
   /*   影の指定 */
   box-shadow: 5px 5px 3px gray;
   /*   以下装飾 */
   width: 200px;
   height: 100px;
   background-color: tomato;
 }

カラーネームやカラーコード、rgba()に関しては下記記事で解説しているので参考にしてみてください。

参考記事

【css】透明度を表すrgbaとopacityの違いや使い方を解説

この記事ではCSSで透明度を指定できる「rgba」について解説していきます。 透明度が指定できるプロパティ には「opacity」がありますが、どのように使いわければ良いかについてもわかりやすく解説します。 この記事の結 ...

影の大きさを変える

4つめの数値を指定することで影の広さを変更できます。

値を大きくすると影が全方向に大きくなります。マイナスの値を指定すると小さくなります。値が指定されていない場合は0となり、影は要素と同じ大きさになります。

<div id="demo_218"></div>

#demo_218{
   /*   影の指定 */
   box-shadow: 5px 5px 3px 10px gray;
   /*   以下装飾 */
   width: 200px;
   height: 100px;
   background-color: tomato;
 }

影を内側にする

insetをつけると、要素の内側に影がつきます。

<div id="demo_219"></div>

 #demo_219{
   /*   影の指定 */
   box-shadow: -5px -5px 3px 1px gray inset;
   /*   以下装飾 */
   width: 200px;
   height: 100px;
   background-color: tomato;
 }

複数の影をつける

カンマで区切ることで複数の影を指定することができます。

<div id="demo_220"></div>

 #demo_220{
   /*   影の指定 */
   box-shadow: 5px 5px 3px 1px gray, -5px -5px 3px 1px black;
   /*   以下装飾 */
   width: 200px;
   height: 100px;
   background-color: tomato;
 }

ジェネレーターを使おう

box-shadowは設定項目が多いので、ジェネレーターなどを使って簡単に作りましょう。

例えばジェネレーターには下記のようなものがあります。

bad-company

まとめ

• box-shadowを使うことで要素に影をつけることができる
• 現在使用されているブラウザは問題なく表示される
• 横の位置と縦の位置以外は省略可能

関連記事

【css】透明度を表すrgbaとopacityの違いや使い方を解説