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

HTML&CSS
この記事は約8分で読めます。

はじめに

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

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

  • box-shadowとは?
  • box-shadowの使い方はどうするの?
    • x-オフセット、y-オフセット、影の色、ブラー半径、スプレッド半径による影の違い
    • ブラー半径(ほかしの程度)を細かく変化したときの影の違い
    • スプレッド半径(ほかしの範囲)を細かく変化したときの影の違い
    • 内側へ(inset)影を付け影色を変化
    • グラデーション風の影
  • Box Shadowのジェネレイターサイトとはどこにあるの?
 HTML&CSS入門講座(23)では、【CSS】 opacityやrgba 使い方について解説してきました。
 
 ここでは、【CSS】box-shadowの使い方について深堀していきます。

box-shadowとは?

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

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

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

{box-shadow: inset, xオフセット, yオフセット, ブラー半径, スプレッド半径, 影の色;}

ここで、
inset : 影を内側に付ける場合に指定、外側に付ける場合は省略
xオフセット : 影をx方向にずらす量
yオフセット : 影をy方向にずらす量
ブラー半径 : 影のぼかしの程度を指定する量、省略可能、省略した場合は0
スプレッド半径 : 影の広がりを指定する量、省略可能、省略した場合は0
影の色 : 影の色を指定、省略可能、省略した場合は文字色となる。

box-shadowの使い方

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

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

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

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

  1. box-shadow: 10px 10px;  ⇐ 右に10px、下に10pxの黒の影(デフォルトの文字が黒のため)
  2. box-shadow: -10px -10px; ⇐ 左に10px、上に10pxの黒の影
  3. box-shadow: 10px 10px skyblue; ⇐ 右に10px、下に10pxのスカイブルーの影
  4. box-shadow: 10px 10px 10px; ⇐ 右に10px、下に10px、ぼかしを10pxにした黒の影
  5. box-shadow: 10px 10px 10px 10px; ⇐ 右に10px、下に10px、ぼかしを10px、広がりを10pxにした黒の影

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

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

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

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

box-shadow: 10px 10px 2px;  ⇐ 右に10px、下に10px、ぼかしを2pxにした黒の影
box-shadow: 10px 10px 6px; ⇐ 右に10px、下に10px、ぼかしを6pxにした黒の影
box-shadow: 10px 10px 10px; ⇐ 右に10px、下に10px、ぼかしを10pxにした黒の影
box-shadow: 10px 10px 15px; ⇐ 右に10px、下に10px、ぼかしを15pxにした黒の影
box-shadow: 10px 10px 20px; ⇐ 右に10px、下に10px、ぼかしを200pxにした黒の影
 どのような変化がみられるか。Resultタブの結果により影の変化を見てくださいね。

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

 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つほど影のジェネレイターサイトを載せておきます。

サイト名サイトの簡単な内容
bad-companyボタン、カード型を選んで、box-shadowの各パラメータを設定すればcssコードが表示されます。
CSSボックスシャドウジェネレーター
左にあるbox-shadowの各パラメータを変化させ、右のボックスに表示される影を見ながら自分の好きな影を見つかられます。
Front-end Tools Box Shadow ジェネレーター影サンプルがあり、それを選んで、下にスクロールしてさらにあなた好みの影を見つけることができます。
CSS3 Generatorbox-shadow画面下の入力欄にbox-shadowの各パラメータを記入して、上部のボックスに付けられた影を見ながらあなた好みの影を見つけられます。

おわりに

 如何だったでしょうか?

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

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

以上です。

コメント

タイトルとURLをコピーしました