【CSS】 box-shadowの使い方、下だけ、上だけ、内側など色々な影のつけ方、ジェネレーターなども解説｜HTML＆CSS入門講座（24）

はじめに

　HTML＆CSS入門講座の第二十四弾として、【CSS】box-shadowの使い方について紹介します。

　この記事を読むと次の疑問について知ることができます。

box-shadowとは？

　調べ物をしていて、あるページの画像が浮き出ているような綺麗な画像の影をうまく使っているサイトを見かけます。

　このような画像などの要素に影を付ける最も基本的なcssの技法がbox-shadowと言うプロパティになります。

　box-shadowの書き方は、次のようになります。

box-shadowの使い方

　それでは、ここでは四角のピンク色ボックス(100×100px）を作り、この四角のボックスに上述のパラメータを指定してどのようになるかを見ていきます。

x－オフセット、y－オフセット、影の色、ブラー半径、スプレッド半径による影の違い

　ボックスを横並びにするために「display：flex」を利用し、ボックスとの隙間をとるために20pxのmarginを設定しています。

　5つ影は次のように設定しました。

　どのような変化がみられるか。Resultタブの結果により影の変化を見てくださいね。

ブラー半径（ほかしの程度）を細かく変化したときの影の違い

　ブラー半径を2px、6px、10px、15px、20pxと変化させた際にどのように影に変化を与えるかを見てみましょう。

　5つ影は次のように設定しました。

スプレッド半径（ほかしの範囲）を細かく変化したときの影の違い

　x－オフセット、y－オフセット、ブラー半径はすべて0pxに設定して、スプレッド半径を2px、6px、10px、15px、20pxと変化させた際にどのように影に変化を与えるかを見てみましょう。

　5つ影は次のように設定しました。

box-shadow: 10px 10px 10px 2px;　⇐　ぼかしの広がりを2pxにした黒の影
box-shadow: 10px 10px 10px 6px;　⇐　ぼかしの広がりを6pxにした黒の影
box-shadow: 10px 10px 10px 10px;　⇐　ぼかしの広がりを10pxにした黒の影
box-shadow: 10px 10px 10px 15px;　⇐　ぼかしの広がりを15pxにした黒の影
box-shadow: 10px 10px 10px 20px;　⇐　ぼかしの広がりを20pxにした黒の影

　どのような変化がみられるか。Resultタブの結果により影の変化を見てくださいね。

内側へ(inset）影を付け影色を変化

　x－オフセットは0、y－オフセットは0、ブラー半径、スプレッド半径はともに10pxとし、影色を黒、赤、青と変化させた際にどのように影に変化を与えるかを見てみましょう。

　5つ影は次のように設定しました。

box-shadow: inset 0px 0px;　⇐　影がなし
box-shadow: inset 0px 0px 10px;　⇐　ぼかし10pxとした内側への黒の影
box-shadow: inset 0px 0px 10px 10px;　⇐　ぼかし10px、広がりを10pxにした内側への黒の影
box-shadow: inset 0px 0px 10px 10px red;　⇐　ぼかし10px、広がりを10pxにした内側への赤の影
box-shadow: inset 0px 0px 10px 10px blue;　⇐　ぼかし10px、広がりを10pxにした内側への青の影

　どのような変化がみられるか。Resultタブの結果により影の変化を見てくださいね。

グラデーション風の影

　box-shadowをぼかしの部分を少しずらして、多色の影を作ってやると、グラデーション風に見えます。

　5つ影は次のように設定しました。

box-shadow: 5px 5px 5px 2px rgba(5, 81, 221, 0.7), 5px 5px 5px 5px rgba(0, 213, 83, 0.7);　⇐　2色の影を重ねる
box-shadow: 5px 5px 5px 2px rgba(194, 226, 11, 0.7), 5px 5px 5px 5px rgba(235, 43, 9, 0.7);　⇐　前とは違う2色の影を重ねる
box-shadow: 5px 5px 5px 2px rgba(221, 5, 167, 0.7), 5px 5px 5px 5px rgba(127, 187, 142, 0.7), 5px 5px 5px 7px rgba(215, 230, 10, 0.7);　⇐　3色の影を重ねる
box-shadow: 5px 5px 5px 2px rgba(221, 5, 167, 0.7), 5px 5px 5px 5px rgba(102, 22, 230, 0.7), 5px 5px 5px 7px rgba(57, 219, 16, 0.7);　⇐　前とは違う3色の影を重ねる
box-shadow: 5px 5px 5px 2px rgba(221, 5, 167, 0.7), 5px 5px 5px 5px rgba(183, 221, 13, 0.7), 5px 5px 5px 7px rgba(215, 230, 10, 0.7);　⇐　さらに前とは違う3色の影を重ねる

　どのような変化がみられるか。Resultタブの結果により影の変化を見てくださいね。

Box Shadowのジェネレイターサイト

　今までは、基本的なBox-shdowの使い方について解説してきましたが、色々自分で複雑な影を試したい方はボックスサイトのジェネレイターサイトがありますので、そちらで色々試してあなたの好きな影を見つけてみてはいかがでしょうか？

　次に4つほど影のジェネレイターサイトを載せておきます。

おわりに

　如何だったでしょうか？

　box-shadowとは？、box-shadowの使い方はどうするの？、x－オフセット、y－オフセット、影の色、ブラー半径、スプレッド半径による影の違い、ブラー半径（ほかしの程度）を細かく変化したときの影の違い、スプレッド半径（ほかしの範囲）を細かく変化したときの影の違い、内側へ(inset）影を付け影色を変化、グラデーション風の影、Box Shadowのジェネレイターサイトとはどこにあるの？などについて解説してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。