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

生徒

「先生、CSSで立体的に見えるボックスって作れますか？」

先生

「はい、影（box-shadow）と境界線（border）を組み合わせると簡単に立体的に見せることができます。」

生徒

「影ってどうやって付けるんですか？」

先生

「CSSのbox-shadowを使うと、ボックスの外側に影を付けることができます。影の距離や色、ぼかしの強さを調整することで立体感が出ます。」

生徒

「境界線と影を一緒に使うとどうなるんですか？」

先生

「境界線でボックスの形をはっきりさせつつ、影で奥行きを表現することで、紙やカードのような立体的なデザインになります。」

1. CSSのボックスモデルと境界線・影の基本

CSSのボックスモデルは、ウェブページの要素を「コンテンツ」「パディング」「ボーダー（境界線）」「マージン（外側の余白）」に分けて考える方法です。立体的なデザインを作るには、このボックスモデルの理解が大切です。

ボーダーはボックスの輪郭をはっきりさせる役割があります。影（box-shadow）はボックスの後ろにできる影のことで、距離やぼかし、色を指定できます。この二つを組み合わせることで、立体感のあるボックスが作れます。

2. 境界線（ボーダー）を使ったボックスデザイン

まずは境界線だけでボックスを強調してみましょう。ボーダーの太さ、色、種類（実線・点線・二重線など）を変えるだけで、ボックスの印象が大きく変わります。


<style>
    .border-box {
        width: 300px;
        margin: 20px auto;
        padding: 20px;
        border: 3px solid #007BFF; /* 青色の実線 */
        text-align: center;
    }
</style>

<div class="border-box">
    境界線だけのボックス
</div>

ブラウザ表示

この例では、青色の実線ボーダーでボックスを囲み、中央配置しています。見た目は平面的ですが、輪郭がはっきりしてコンテンツが目立ちます。

3. 影（box-shadow）で立体感を追加

影を付けるには、box-shadowを使います。影の位置やぼかし、色を指定することで、ボックスに奥行きが生まれます。


<style>
    .shadow-box {
        width: 300px;
        margin: 20px auto;
        padding: 20px;
        border: 3px solid #28A745;
        box-shadow: 5px 5px 15px rgba(0,0,0,0.3); /* 右下に影 */
        text-align: center;
    }
</style>

<div class="shadow-box">
    影だけのボックス
</div>

ブラウザ表示

このボックスでは、右下にぼんやりとした影がついています。影の色は半透明にしているので、背景と自然に馴染みます。

4. 境界線と影を組み合わせて立体的なボックスを作る

境界線と影を組み合わせると、紙やカードのように立体感のあるボックスデザインが作れます。境界線で輪郭をはっきりさせ、影で奥行きを表現します。


<style>
    .3d-box {
        width: 350px;
        margin: 30px auto;
        padding: 30px;
        border: 2px solid #FFC107;
        box-shadow: 8px 8px 20px rgba(0,0,0,0.4);
        border-radius: 10px; /* 角を丸くする */
        background-color: #FFF8E1;
        text-align: center;
    }
</style>

<div class="3d-box">
    境界線と影で立体的に見えるボックス
</div>

ブラウザ表示

このボックスでは、黄色のボーダーと角を丸くするborder-radius、さらに影を加えることで、浮き上がったような立体感を表現しています。背景色も明るくしてカードのような印象を作ります。

5. 実用例：カード型デザインやボタンに応用

この技術は、ウェブサイトのカードデザインや重要なボタン、広告バナーなどに使えます。影と境界線を上手に組み合わせるだけで、デザインが一気に見栄えよくなります。


<style>
    .card-box {
        width: 400px;
        margin: 40px auto;
        padding: 25px;
        border: 1px solid #6C757D;
        box-shadow: 6px 6px 18px rgba(0,0,0,0.25);
        border-radius: 12px;
        background-color: #F8F9FA;
        text-align: center;
    }
</style>

<div class="card-box">
    立体的なカード型ボックス
</div>

ブラウザ表示

このボックスは、影とボーダーを使うことで浮き上がったカードのように見えます。マージンで周囲の余白を確保し、パディングで中の文字やコンテンツを見やすくしています。