HTMLとCSSでデザインに立体感を加えたいと思ったことはありませんか？ そんなときに便利なのがbox-shadowプロパティです。この記事では、box-shadowの基本から応用までをやさしく解説します。 box-shadowとは？ box-shadowは、要素に影をつけるためのCSSプロパティです。影を加えることで、カードやボタンなどの要素が浮き上がって見えるようになります。 基本の書き方 構文は以下の通りです。 コピー box-shadow: 水平距離 垂直距離 ぼかし 拡がり 色; たとえば次のように記述します。 コピー .box { box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3); } 各パラメータの意味 5px（水平距離）：右方向に影を5pxずらす 5px（垂直距離）：下方向に影を5pxずらす 10px（ぼかし）：影のぼかし具合 0（拡がり）：影のサイズを広げる（正数）または縮める（負数） rgba(0, 0, 0, 0.3)：影の色（透過あり） 応用：複数の影を重ねる カンマで区切ることで、複数の影を重ねることもできます。 コピー .card { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.1); } 実用例：ボタンにホバー時の影をつける コピー .button { background: #007bff; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; transition: box-shadow 0.3s; } .button:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } おわりに box-shadowを使いこなすことで、Webデザインに奥行きや高級感を加えることができます。 少しの工夫で見栄えが大きく変わるので、ぜひ積極的に活用してみましょう！ 次回はtext-shadowとの違いや、影のアニメーション演出にも触れていきます。
タグ: box-shadow
