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

cssで要素に影をつける「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 の時、ぼかしのないくっきりとした影になります。
  • 影の広さ(省略可能)
    影の広さです。値を大きくすると影が全方向に大きくなります。マイナスの値を指定すると小さくなります。
  • 色(省略可能)
    影の色を指定します。
  • insetキーワード(省略可能)
    最後尾にinsetを指定すると、要素の内側に影が付くようになります。

このような値を使って影の形状を指定していきます。影を消したい場合は、box-shadow: none;を指定すればOKです。

また、影は複数指定することもできます。複数の影を指定する場合には、必要な数だけカンマ区切りで記述します。

box-shadow: 1つ目の影の指定, 2つ目の影の指定, 3つ目の影の指定;

それではいくつか影の実例を見ながら学んでいきましょう。

一番シンプルな影

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

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

はじめの2つだけ値を指定しています。2つだけ指定した場合は、横の距離と縦の距離をしていしたことになります。逆方向に動かしたい場合は、マイナスの値を指定すればOKです。

影をぼかす

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

3つ目の数値を指定することで、影にぼかしを加えることができます。

影の色を変える

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

色の名前や、色コードを指定することで影の色を指定することができます。

rgba()を使って色を指定すれば、透明度を指定することも可能です。

影の大きさを変える

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

影を内側にする

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

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

複数の影をつける

<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を使うことで要素に影をつけることができる
  • 現在使用されているブラウザは問題なく表示される
  • 横の位置と縦の位置以外は省略しても構和ない
  • 影を消したい場合は、box-shadow: none;を指定すればOK