CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのbox-shadowプロパティで要素に影を追加する方法

CSSで要素に影を付けたい場合は、box-shadowプロパティを使用します。このプロパティを使うことで、ボックス要素の周囲にドロップシャドウ（影）を簡単に描画でき、ページに立体感や奥行きを持たせることができます。

box-shadowプロパティの基本構文

box-shadow: offset-x offset-y blur-radius spread-radius color;
  • offset-x / offset-y：影の水平方向・垂直方向のずれを指定します。正の値は右・下方向、負の値は左・上方向に影が移動します。
  • blur-radius：影のぼかし具合を指定します。値が大きいほど柔らかくぼやけた影になります（省略可能）。
  • spread-radius：影の広がりを指定します。正の値で影が拡大し、負の値で縮小します（省略可能）。
  • color：影の色を指定します。省略した場合はcurrentColorが適用されます。

実装例

以下のコードでは、見出し要素（h2）に対してbox-shadowプロパティを適用し、影を表示しています。

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        box-shadow: 10px 10px;
        height: 50px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>Heading Two</h2>
    <p>上の見出しには影が付いています。</p>
  </body>
</html>

ぼかしと色を加えた応用例

ぼかし半径と色を指定すると、より自然で洗練された影になります。

h2 {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}

このようにbox-shadowプロパティを活用することで、カード型レイアウトやボタンなど、さまざまなUI要素に立体感を与えることができます。複数の影をカンマ区切りで重ねて指定することも可能なので、用途に合わせて柔軟に調整してみてください。

  1. CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説

    CSSの子結合子（child combinator）は、親要素の直下にある子要素のみを選択するために使用します。記号「>」を用いて表現します。子結合子の基本的な構文は以下の通りです。セレクタ > セレクタ { プロパティ: /*値*/; }一方、子孫結合子（descendant combinator）は、親要素に含まれるすべての子孫要素（子・孫・ひ孫など、階層の深さに関係なく）を選択します。セレクタ同士を半角スペースで区切って記述します。子孫結合子の基本的な構文は以下の通りです。セレクタ セレクタ { プロパティ: /*値*/; }使用例1：子結合子の基本的な使い方

  2. CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説

    CSSには、同じ親要素を持つ「兄弟要素」を選択するための結合子が2種類用意されています。1つは隣接兄弟結合子（+）、もう1つは一般兄弟結合子（~）です。それぞれの動作の違いを理解して、目的に応じて使い分けましょう。 隣接兄弟結合子（+）とは 隣接兄弟結合子（+）は、最初のセレクタで指定した要素の直後に隣接している要素だけをマッチさせたい場合に使用します。2つのセレクタは、必ず同じ親要素の子要素である必要があります。 CSSにおける隣接兄弟結合子の構文は以下の通りです。 Selector + Selector { attribute: /*値*/ } 一般兄弟結合子（~）とは 一方、2つ