【CSSのbox-shadowの使い方】ボックスに影をつける方法【サンプル有】

SHARE

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

画像に影（ドロップシャドウ）をつけたければPhotoshopなどの編集ソフトでもつけることはできますが、CSSだけでもつけることができます。

画像以外のdivなどにも影をつけることはできます。

今回は、CSSのbox-shadowプロパティの基本的な使い方をサンプルを交えて解説します。

それでは始めます。

目次 表示

目次へ

box-shadowって何？

まず、box-shadowとは何かというと、要素に影をつけることができるプロパティです。

似たようなプロパティ・CSS関数には、text-shadow、drop-shadow()があります。

box-shadowとは、

  • CSSのプロパティ
  • divなどの要素の周囲に影（ドロップシャドウ）をつける
  • カンマで区切ることで、複数の影（ドロップシャドウ）を設定することができる

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

次に、box-shadowプロパティの使い方について説明します。

以下はCSSでboxshadowという名前のclassに設定した例です。

  • ①水平方向につける影の値（必須）
  • ②垂直方向につける影の値（必須）
  • ③ぼかしの大きさ（省略可）
  • ④影の大きさ（省略可）
  • ⑤影の色（省略可）
  • ⑥影を内側につけるように変更（省略可）

それぞれの値について解説します。

①水平方向につける影の値（必須）

水平方向につける影の値というのは、右か左につける影の値のことです。

基本的には、正の数なら右側に影ができて、負（マイナス）の数値なら左側に影ができます。

では実際にコードを見てみます。

HTML
<div class="boxshadow">
</div>
CSS
.boxshadow {
  background-color: yellow;
  width: 300px;
  height: 200px;
  box-shadow: 5px 0;
}

boxshadowのclassがついているdivに影をつけています。

CSSをみてもらうと、box-shadowのプロパティがあります。

今回は水平方向につける影の値に5pxを設定しています。

その他は0もしくは値を設定していません。

上記コードでは、どんな画像になるかというと、以下の黄色の四角のようになります。右側に影がついています。

①水平方向につける影の値は必須となっているので、必ず設定しましょう。

0の値も設定することもできます。

②垂直方向につける影の値（必須）

垂直方向につける影の値というのは、下か上につける影の値のことです。

基本的には、正の数なら下側に影ができて、負（マイナス）の数値なら上側に影ができます。

では実際にコードを見てみます。

HTML
<div class="boxshadow">
</div>
CSS
.boxshadow {
  background-color: yellow;
  width: 300px;
  height: 200px;
  box-shadow: 0 5px;
}

今回は垂直方向につける影の値に5pxを設定しています。

その他は0もしくは値を設定していません。

上記コードでは、どんな画像になるかというと、以下の黄色の四角のようになります。下側に影がついています。

②垂直方向につける影の値も必須となっているので、必ず設定しましょう。

こちらも0の値も設定することもできます。

③ぼかしの大きさ（省略可）

ぼかしの大きさの値が大きいほどよりぼかしが大きくなります。

ぼかしが大きくなるということは、影が大きく明るくなるとことと同じ意味です。

また、負の値は指定できません。

では実際にコードを見てみます。

HTML
<div class="boxshadow">
</div>
CSS
.boxshadow {
  background-color: yellow;
  width: 300px;
  height: 200px;
  box-shadow: 5px 5px 10px;
}

今回はぼかしの大きさの値に10pxを設定しています。左から3番目の値です。

その他は水平方向と垂直方向に5pxを設定しています。

上記コードでは、どんな画像になるかというと、以下の黄色の四角のようになります。影がぼけています。

ぼかしの大きさも省略可となっているので、設定しなくても大丈夫です。

こちらも0の値も設定することもできます。

④影の大きさ（省略可）

正の値を設定すると影が大きくなります。

また、負の値を設定すると影は小さくなります。

では実際にコードを見てみます。

HTML
<div class="boxshadow">
</div>
CSS
.boxshadow {
  background-color: yellow;
  width: 300px;
  height: 200px;
  box-shadow: 5px 5px 0 5px;
}

今回は④影の大きさの値に5pxを設定しています。左から4番目の値です。

その他は水平方向と垂直方向に5pxを設定しています。

上記コードでは、どんな画像になるかというと、以下の黄色の四角のようになります。影が大きくなっています。

影の大きさを設定しない場合の画像と比較

参考までに影の大きさを設定しない場合の画像と比較してみます。

その他の値は先ほどと同じ値です。

CSS
.boxshadow {
  background-color: yellow;
  width: 300px;
  height: 200px;
  box-shadow: 5px 5px;
}

上記コードでは、どんな画像になるかというと、以下の黄色の四角のようになります。影が先ほどよりは小さくなっています。

影の大きさも省略可となっているので、設定しなくても大丈夫です。

こちらも0の値も設定することもできます。

①〜④の値は記載順で決定される

①〜④の値は記載順で決定されます。どういうことかというと、

box-shadow: 5px 5px 10px 5px;

例えば上記のコードでは右から①水平方向につける影の値②垂直方向につける影の値③ぼかしの大きさ④影の大きさとなっています。

①②については必須です。左から①が1番目、②が2番目となっています。両方とも0の値を設定することができます。

③④については、省略できますが、④を設定したければ、③の値を設定することが必須になります。0の値を設定しても大丈夫ですが、この場合、③を省略はできないということです。

box-shadowを設定する際には、記載順と、省略できるかを確認してから記載することをおすすめします。

⑤影の色（省略可）

影の色を指定します。

指定できるのは、RGB 16 進値 の他、rgbaの値なども設定できます。

RGB 16 進値 
#f09
#ff0099

RGBA
rgba(0, 0, 0, 0.3);

では実際にコードを見てみます。

