1. box-shadowとは？CSSで影をつける基本

CSSのbox-shadow（ボックスシャドウ）とは、ボックス（要素）に影をつけるプロパティのことです。影を加えることで、平面的なデザインが立体的に見えるようになります。まるで紙の上にカードが少し浮き上がっているような効果を出すことができます。

ウェブデザインでは、影を上手に使うことで「奥行き」や「層の違い」を表現し、ユーザーにとって見やすく印象的なページを作ることができます。

2. box-shadowの基本構文を覚えよう

box-shadowは、次のような構文で使います。

構文：


box-shadow: 水平の距離 垂直の距離 ぼかしの大きさ 広がりの大きさ 色;

それぞれの意味を簡単に説明します。

水平の距離：影を右（または左）にどれくらいずらすかを指定します。
垂直の距離：影を下（または上）にどれくらいずらすかを指定します。
ぼかしの大きさ：影のふんわり感を調整します。数字が大きいほど柔らかい影になります。
広がりの大きさ：影をどのくらい広げるかを指定します。
色：影の色を指定します。黒だけでなく、グレーや半透明なども使えます。

3. 実際にbox-shadowを使ってみよう

それでは、実際にbox-shadowを使ってみましょう。まずは基本的な影をつけてみます。


<style>
.box-basic {
    width: 200px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 10px 10px 10px #aaa;
}
</style>

<div class="box-basic">基本的なボックスシャドウ</div>

ブラウザ表示

このコードでは、ボックスの右下に少しぼかした灰色の影をつけています。10px 10px 10px #aaaの部分が、順番に「右に10px」「下に10px」「ぼかし10px」「色は薄いグレー」という意味です。

4. 柔らかい影と強い影を作り分ける

影のぼかしや色を調整することで、デザインの印象がガラッと変わります。たとえば、ふんわりした柔らかい影と、くっきりした強い影の例を見てみましょう。


<style>
.soft-shadow {
    width: 200px;
    height: 100px;
    background-color: #f9f9f9;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

.strong-shadow {
    width: 200px;
    height: 100px;
    background-color: #fff;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6);
}
</style>

<div class="soft-shadow">柔らかい影</div>
<div class="strong-shadow">強い影</div>

ブラウザ表示

rgba(0, 0, 0, 0.2)のように「rgba」という指定を使うと、透明度を設定できます。最後の数字（0.2や0.6）は「透明度」で、0に近いほど薄く、1に近いほど濃い影になります。

5. box-shadowでふんわり浮かぶカードデザインを作ろう

最近のウェブデザインでは、カード型デザイン（カードレイアウト）がよく使われています。カードの下に影をつけることで、浮き上がったように見せることができます。


<style>
.card-shadow {
    width: 250px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
</style>

<div class="card-shadow">
    <h3>カードデザイン</h3>
    <p>box-shadowでふんわり浮いたデザインを作れます。</p>
</div>

ブラウザ表示

このように、少し丸みをつけて（border-radius）やわらかい影を足すと、カードが優しく浮き上がって見えます。影の強さや距離を調整することで、立体感を自在に変えることができます。

6. box-shadowを使った複数の影や内側の影

box-shadowは、1つだけでなく複数の影を重ねることもできます。また、影を内側に入れることもできるんです。


<style>
.multi-shadow {
    width: 200px;
    height: 100px;
    background-color: #fff;
    box-shadow: 3px 3px 5px #999, -3px -3px 5px #ccc;
    margin-bottom: 20px;
}

.inner-shadow {
    width: 200px;
    height: 100px;
    background-color: #fefefe;
    box-shadow: inset 5px 5px 10px rgba(0,0,0,0.2);
}
</style>

<div class="multi-shadow">複数の影</div>
<div class="inner-shadow">内側の影</div>

ブラウザ表示

1つ目の例では、「右下」と「左上」に2つの影を重ねて、光が当たっているような立体感を出しています。2つ目の例のinsetは「内側に影をつける」という意味で、くぼんだようなデザインにできます。

7. box-shadowでボタンを立体的にする応用例

ボタンにもbox-shadowを使うと、押せるように見せる効果があります。サイトの印象を大きく変えるので、ボタンのデザインにも活用してみましょう。


<style>
.button-shadow {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0 5px 0 #0056b3;
    cursor: pointer;
}
.button-shadow:active {
    box-shadow: 0 2px 0 #003f7f;
    transform: translateY(3px);
}
</style>

<button class="button-shadow">立体ボタン</button>

ブラウザ表示

ボタンに影をつけることで、実際に押し込めるような立体感を再現しています。クリック時に少し下に動くようにすることで、よりリアルなボタンに見えます。