CSSで影をつける方法（box-shadow）の基本
要素に影をつけて立体感を出すには、CSSのbox-shadowを使います。値の意味さえ分かれば、ボタンやカードを簡単におしゃれにできます。まずはコピペで使える基本形から見ていきましょう。
.box {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}| 値 | 意味 |
|---|---|
| 1つ目（0） | 横方向のずれ（右が＋） |
| 2つ目（2px） | 縦方向のずれ（下が＋） |
| 3つ目（8px） | ぼかしの大きさ |
| 色（rgba） | 影の色と濃さ |
値の意味を理解する
box-shadowは「横・縦・ぼかし・色」の順で指定します。
- 位置のずれ
- 1つ目が横、2つ目が縦のずれ。下方向に少しずらすと、自然な影になります。
- ぼかしと色
- 3つ目の値でぼかし具合を、色で影の濃さを調整します。rgbaの最後の数字（透明度）を小さくすると、薄く自然な影になります。
コツ：自然な影に見せるには色を黒の半透明（rgba）にして薄めにするのがポイント。真っ黒な影は不自然に見えがち。透明度0.1〜0.2程度にすると、ふんわり上品な影になります。
内側の影と応用
insetを使うと、影を内側につけられます。
.box {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}- inset…付けると内側に影が入り、へこんだ表現になる。
- 影を複数…カンマで区切ると、影を重ねられる。
- 広げる値…4つ目の値（任意）で影の広がりを調整できる。
注意：影を濃く・大きくしすぎると重たい印象になります。要素を少し浮かせる程度の控えめな影が、洗練された見た目に。ぼかしと透明度で調整しましょう。
あわせて読みたい：CSSで要素を上下左右中央寄せする方法（Flexbox）／Gitで直前のコミットを取り消す方法（reset の使い分け）／HTML / CSSの記事一覧
まとめ
box-shadowは横・縦・ぼかし・色の順で指定します。下に少しずらし、色を黒の半透明で薄めにすると自然な影に。insetで内側の影、カンマ区切りで影を重ねられます。濃く大きくしすぎず、控えめな影で上品な立体感を出しましょう。
よくある質問
box-shadowの値の意味は？
「横方向のずれ・縦方向のずれ・ぼかしの大きさ・色」の順です。例えば 0 2px 8px rgba(0,0,0,0.2) なら、下に2px、8pxぼかし、黒の薄い影になります。
自然な影に見せるには？
色を黒の半透明（rgba）にして、透明度を0.1〜0.2程度に薄くするのがコツです。真っ黒な影は不自然なので、ふんわりさせると上品になります。
内側に影をつけるには？
値の先頭に inset を付けます。box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); のようにすると、へこんだような内側の影が表現できます。
影を複数つけられる？
できます。box-shadowの値をカンマで区切ると、複数の影を重ねられます。濃く大きくしすぎると重たく見えるので、控えめに調整しましょう。