CSS | box-shadow | ボックスの影

box-shadowはボックスの影を指定するためのCSSプロパティです。

ボックスの影にはbox-shadow、文字の影にはtext-shadowを使います。

影を付けるCSSプロパティ
CSSプロパティ	対象
`box-shadow`	ボックス
`text-shadow`	文字

概要

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

実行結果初期状態

sample

.sampleクラスにbox-shadow: 0 0 7px red;と指定します。赤い影ができます。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 0 7px red;
}

実行結果0 0 7px red;

sample

redの設定をgreenと#359に変更してみます。影の色が変わります。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 0 7px green;
}

実行結果green

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 0 7px #359;
}

実行結果#359

sample

3番目の設定(7px)を3pxと15pxに変更してみます。影の広がり幅が変わります。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 0 3px red;
}

実行結果3px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 0 15px red;
}

実行結果15px

sample

1番目の設定(0)を-10px、-5px、5px、15pxに変更してみます。影が左右に移動します。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: -10px 0 7px red;
}

実行結果-10px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: -5px 0 7px red;
}

実行結果-5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 0 7px red;
}

実行結果5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 15px 0 7px red;
}

実行結果15px

sample

2番目の設定(0)を-10px、-5px、5px、15pxに変更してみます。影が上下に移動します。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 -10px 7px red;
}

実行結果-10px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 -5px 7px red;
}

実行結果-5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 5px 7px red;
}

実行結果5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 15px 7px red;
}

実行結果15px

sample

1番目の設定(0)と2番目の設定(0)を変えることで、影が斜めになります。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 5px 7px red;
}

実行結果5px 5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: -5px 5px 7px red;
}

実行結果-5px 5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: -5px -5px 7px red;
}

実行結果-5px -5px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px -5px 7px red;
}

実行結果5px -5px

sample

box-shadowにinsetを加えると、内側に影ができます。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 0 7px red inset;
}

実行結果inset

sample

斜めの影の場合もinsetで内側になります。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 5px 7px red;
}

実行結果外側(insetなし)

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 5px 7px red inset;
}

実行結果内側(insetあり)

sample

解説

box-shadowには4つ(+1)の値を指定する必要があります。

`box-shadow`の設定値
順番	内容	設定値	正の値	負の値
1	左右方向の位置	数値`px`	右に影	左に影
2	上下方向の位置	数値`px`	下に影	上に影
3	影の幅	数値`px`	幅	-
4	影の色	カラーコード	-	-
5	(オプション) 内側	`inset`	-	-

1番目の値は左右方向の影の位置です。正の値を指定すると右に影ができます。負の値を指定すると左に影ができます。

2番目の値は上下方向の影の位置です。正の値を指定すると下に影ができます。負の値を指定すると上に影ができます。

3番目の値は影の幅です。負の値は指定できません。

4番目の値は影の色です。カラーコードで指定します。

内側に影を表示するには末尾(5番目)にinsetを追加します。 ※ 先頭(1番目)としても設定できますが、ややこしいので止めた方がよいでしょう。

設定手順

まず0 0 5px redなどから始めると書きやすいでしょう。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 0 5px red;
}

実行結果初期状態

sample

好きな色に変えます。(第4設定値)

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 0 5px blue;
}

実行結果色を変える

sample

幅を変えます。(第3設定値)

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 0 0 15px blue;
}

実行結果幅を変える

sample

左右を変えます。(第1設定値)

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 0 15px blue;
}

実行結果左右を変える

sample

上下を変えます。(第2設定値)

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 8px 15px blue;
}

実行結果上下を変える

sample

内側にするならinsetを加えます。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 8px 15px blue inset;
}

実行結果内側にする

sample

影の重ね合わせ

カンマ(,)で繋(つな)ぐと、複数の影を重ね合わせることもできます。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 5px 7px red;
}

実行結果影は1つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 5px 7px red,
                -5px 5px 7px orange;
}

実行結果影は2つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 5px 7px red,
                -5px 5px 7px orange,
                -5px -5px 7px yellow;
}

実行結果影は3つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 5px 7px red,
                -5px 5px 7px orange,
                -5px -5px 7px yellow,
                5px -5px 7px green;
}

実行結果影は4つ

sample

なお、重ねる順番によって表示結果が変わることに注意してください。先に設定した影が上に表示されます。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: 5px 5px 7px red,
                -5px 5px 7px green;
}

実行結果redが先

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   10px;         /* 内側の余白 */
}

CSS


.sample {
    box-shadow: -5px 5px 7px green,
                5px 5px 7px red;

}

実行結果greenが先

sample