HTML
<div class="boxshadow">
</div>
CSS
.boxshadow {
  background-color: yellow;
  width: 300px;
  height: 200px;
  box-shadow: 5px 5px #cccccc;
}

注目してほしいのは、左から3番目の値です。

今回は#ccccccの色を設定しました。

上記コードでは、どんな画像になるかというと、以下の黄色の四角のようになります。影の色が#ccccccになっています。

影の色を指定しなかったら

影の色を指定しなかったら、親要素で定義された colorプロパティの値が適用されます。

ですので、任意の色を指定したい場合は影の色を設定しましょう。

⑥影を内側につけるように変更（省略可）

影を内側につける設定に変更するには、insetと記述します。

では実際にコードを見てみます。

HTML
<div class="boxshadow">
</div>
CSS
.boxshadow {
  background-color: yellow;
  width: 300px;
  height: 200px;
  box-shadow: 5px 5px inset;
}

今回は⑥影を内側につけるように変更（inset）を設定しています。左から3番目の値です。

その他は水平方向と垂直方向に5pxを設定しています。

上記コードでは、どんな画像になるかというと、以下の黄色の四角のようになります。影が内側（右側と下側）についています。

⑥影を内側につけるように変更（inset）も省略可となっているので、設定しなくても大丈夫です。

insetの記述位置

insetの記述位置については、先頭でも3番目、末尾など、どこに書いても大丈夫ですが、自分がわかりやすい位置に書くことをおすすめします。

insetの影の方向を変更したければ

ちなみにinsetの影の方向を変更したければ、①水平方向につける影の値（必須）や②垂直方向につける影の値（必須）を負の値にすれば変更できます。

では実際にコードを見てみます。

HTML
<div class="boxshadow">
</div>
CSS
.boxshadow {
  background-color: yellow;
  width: 300px;
  height: 200px;
  box-shadow: -5px -5px 10px inset;
}

注目してほしいのは、左から1番目と2番目の値です。

また、わかりやすいように3番目の値でぼかしを入れています。

上記コードでは、どんな画像になるかというと、以下の黄色の四角のようになります。影が内側（左側と上側）についています。

insetを設定していないものとどう違うのと思われるかもしれません。

イメージとしては境界線の内側に影がついていると思っていただいていいかと思います。

ですので、負の値であれば、境界線を視点にして左側と上側でかつ内側に影がついています。

カンマ区切りにすると複数の影を設定できる

また、カンマ区切りにすると複数の影を設定できます。

では実際にコードを見てみます。

HTML
<div class="boxshadow">
</div>
CSS
.boxshadow {
  background-color: yellow;
  width: 300px;
  height: 200px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.08);
}

0 2px 4px rgba(0, 0, 0, 0.12)の値の後に、カンマがついています。

そのあとに、もうひとつの影の0 8px 16px rgba(0, 0, 0, 0.08);が設定されています。

上記コードでは、どんな画像になるかというと、以下の黄色の四角のようになります。影の設定が2つ設定されています。

複数の影のコードの記載順

複数の影を設定する際にCSSを書く記載順はどうなっているか気になっている方もいるかとい思います。

コードを記載した順番で重なって表示されます。Photoshopのレイヤーのようなイメージです。

最初に指定された影が一番上に表示されます。

試しに、先ほどのコードの記載順を逆にしてみましょう。

上記コードは0 2px 4px rgba(0, 0, 0, 0.12)の値の後に、0 8px 16px rgba(0, 0, 0, 0.08);が設定されていますが、逆にしたらどうなるかというと、見た目は私の目には変わらないように感じます。

でもコード上はレイヤーの上下が入れ替わっています。

コピペで使えるCSS box-shadowを使ったボタンサンプル

コピペで使えるCSS box-shadowを使ったボタンサンプルを作成しましたので、ぜひコピペや改変して使用してみてください。

ホバーしたときの動きは、実際にコードを書いて確認ください。

サンプル1：シンプルなドロップシャドウボタン

シンプルな影が浮き上がるデザインです。ホバー時に影が強調されるアニメーションも追加しています。

HTML
  <a href="#" class="btn-simple">シンプルなボタン</a>
CSS
    .btn-simple {
      display: inline-block;
      padding: 10px 20px;
      background-color: #3498db;
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: box-shadow 0.3s ease;
    }
    .btn-simple:hover {
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    }

サンプル2：内側シャドウを使ったボタン

内側に影を付けることで、凹んだようなデザインです。

HTML
  <a href="#" class="btn-inset">内側シャドウボタン</a>
CSS
    .btn-inset {
      display: inline-block;
      padding: 12px 24px;
      background-color: #e74c3c;
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
      transition: background-color 0.3s ease;
    }
    .btn-inset:hover {
      background-color: #c0392b;
    }

サンプル3：複数の影で立体感のあるボタン

複数のbox-shadowを組み合わせて、立体的なイメージのボタンです。

ホバー時に浮き上がる動きを加えています。

HTML
  <a href="#" class="btn-multi">複数影ボタン</a>
CSS
.btn-multi {
      display: inline-block;
      padding: 14px 28px;
      background-color: #2ecc71;
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      border: none;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .btn-multi:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.15);
    }

参考サイト

https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

まとめ

最後にまとめです。

基本的な使い方は、まずは以下の画像を見てみてください。

  • ①水平方向につける影の値（必須）
  • ②垂直方向につける影の値（必須）
  • ③ぼかしの大きさ（省略可）
  • ④影の大きさ（省略可）
  • ⑤影の色（省略可）
  • ⑥影を内側につけるように変更（省略可）

それでは皆さんもよいコーディングライフを〜ノシ

前の記事

WordPressでコメントができないとき

次の記事

VS Code自作スニペットの使い方【コーディングの効率化にお…