2024.02.21

box-shadow プロパティで下だけに影を描画する方法

Webデザインにおいて、ボックスに影を付けることは、デザインに奥行きを与え、立体感を演出する効果的な手法です。CSSの box-shadow プロパティを使えば、簡単に影を付けることができます。

この記事では、box-shadow プロパティを使って、ボックスの下だけに影を描画する方法を、初心者でもわかりやすく解説します。豊富な画像付きで丁寧に説明しているので、記事を読み終える頃には、あなたも box-shadow プロパティを使って、ボックスをより魅力的にデザインできるようになるでしょう！

この記事でわかること

box-shadowの使い方
box-shadowのサンプルコード

1 box-shadowとは？
2 box-shadowの使い方
3 下だけに影を描画する
4 box-shadow プロパティのポイント
5 box-shadowのサンプルコード
6 まとめ
7 投稿者

box-shadowとは？

「box-shadow」とは、ウェブデザインにおいて、HTML要素に影を付けるためのCSSプロパティです。

このプロパティを利用することで、テキストボックス、ボタン、画像などの要素に立体感を持たせることができます。具体的には、水平方向と垂直方向のオフセット（ずれ）、ぼかしの範囲、広がりの大きさ、そして影の色を指定することができます。

例えば、「box-shadow: 10px 5px 5px gray;」というコードは、要素の右下に灰色の影を作ります。また、複数の影を重ねたり、内側に影をつけることも可能です。この機能によって、ウェブページはより洗練されたビジュアルを実現し、ユーザー体験を向上させることができます。デザインの工夫によって、影の強さや方向を調整することで、さまざまなスタイルを生み出すことが可能です。

box-shadowの使い方

box-shadow プロパティの基本的な使い方を紹介します。

box-shadow プロパティは、以下の形式で記述します。

box-shadow: h-offset v-offset blur spread color;

h-offset: 影の水平方向のオフセット
v-offset: 影の垂直方向のオフセット
blur: 影のぼかし具合
spread: 影の拡散具合
color: 影の色

下だけに影を描画する

下だけに影を描画するには、v-offset プロパティに正の値を指定し、h-offset プロパティを 0 に設定します。下記コードは、ボックスの下に 10px のオフセットで、5px のぼかしと拡散を適用した影を描画します。

box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.5);

box-shadow プロパティのポイント

box-shadow プロパティは、複数の影を同時に設定することができます。
inset キーワードを使って、ボックスの内側に影を描画することもできます。
box-shadow プロパティは、テキストにも適用することができます。

box-shadowのサンプルコード

box-shadow プロパティを使って、ボックスの下だけに影を描画する例を紹介します。

下記コードは、ボックスの下に影を描画し、立体感を演出しています。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>ボックスの下に影を描画する例</title>
</head>
<body>
<div class=”box”>
ボックス
</div>

<style>
.box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.5);
}
</style>
</body>
</html>