CSS ボックスシャドウ 解説

CSSで要素の片側にボックスシャドウを付ける方法

日本語解説

CSSで要素の片側にボックスシャドウを付けるには、box-shadowプロパティを使用します。このプロパティは、要素の周囲に影を付けるためのスタイルを指定します。

基本的な構文

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

• color
  影の色。
• spread-radius
  影の拡がり。値が大きくなると影が大きくなります。
• blur-radius
  影のぼかしの半径。値が大きくなると影がぼやけます。
• offset-y
  影の垂直方向のオフセット。負の値は上側に、正の値は下側に影を付けます。

片側に影を付ける例

.element {
  box-shadow: 10px 0px 5px 0px #888888; /* 右側に影を付ける */
}

この例では、要素の右側に10ピクセルの水平オフセット、5ピクセルのぼかし半径、灰色(#888888)の影を付けています。

他の例

• 下に影を付ける
  box-shadow: 0px 10px 5px 0px #888888;

複数の影を付ける

複数の影を付ける場合は、box-shadowプロパティをカンマで区切って指定します。

.element {
  box-shadow: 5px 5px 5px #888888, -5px -5px 5px #cccccc;
}

この例では、要素の上右隅に灰色(#888888)の影を、下左隅に明るい灰色(#cccccc)の影を付けています。

注意

• 複雑な影効果が必要な場合は、複数の影を重ねたり、他のCSSプロパティと組み合わせて調整することができます。
• box-shadowプロパティは、要素の背景色やボーダーとの関係で表示されます。

CSS ボックスシャドウ 解説

CSSのbox-shadowプロパティは、要素の周囲に影を付けるためのスタイルを指定します。

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

.element {
  box-shadow: 10px 0px 5px 0px #888888; /* 右側に影を付ける */
}

.element {
  box-shadow: 5px 5px 5px #888888, -5px -5px 5px #cccccc;
}

画像を使用する:

• 欠点
  ファイルサイズが大きくなる可能性がある。
• 利点
  複雑な影効果やアニメーションを簡単に実現できる。

<img src="shadow.png" alt="Element with shadow">

SVG (Scalable Vector Graphics) を使用する:

• 欠点
  複雑な影効果を実装する場合はコードが長くなる可能性がある。
• 利点
  ベクター形式なので、拡大縮小しても画質が劣化しない。

<svg width="200" height="200">
  <rect x="0" y="0" width="100" height="100" fill="blue" stroke="black" stroke-width="2">
    <filter id="drop-shadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
      <feOffset dx="5" dy="5"/>
      <feComposite in="SourceGraphic" result="color-shadow"/>
      <feBlend in="SourceGraphic" in2="color-shadow" mode="multiply"/>
    </filter>
    <animate attributeName="filter" values="url(#drop-shadow); none" dur="1s" fill="freeze"/>
  </rect>
</svg>

JavaScript を使用する:

• 欠点
  性能に影響を与える可能性がある。

const element = document.getElementById('element');
element.style.boxShadow = '5px 5px 5px #888888';

CSS プリプロセッサを使用する:

• 欠点
  プリプロセッサを使用する必要がある。
• 利点
  複雑な影効果をより簡潔に記述できる。

.element {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}