【CSS】box-shadowで影を作る方法【シンプルに解説】
「あれっ、box-shadowってどうやって指定するんだっけ？」
この記事ではこうした質問に答えていきます。
忘れないための方法もご紹介するので、ぜひ参考にしてみてください。
ではさっそく見ていきましょう！
【CSS】box-shadowで影を作る方法
box-shadowプロパティの書き方
たとえば下記のように書きます。
div{
box-shadow: 左右の位置px 上下の位置px ぼかし具合px 影の広がりpx 色指定 内側指定;
}各値を半角スペースで区切って書いていきましょう。
指定しなくても良い → ぼかし具合、影の広がり、色指定、内側指定
順番に見ていきます。
左右の位置と上下の位置
div{box-shadow: 5px 5px;}
左右の位置と上下の位置の指定は必須です。
div{box-shadow: -5px -5px;}| 左右の位置 | プラスの値→右へ | マイナスの値→左へ |
| 上下の位置 | プラスの値→下へ | マイナスの値→上へ |
影をぼかす
div{box-shadow: 5px 5px 5px;}影をぼかすこともできます。ぼかし具合はpx単位で指定しましょう。
マイナスの値を指定することはできません。値が0の場合はクッキリとしたぼかしがない影となります。
色を変える
div{box-shadow: 5px 5px 5px rgba(255,0,0);}影の色を変えることもできます。色指定は上記のようにrgba()で指定する場合が多いです。
ほかにも色名red、カラーコード#ff0000、という指定もできます。
影の広がり
div{box-shadow: 5px 5px 5px 10px rgba(255,0,0);}影の広がりは「作った影を縮小したり、拡大したりできる」というイメージで大丈夫です。
div{box-shadow: 15px 15px 5px -10px rgba(255,0,0);}マイナスの値を指定すると、影は小さくなります。
内側指定
div{box-shadow: 5px 5px 5px 10px rgba(255,0,0) inset;}ボックスの内側に影を作りたいという場合は、値の最後にinsetと書けばOK。内側に影がかかります。
div{box-shadow: -5px -5px 5px 10px rgba(255,0,0) inset;}左右と上下の値にマイナス値を入れると、影の向きも変更できます。
| 左右の位置 | プラスの値→左から右へ | マイナスの値→右から左へ |
| 上下の位置 | プラスの値→上から下へ | マイナスの値→下から上へ |
影を２つ作る
div{box-shadow: 5px 5px 5px rgba(255,0,0) inset,5px 5px 5px rgba(0,255,0);}box-shadowはカンマ（,）で区切ることにより、複数の影を作ることができます。上記の画像は、外側に緑色の影を、内側に赤色の影をつけています。
div{box-shadow: 5px 5px 5px rgba(255,0,0) inset,5px 5px 5px rgba(0,255,0),10px 10px 5px rgba(0,0,255);}カンマを３つ以上つけて何個でも影を作り出すことができますよ。まぁあんまり使う機会はないですけどね、、、
box-shadowの注意点と忘れない方法
box-shadowの注意点
- 余白を作っておく
- 画像には弱い
余白を作っておく
余白がないと影が見えなくなります。なぜならbox-shadowは要素の外側に作られるからです。
画像には弱い
透明部分があるpng形式の画像にbox-shadowで影を付けようとすると、画像の外側に影が落ちることになります。
box-shadowではオブジェクトにそった影を作ることはできないので注意が必要です。
これを回避する方法は、drop-shadowやtext-shadowを使うことです。
忘れない方法
- 声に出しながらbox-shadowを指定する
box-shadowを指定するときに、声に出しながらやると効率的に覚えることができますよ。
「左右は５pxで、上下も５px。ぼかしも５pxでよくって、広がりはいらないな。色はグレーで指定しよう。」こんな具合でコードを書きながら声に出すことで、とてもよく覚えることができます。
ただしデメリットが１個だけあって、
それは「ほかの人に聞かれると変な人だと思われる」ということ。
僕みたいに白い目で見られないよう、ほどほどにしましょう。
まとめ：box-shadowで影を作る方法
さりげなく影をつけてあげるだけで、ユーザーは視認性が飛躍的に上がります。
人って影があるだけで立体的に見えていると錯覚して、グッと自然さがますんですよねぇ。
使い方には少しコツがいりますが、見やすいサイトを作るため、いろいろ試行錯誤するといいですよ！
ペット保険ペット保険の資料一括請求サービス
キャットフード愛猫にスッキリ快適な毎日を過ごしてほしいあなたへ『モグニャン』