CSSのbox-shadowで立体的なボックスデザインを作る方法！初心者でもわかる完全ガイド

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

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

CSSのbox-shadow（ボックスシャドウ）とは、ウェブページ上の画像やテキストボックス、ボタンなどの「要素」に対して、自由自在に影（シャドウ）を付けることができるプロパティです。通常、ウェブ画面は平面（2D）ですが、この影を加えることで、まるで紙の上にカードが置かれているような「奥行き」や「リアリティ」を演出できます。

最近のウェブデザイン（Googleの提唱するマテリアルデザインなど）では、この影を使って「どの要素が重要か」「どのボタンが押せるのか」を直感的にユーザーへ伝える手法が主流です。プログラミングが初めての方でも、たった1行のコードを追加するだけで、サイトの見た目を一気にプロっぽく仕上げることができます。

<style>
.sample-box {
    width: 200px;
    height: 100px;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    /* 右に5px、下に5px、ぼかし10px、影の色はグレー */
    box-shadow: 5px 5px 10px #888888;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
}
</style>

<div class="sample-box">
    影があるボックス
</div>

上のサンプルを見てみましょう。白い四角形にグレーの影がつくことで、背景から少し浮き出して見えませんか？これがbox-shadowの魔法です。影の向きや色を変えるだけで、優しく上品な雰囲気から、力強くクールな印象まで、サイトの表情を自由に変えることが可能になります。

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

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

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

構文：

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

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

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

3. 実際に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. 柔らかい影と強い影を作り分ける

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でふんわり浮かぶカードデザインを作ろう

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を使った複数の影や内側の影

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でボタンを立体的にする応用例

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>

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

8. まとめ：box-shadowでデザインの印象を変えよう

8. まとめ：box-shadowでデザインの印象を変えよう

box-shadowはCSSの中でもとても便利なプロパティです。難しいコードを使わなくても、影の設定だけで立体的でプロっぽいデザインを作ることができます。影の強さ・色・ぼかし・位置を調整しながら、自分の理想のデザインを探してみてください。