box-shadow プロパティで下だけに影を描画する方法
目次
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> |
まとめ
box-shadow プロパティは、ボックスに影を付けてデザインに奥行きを与えるための便利なプロパティです。
最初は、簡単な影から始めてみましょう。影の色やぼかし具合などを調整して、デザインに合った影を表現してみましょう。
この記事で紹介した例を参考に、さまざまな場面で box-shadow プロパティを使ってみてください。
box-shadow プロパティを使って、Webデザインをもっと楽しみましょう！