ウェブデザインにおいて、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);
}まとめ
box-shadowプロパティを活用することで、簡単に要素に影を付けることができますが、オフセットの値を工夫することで、影を特定の方向にのみ表示することも可能です。デザインのニーズに合わせて、影の方向や強さを調整してみましょう。
