【CSS】影を動かすbox-shadowの使い方を徹底解説

Webエンジニアやデザイナーが愛用している「box-shadow(ボックスシャドウ)」

『ボックスや画像に影をつけたいけれど、影を作るコードが分からない』

このような方に向けて、本記事ではbox-shadowの使い方や実用例を詳しく解説しています。

また、box-shadowのよくある悩みにも回答しているので、理解を深めたい方はそちらもご覧ください。

box-shadowとは

box-shadowとは、CSSプロパティの1つで、指定した要素の周りに「影」を追加することができます。

XYのオフセット・ぼかし・拡散の半径・色・インセットなど合計5つの値を操作することができます。

■具体例

box-shadow: -12px -12px 2px 1px whitesmoke inset;

画像

このように、様々な値を操作して自由に影をつけることができます。

ちなみに、box-shadowプロパティはXYのオフセットが記述必須項目で、他は必須ではありません。e

  • XYのオフセット:必須
  • ぼかし:省略可
  • 拡散の半径:省略可
  • 色:省略可
  • インセット:省略可

box-shadowの使い方

ここからは、先ほど解説した5つの値について解説していきます。

  1. オフセット
  2. ブラー半径
  3. スプレッド半径
  4. box-shadowの影色(rgba)
  5. inset

1つ1つ理解すると、影デザインの幅が広がります。

この機会に、1つずつ細かく理解してみてください。

box-shadowのオフセット

box-shadowの使い方1つ目は「オフセット」です。

専門的にはXY軸の位置と表現されますが、簡単に表現すると左右・上下の位置のことをいいます。

  • 1番目の値:左右
    →正の値だと右、負の値だと左
  • 2番目の値:上下
    →正の値だと下、負の値だと右

実際に、コードを入力して試してみましょう。

background: whitesmoke;
box-shadow: 5px 5px;

画像

background: whitesmoke;
box-shadow: -5px 5px;

画像

background: whitesmoke;
box-shadow: 5px -5px;

画像

background: whitesmoke;
box-shadow: -5px -5px;

画像

このようにオフセットを操作することで、左右上下の影位置を操作することができます。

基本的には、右下に影を作ります。(右下の影はどちらの値も正です)

box-shadowのブラー半径

box-shadowの使い方2つ目は「ブラー半径」です。

ブラーとは、ぼかしを意味しています。

つまり、ブラー半径の値を操作することで、影にぼかしを入れることができるのです。

値はpxを使い、値が大きいほどぼかし度合いも強くなります。

background: whitesmoke;
box-shadow: 5px 5px -5px;

画像

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

画像

background: whitesmoke;
box-shadow: 5px 5px 20px;

画像

注意点:先ほどのオフセットとは違い負の値を取ることはできません。

background: whitesmoke;
box-shadow: 5px 5px -5px;

画像

このように、ブラー半径に負の値を入れてしまうと影デザインが消滅してしまいます。

box-shadowのスプレッド半径

box-shadowの使い方3つ目は「スプレッド半径」です。

スプレッド半径の値を操作すると、影の広がりを操作することができます。

言葉で解説するのは難しいので、実際のコードと結果を見て学習していきましょう。

background: whitesmoke;
box-shadow: 5px 5px 5px 3px;

画像

このように、正の値を入力すると影が大きく広がります。

逆に、負の値を入れると影の広がりを抑えることができます。

background: whitesmoke;
box-shadow: 5px 5px 5px -3px;

画像

実際の現場では、スプレッド半径は左右上下の影が大きい場合に使われます。

background: whitesmoke;
box-shadow: 15px 15px 15px -1px;

画像

background: whitesmoke;
box-shadow: 15px 15px 15px -10px;

画像

また、スプレッド半径は左右上下の値よりも大きな値を取ることはできません。

左右上下の値より大きな値を入力すると、影デザインが反映されなくなります。

background: whitesmoke;
box-shadow: 15px 15px 15px -30px;

画像

box-shadowの影色(rgba)

box-shadowの使い方4つ目は「影色(rgba)」です。

簡単に言うと、影色です。

値指定の方法は「色名」だけでなく、色コードも使うことができます。

background: whitesmoke;
box-shadow: 15px 15px 15px -10px blue inset;

画像

background: whitesmoke;
box-shadow: 15px 15px 15px -10px #4169e1;

画像

background: whitesmoke;
box-shadow: 15px 15px 15px -10px rgba(0, 0, 255, 0.5);

画像

このように好きなカラーを指定することができます。

box-shadowのinset

box-shadowの使い方5つ目は「inset」です。

insetを指定すると、影をボックスの内側に入れることができます。

言葉ではわかりづらいので、実際にコードを入力して理解を深めていきましょう。

background: whitesmoke;
box-shadow: 15px 15px 15px -10px blue inset;

画像

このように、insetを指定すると、ボックス内に影を入れることができます。

insetを活用する際は、左右上下の値をマイナスにするのが一般的です。

background: whitesmoke;
box-shadow: -15px -15px 15px -10px blue inset;

画像

insetは、そこまで多く使うことはありませんが、デザインにこだわりがある場合に使用することがあります。

必須ではありませんが、覚えておいて損のないデザインスキルです。

box-shadowの実用例

box-shadowの基本的な知識をマスターした後は、実用例を見ていきましょう。

demo1画像

demo1は最もポピュラーな影の実用例です。

初心者の場合は、「XYのオフセット」と「背景色」の値をカスタマイズすることをおすすめします。

コードの例

<a class="demo1" href="~">ボタン</a>

.demo1 {
  display: inline-block;
  padding:7px 14px;
  color: #FFF;
  text-decoration :none;
  background: black;
  box-shadow: 5px 5px whitesmoke;
}

demo2画像

画像をカスタマイズする際は、画像を際立たせるために影の色に「ぼかし」を入れましょう。

ぼかしを入れることで、画像に立体感が出るだけでなく、画像自体に目を誘導するWebデザインを作ることができます。

コードの例

<img class="demo2" src="~" />

.shadow {
  box-shadow: 7px 14px 20px whitesmoke;
}

demo3ヘッダー

ヘッダーをカスタマイズする際は、左右の影は不要です。

また、ヘッダーの影の画像同様にぼかしを入れると見栄えが良くなります。

コードの例

<header>
 Header
</header> 

header {
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
color:white;
font-weight:bold;
background:#4169e1;
}

box-shadowに関するよくある質問

最後に、box-shadowに関するよくある質問を解凍していきます。

質問内容

  1. box-shadowジェネレーターは何がおすすめ?
  2. box-shadowのinsetが効かない場合の対処法は?

box-shadowジェネレーターは何がおすすめ?

ジェネレーターとは、与えられた条件などに基づいてデータやプログラムコードを自動的に生成するプログラムのことを言います。

弊社では、下記のbox-shadowジェネレーターをおすすめしています。

  1. WEB GENERATOR
  2. box-shadowジェネレーター
  3. CSSボックスシャドウジェネレーター

デザインを参考にしたい場合は「Beautiful CSS box-shadow examples」や「Front-end-Tools」をおすすめします。

box-shadowのinsetが効かない場合の対処法は?

結論から言うと、『position:relative;』を追加するだけで対応可能です。

box-shadowは隣接する要素にbackground-color(imageも同様)が設定されていると、背景の下に隠れてしまう特性を持っています。

そのため、背景の上に表示させるためのコード『position:relative;』を入力すれば表示されるようになるのです。

上記のコードを入力しても改善しない場合は、box-shadowプロパティを設定している親要素に指定してある『overflow: hidden; 』をチェックしてみてください。

『overflow:hidden; 』はボックスに収まらない物を隠す処理が実行されるため、box-shadowとの相性が良くありません。

そのため、box-shadowの不具合がある場合は、『overflow:hidden』を確認してみてください。

まとめ

ここまでで「【CSS】影を動かすbox-shadowの使い方を徹底解説」の解説は以上です。

最後に、用語と意味の確認だけしておきましょう。

  1. オフセット:左右上下の値
  2. ブラー半径:ぼかしの値
  3. スプレッド半径:影の広がりの設定する値
  4. box-shadowの影色(rgba):影色の値
  5. inset:影をボックス内に入れる値

最後までご覧くださりありがとうございました。