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

box-shadowで立体的なボックスデザインを作る方法

先生と生徒の会話形式で理解しよう

生徒

「先生！ウェブサイトで立体的に見えるボックスがありますけど、どうやって作るんですか？」

先生

「あれはCSSのbox-shadowというプロパティを使って作るんですよ。とても簡単に影（シャドウ）をつけることができます。」

生徒

「影をつけるだけで立体的に見えるんですか？」

先生

「そうなんです。ほんの少しの設定で、ふんわり浮かんだようなボックスが作れますよ。さっそくやってみましょう！」

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の基本構文を覚えよう

CSSで要素に影をつける「box-shadow」は、一見難しそうに見えますが、実は「影をどの方向に、どれくらいぼかして、何色にするか」を順番に指定するだけです。初心者の方でも直感的に理解できるように、まずは基本の書き方（構文）を詳しく見ていきましょう。

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

それぞれの値には、次のような役割があります。プログラミング未経験の方は、まず「水平」と「垂直」の2つから調整してみるのがコツです。

水平の距離：影を右または左に動かします。プラス（5pxなど）で右、マイナス（-5pxなど）で左に移動します。
垂直の距離：影を下または上に動かします。プラスで下、マイナスで上に移動します。
ぼかしの大きさ：影の縁をどれくらい「ふわっ」とさせるかです。数値が大きくなるほど、影が薄く広がり、柔らかい印象になります。
広がりの大きさ：影そのもののサイズを大きくしたり小さくしたりします。省略することも可能です。
色：影の色を指定します。rgba(0, 0, 0, 0.3)のように透明度を指定すると、より自然でプロっぽい影になります。

【実践】シンプルな影を作ってみよう

まずは、もっともよく使われる「右下に少しだけぼかした影」を付けてみます。 HTMLのdivという箱に対して、CSSで影のルールを適用する簡単なサンプルです。


<style>
.sample-box {
    width: 150px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 右に10px、下に10px、ぼかし15px、色は薄いグレー */
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2);
}
</style>

<div class="sample-box">
    影がついた箱
</div>

ブラウザ表示

このように、数値を変えるだけで「浮き上がっているようなデザイン」や「立体的なボタン」を簡単に作ることができます。基本の5つの項目を意識しながら、数値を少しずつ変えて試してみてください。

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

CSSのbox-shadowプロパティを使えば、画像加工ソフトを使わなくても、コード一行でWebサイトのパーツに奥行きと立体感を与えることができます。まずは、プログラミング初心者の方でもすぐに試せる、最もスタンダードな「外側に影をつける」方法から見ていきましょう。


<style>
    /* 影をつけるボックスのスタイル */
    .box-basic {
        width: 200px;
        height: 100px;
        background-color: #ffffff;
        border: 1px solid #eeeeee;
        /* 右に10px、下に10px、ぼかし10px、色は薄いグレー */
        box-shadow: 10px 10px 10px #aaaaaa;
        /* 見やすくするための余白設定 */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px;
    }
</style>

<div class="box-basic">基本的な影</div>

ブラウザ表示

このコードの肝となる box-shadow: 10px 10px 10px #aaa; という記述には、左から順番に4つの役割があります。

1つ目の数値（10px）：影を「右」にずらす距離（水平方向）
2つ目の数値（10px）：影を「下」にずらす距離（垂直方向）
3つ目の数値（10px）：影の「ぼかし」具合。数値が大きいほど柔らかい影になります
最後（#aaa）：影の色。最初は薄めのグレーを指定すると自然に見えます

もし影を左や上に出したい場合は、-10px -10px のようにマイナスの数値を指定するだけです。まずはこの4つの値を少しずつ書き換えて、影がどのように変化するかをブラウザで確認してみるのが、上達への一番の近道ですよ。

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

CSSのbox-shadowを使えば、影の「ぼかし具合」や「色の濃さ」を自由に操ることができます。初心者の方がまず押さえたいポイントは、「広がる範囲（ぼかし）」と「透明度」のバランスです。この2つを調整するだけで、デザインの印象は劇的に変わります。

例えば、モダンで清潔感のあるデザインには「ふんわりとした柔らかい影」、ボタンの立体感を強調したいときや、少しレトロな雰囲気を出したいときには「くっきりした強い影」がよく使われます。実際のコードでその違いを比較してみましょう。


<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        border-radius: 8px;
    }

    /* 柔らかい影：ぼかし距離を大きくし、透明度を薄くする */
    .soft-shadow {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    /* 強い影：ぼかし距離を小さくし、透明度を濃くする */
    .strong-shadow {
        box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.5);
    }
</style>

<div class="box soft-shadow">柔らかい影（自然）</div>
<div class="box strong-shadow">強い影（強調）</div>

ブラウザ表示

影の質感を決める「rgba」の仕組み

影の色を指定する際によく使われるのがrgba(0, 0, 0, 0.2)という書き方です。最初の3つの数字（0, 0, 0）は「黒」を指し、最後の「0.2」が透明度（アルファ値）を表しています。

0に近いほど（例: 0.1）：影が薄くなり、背景に溶け込むような上品な質感になります。
1に近いほど（例: 0.8）：影が濃くなり、要素が浮き上がっているような強い主張が生まれます。

まずは「透明度を0.1〜0.3くらい」の薄い設定にして、ぼかしの数値（px）を大きくすることから始めてみてください。それだけで、今風の洗練されたWebデザインに一歩近づきます。

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>

ブラウザ表示

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