1. TOP
  2. html&CSS入門
  3. cssで要素に影をつける「box-shadow」の使い方解説

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にアップデートしているので無視して良いレベルでしょう。

Image

参考:can i use

box-shadow の使い方

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

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

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

①横の距離
横の距離です。プラスの値を指定すると右へ、マイナスの値を指定すると左へ影が移動します
②縦の距離
縦の距離です。プラスの値を指定すると下へ、マイナスの値を指定すると上へ影が移動します。
③影のぼかし(省略可能)
影のぼかしです。値が大きいほど影のぼかしが強くなります。値が0 の時、ぼかしのないくっきりとした影になります。値が指定されていない場合は0となります。
④影の広さ(省略可能)
影の広さです。値を大きくすると影が全方向に大きくなります。マイナスの値を指定すると小さくなります。値が指定されていない場合は0となり、影は要素と同じ大きさになります。
⑤色(省略可能)
影の色を指定します。値が指定されていない場合はその要素の文字の色と同じになります。
⑥insetキーワード(省略可能)
最後尾に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()に関しては下記記事で解説しているので参考にしてみてください。

影の大きさを変える

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

関連記事

さらに見る