CSS box-shadowの使い方 要素・画像に影をつける方法

CSS

【CSS box-shadowの使い方】ボックス要素や画像に影をつける方法

2022年6月29日

今回は画像やボックスにドロップシャドウのシャドウ効果を付けることができるCSSプロパティ「box-shadow」の使い方を解説していきます。

box-shadowの使用例
 

 

box-shadowで要素に影をつける方法

box-shadowは、画像やボックスの周りにドロップシャドウのような影の効果を付けることができるCSSプロパティです。

複数の値を半角スペースで区切って指定することができ、こうすることで影の位置の調整や色の変更、大きさの調整など様々な設定をすることができます。

box-shadowの使用例

 

(関連記事)テキスト文字に影をつけたい場合

本記事では、ボックスに影をつけるbox-shadowを解説していますが、テキスト文字に影をつけるCSS「text-shadow」の使い方は「【CSS text-shadowの使い方】文字に影を付ける方法」をご参照ください。

テキストシャドウのサンプル

 

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

ここからはbox-shadowプロパティの使い方について解説していきます。

box-shadowプロパティには合計で6つの値を半角スペースで区切って指定することができ、それぞれの値の意味は以下の通りとなっています。

box-shadowプロパティで指定できる6つの値の意味

このうち、比較的よく使うものは、1:水平方向の影の位置、2:垂直方向の影の位置、3:ぼかし、5:色 の4つです。

これだけでは分かりにくいと思うので、以下ではより各値の指定方法について詳しく解説していきます。

 

(1)(2):水平方向・垂直方向を指定する(必須)

box-shadowの最初の2つの値を指定することで、水平方向(左右)・垂直方向(上下)の好きな方向に影を作ることができます。

box-shadowの最初の2つの値の意味

box-shadowは、1つ目の値が水平方向の影の位置2つ目の値が垂直方向の影の位置を調節するものとなっており、それぞれの値に正や負の値を入れることで好きな位置に影を作成することが可能。

box-shadow: 7px 10px;を指定している例

上の例では1つ目と2つ目の値の両方に正の値を入力している為、右下方向に影が付いています。

なお、1つ目と2つ目の値に関しては値の指定が必須となっているので、box-shadowプロパティを使用する際は必ず忘れずに指定するようにしましょう。

 

(5)影の色を変更する(省略可能)

影の色を変えてあげたい場合は半角スペースを空けてからカラーコードや色名指定してあげることで、影の色を変更することができます。

影の色を変更している例

こちらの値は省略可能で、何も指定しなかった場合は黒色の影が付きます。

 

(3)影にぼかしを設定する(省略可能)

3つ目の値にpx単位の数値を指定してあげると、影のぼかし度合いを指定してあげることができます。

px単位の数値を大きくすることで、よりぼかし度合いを高くすることが可能。

影にぼかしを指定している例

前述の水平方向、垂直方向の指定と違って、ぼかしの大きさの指定のため、負の値は指定することができません。

 

(4)影の大きさを調整する(省略可能)

4つ目の値を指定することで、影の広がり具合を調整することができます。

正の値を指定すると全方向に影を拡大することが可能。

影を拡大している例

上の例では4つ目の値を「5px」としている為、全方向に5px分、影が拡大されているのが分かります。

影の大きさを5px分拡大する前と後の比較図

また負の値も指定することができ、こちらを指定すると反対に影を縮小することができます。

 

(6)影を内側に付ける(省略可能)

デフォルトでは影はボックスの外側に付いていますが「inset」という値を1番最後に書いてあげることで、影をボックスの内側に付けてあげることもできます。

ボックスの内側に影を付けている例

なおinsetを指定することで影の見える位置が変わっていますが、どちらとも同じ方向(右・下方向)に影が付いているという点がポイント。

ボックスの外側と内側に影を付けている時の比較

また、こちらの値には負の値が使用できるので、影が付く向きを変えてあげたい場合は負の値にしてあげれば良いでしょう。

 

(補足):内側と外側の両方に影を付ける方法

場合によっては「内側と外側の両方に影を付けてあげたい」と思われる方もいるかもしれません。

そんな場合は、以下のように影の1つのかたまりをカンマで区切って複数指定してあげることで、複数の影を指定してあげることが可能です。

ボックスシャドウを2つ指定している例

上の例では1つ目のかたまりで外側の影、2つ目のかたまりで内側の影を指定しています。

なおカンマで区切ることで2つだけでなくより多くの影を指定することもできます。

 

 

box-shadowプロパティを使用する際の注意点

またbox-shadowプロパティを使用する際は1点注意が必要で、PNGやSVGなど透過画像にドロップシャドウを付けた場合、画像の外側に影が落ちてしまい、意図した影が付けられません。

PNG画像にbox-shadowを指定している例

そこで、こういった透過箇所のある画像に対してオブジェクトの形に沿って影を落としてあげたい場合は、「filter: drop-shadow()」を指定してあげましょう。

なお指定方法はbox-shadowとほとんど同じで、「水平方向の影の位置」「垂直方向の影の位置」「影のぼかし度合い」「影の色」の4つの値を指定することができます。

PNG画像にfilter: drop-shadow()を指定している例

 

 

まとめ

まとめです。今回は画像やボックスに影を付けることができるプロパティ「box-shadow」の使い方を紹介しました。

box-shadowプロパティで指定できる6つの値の意味

影画像や要素を浮いているように見せたり、立体感を見せたりといった表現をすることが可能ですので、ぜひ覚えておきましょう。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS