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

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

CSSの box-shadow プロパティを使用すると、要素に影の効果を簡単に追加できます。影はボックスの周囲に描画され、Webページに立体感や奥行きを持たせたいときに非常に便利です。

box-shadowの基本構文

box-shadow: offset-x offset-y blur-radius spread-radius color;
  • offset-x / offset-y： 影の水平・垂直方向のオフセット。正の値は右・下へ、負の値は左・上へ移動します。
  • blur-radius： 影のぼかし具合。値が大きいほど柔らかい影になります（省略時は0）。
  • spread-radius： 影の広がり具合。正の値で拡大、負の値で縮小します（省略可能）。
  • color： 影の色。省略した場合はブラウザの既定色が適用されます。

サンプルコード

以下は、box-shadowプロパティを使ってdiv要素に影を追加する例です。

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: red;
            box-shadow: 10px 10px;
         }
      </style>
   </head>
   <body>
      <div>これはbox-shadowが適用されたdiv要素です</div>
   </body>
</html>

表示結果

このコードを実行すると、赤い背景のdiv要素の右下方向に「10px 10px」の位置へ黒い影が表示されます。blur-radiusを指定していないため、輪郭のはっきりしたシャープな影になります。

より自然な影にするには

実際のWebデザインでは、ぼかし半径と色を指定することで、より柔らかく自然な影を作れます。

div {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

このように rgba() を使えば半透明の影も表現でき、背景になじむ美しい演出が可能になります。また、カンマ区切りで複数の影を重ねて指定すれば、さらに立体的な表現も実現できます。

  1. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