2023.10.27記事内に商品プロモーションを含む場合があります。box-shadowプロパティの使い方がイマイチわからない。感じていませんか?box-shadowは指定する値が多いので、難しく感じるかもしれませんね。いえ、基本的な使い方を抑えればとても簡単ですので、この機会に克服しちゃいましょう。上下左右=0pxでも影を作れる影の色を変える影の濃さを変える【応用】影を重ねるまとめスポンサーリンクbox-shadowの基本的な使い方box-shadowプロパティの基本的な使い方です。色;横方向(左右)の影をつけるbox-shadowの最初の値は、横方向(左右)への影の指定です。右に10pxを指定してみましょう。0;ぼかしの指定がないので、影というより太めのborder-rightですね。ちなみに、影は正の数値だと右に、負の数値だと左につきます。試しに-10pxを指定してみました。ちなみに色指定をしないと、デフォルトで真っ黒(#000)の影がつきます。縦方向(上下)の影をつけるbox-shadowの2つめの値は縦方向(上下)の指定です。左右と同じ原理で、正の値で下、負の値で上に影がつきます。「下に10px」つけてみましょう。10px;反対に、上だとマイナスですね。-10px;上下左右に影をつける横方向と縦方向を組み合わせると、影っぽさが増します。左右に10pxずつ指定すると、次のようになります。10px;ボックスが手前に浮いたような影ができました。影と呼ぶには少し不自然な感じがしますね。そこで、より自然な影をつくるために、これからご紹介するぼかしと広がりを調整します。ぼかしと広がりでより影っぽさを演出ここでbox-shadowの使い方をおさらいしましょう。ぼかしは3番目の値、広がりは4番目の値で調節可能でしたね。色;では、まずばぼかしを10px入れてみましょう。10px;いい感じになってきました。広がりも足してみましょう。10px;10pxはやり過ぎですね笑。2~3pxくらいが丁度良い感じかなと思います。2px;「ぼかしのみ、広がり0」でも影っぽさは十分演出できるので、この辺りは案件や好みに応じて調節してください。上下左右=0pxでも影を作れる上下左右の値を0にしても影を作ることができます。下記コードは、上下左右ともに0pxですが、ぼかしの値を入れると違った影を演出できます。8px;今回はわかりやすいように、真っ白なボックスにしてみました。ボヤっと浮かび上がるような影の付け方で、カードに割と多いパターンかと思います。実線であるボーダーを付けるより、フワッとした印象がありますね。10px」なら右と下に10pxずつ。5px」はズラさないけどボカシが漏れ出ている。2023「広がり」の値を追加すると、よりはっきりした影になります。5px;影の色を変えるbox-shadowは影の色も自由に変えることができます。影の色を変えるのは5番目の値ですね。gray;色番号での指定も可能です。#808080;影の濃さを変える「もう少し影を薄くしたい」と思ったら、色自体を変えてもOKですが、透明度を変えても実現できます。色コードをHexではなくRGBAで指定すれば透明度を変えられるので、それを活用します。先ほどのgray(#808080)をRGBAに変換して、半分の濃さにしてみましょう。半分ですから、0.5ですね。0.5);色が薄くなりましたね。【応用】影を重ねるbox-shadowプロパティは、値を連続して記述することで、影を重ねて演出することができます。下記は、青いボックスに「黄・赤・緑」の影を重ねた例です。それぞれをコンマでつなぐ点がポイントです。green;影っぽいかどうかは別として、色紙みたいで綺麗ですよね。このように、box-shadowは使い方によってさまざまな表現ができるので、色々遊んでみでください。スポンサーリンクまとめ今回はCSSプロパティのbox-shadowについて解説しました。box-shadowの使い方や仕組みがわかると、影以外にも面白い実装ができちゃいます。2023これを実務で使うかと言われると、微妙ですが...。いえ、仕組みを知るには良いかと。box-shadowは実案件でも必ずと言っていいほど使うプロパティなので、ぜひ押さえておいてください。7GitSourcetree検索ホームサイドバーTOPに戻る。