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

Posted at 2024-10-04

駆け出しエンジニアのtaiyoです。今日はbox-shadowプロパティについてまとめたいと思います。

box-shadow は、要素に影をつけるための CSS プロパティです。存在はもちろん知っていましたが、改めて一から影を作れと言われたら難しいなと思ったので、今回はその指定の仕方と概念をまとめたいと思います。

1. 基本的な構文

box-shadow: offset-x offset-y blur-radius spread-radius color;

まず、基本的な概念として、色以外何も設定のないbox-shadow（box-shadow: 0 0 0 0 black;）では、”影”は要素の真下に要素と同じ大きさ&指定した色ベタ塗りで隠れています。

つまり、このままでは見えない＆全く影感がありません。

この真下に隠れている"影"を、上下左右に移動させたり、ぼかしたり、拡大・縮小したりして、より影っぽくしていくのがこれから指定する値たちです。

offset-x: 影を水平方向にどれだけずらすかを指定します。正の値で右、負の値で左に影がずれます。
offset-y: 影を垂直方向にどれだけずらすかを指定します。正の値で下、負の値で上に影がずれます。
blur-radius: 影のぼかし具合を指定します。値が大きいほど影がぼかされ、柔らかい影になります。省略可能ですが、これがないと色がベタ塗りになるので、「箱」感が強くなり「影」感は皆無です。
spread-radius: 影の拡大・縮小を指定します。正の値で影が拡大され、負の値で影が縮小します。省略可能です。
color: 影の色を指定します。rgba() などを使って透明度を含めることも可能です。

/* 基本的な影 */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

この設定により、要素が少し浮き上がっているように見えます。

カンマ区切りで複数の影の設定をすることも可能です。この例では、黒い影が右下に、白い影が左上に配置されて、より立体的に見えます。

box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5), -2px -2px 3px rgba(255, 255, 255, 0.3);

通常の影は外側に表示されますが、inset を使うと、要素の内側に影がつきます。これを使ってくぼんだような効果を作ることができます。

box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);

ちなみに、Tailwindのshadowクラスは次のように設定されています。

クラス名	実際のCSS
shadow-sm	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-md	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lg	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xl	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-inner	box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-none	box-shadow: 0 0 #0000;

また、インラインで直接box-shadowプロパティの設定をしたいときは、ハイフン_で繋いで書きます。

<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
  <!-- ... -->
</div>

基本的な内容になってしまいましたが、ご参考までに！