ウェブデザインにおいて、box-shadowプロパティを使用して要素に影を付けることは一般的ですが、影を一方向にのみ表示したい場合があります。この記事では、CSSのbox-shadowプロパティを活用して、影を特定の方向にのみ表示する方法を紹介します。
box-shadowプロパティの基本
まず、box-shadowプロパティの基本的な使い方を簡単におさらいしましょう。box-shadowは、要素に影を付けるためのCSSプロパティで、次のような形式で指定します。
box-shadow: 水平方向のオフセット 垂直方向のオフセット ぼかしの半径 影の色;
各パラメータの意味は以下の通りです。
- 水平方向のオフセット：影を水平方向にどれだけずらすかを指定します。正の値で右に、負の値で左に影が付きます。
- 垂直方向のオフセット：影を垂直方向にどれだけずらすかを指定します。正の値で下に、負の値で上に影が付きます。
- ぼかしの半径：影のぼかし具合を指定します。値が大きいほど影が広がり、ぼけた感じになります。
- 影の色：影の色を指定します。rgbaを使用して透明度を設定することも可能です。
下方向にのみ影を付ける方法
ここでは、影を下方向にのみ表示する方法を見ていきます。水平方向のオフセットを0にし、垂直方向のオフセットを正の値に設定することで、影を下にだけ表示することができます。
.element {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
- 水平方向のオフセット（0）: 影を水平方向にはずらさないようにします。
- 垂直方向のオフセット（4px）: 影を下方向に4ピクセルずらします。
- ぼかしの半径（10px）: 影を10ピクセルの範囲でぼかします。
- ぼかしの半径（10px）: 影を10ピクセルの範囲でぼかします。
- 影の色（rgba(0, 0, 0, 0.3)）: 30%の透明度を持つ黒色の影を付けます。
他の方向からも微妙に影が出てしまう
box-shadowで影を一方向に表示する際、他の方向からも微妙に影が出てしまうことがあります。これを防ぐには、以下の2つの方法を試してみてください。
ぼかし半径を小さくする
影のぼかし半径（blur-radius）を小さくすることで、影が他の方向に広がるのを抑えることができます。
.element {
box-shadow: 0 4px 3px rgba(0, 0, 0, 0.5);
}
Spread Radiusを利用する
影を特定の方向に強調したい場合、spread-radius（広がり半径）を負の値に設定することで、影が他の方向に広がらないようにすることができます。これにより、影をより限定的に表示できます。
.element {
box-shadow: 0 8px 5px -5px rgba(0, 0, 0, 0.3);
}
よくある質問（FAQ）
Q. CSSで特定の要素だけに影を付けるには？
A. box-shadowまたはfilter: drop-shadow()を対象要素に設定します。他の要素には影が付かないようにデフォルトではnoneになっています。
Q. 子要素だけ影を付けて親要素には付けないには？
A. 親の.containerにbox-shadow: none;を設定し、子要素の.child { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }を設定します。
Q. 要素の一側面だけに影を付けるには？
A. box-shadowのspread-radiusと他のオフセットを組み合わせます。例：box-shadow: 0 4px 6px -4px rgba(0,0,0,0.3)で下側だけ影が見えます（負のspreadで横方向を消す）。
まとめ
box-shadowプロパティを活用することで、簡単に要素に影を付けることができますが、オフセットの値を工夫することで、影を特定の方向にのみ表示することも可能です。デザインのニーズに合わせて、影の方向や強さを調整してみましょう。
