box-shadowで表現力UP！CSS影のデザインテクニック

この記事では、CSSで影を使いこなしてデザインの表現力を上げることができます。Google推奨のマテリアルデザインとも関連している要素を使用例と合わせて解説していきます。

要素を際立たせるデザインテクニックを取り入れましょう！

box-shadowプロパティの構造

box-shadowの基本的な構造は次の通りです。

• box-shadow:
  横オフセット 縦オフセット ぼかし半径 拡散半径 色;
• 横オフセット(offset – x):　1つ目の数値
  影の水平方向のオフセット
• 縦オフセット(offset – y):　2つ目の数値
  影の垂直方向のオフセット
• ぼかし半径(blur – radius):　3つ目の数値
  影のぼかし程度。値が大きいほどぼかしが強くなります
• 拡散半径(spread – radius):　4つ目の数値
  影の拡散の程度。値が大きいほど影が広がります
• 色(color):
  影の色

/* offset - x | offset - y | color */
box-shadow: 5px 5px black;

/* offset - x | offset - y | blur - radius | color */
 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

/* offset - x | offset - y | blur - radius | spread - radius | color */
 box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.3);

• 影の種類:
  box-shadowを使用して作成できる影にはいくつかの種類があります。内側の影（inset）や、通常の外側の影などがあります。内側の影を作成する場合、最初に inset キーワードを使用します。

/* inset | offset - x | offset - y | color */
box-shadow: inset 5px 5px black;

影(box-shadow)の使用例

box-shadowに与えられた数値は順番によって判別します。

ぼかし半径を加えたい場合は必ず3番目、拡散半径を加えたい場合は必ず4番目である必要があります。

以下は簡単な例です。

基本的な影の追加

.box {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  box-shadow: 5px 5px 0px 10px rgba(0, 0, 0, 0.3);
}

この例では、要素 .box に 5px右方向、5px下方向のオフセットを持つ、0pxのぼかし半径と10pxの拡散半径を持つ影が追加されます。

複数の影の追加

box-shadowは複数の影を同時に追加することができます。

コンマで区切って複数の影を定義し、最後の影が最前面に表示されます。

これによって要素に奥行きをもたせることができます。

See the Pen Multipul Shadows by Urufu (@urufu-note) on CodePen.

不具合への対処

CSSで影を追加したときに起こりがちな不具合を挙げていきます。

基本的な解決方法を提示していますので、試してみてください。

影が要素の外側にはみ出す場合

不具合:
box-shadowが要素の外側にはみ出してしまうことがあります。これは特に影の拡散半径が大きい場合に起こりやすいです。

解決方法:
overflow: hidden;を使用して、要素の外側に影がはみ出さないように制御します。

.box {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

要素の背景と影の色が干渉する場合

不具合:
要素の背景色と影の色が干渉して、意図しないデザインになることがあります。

解決方法:
背景と影の色を適切に調整してコントラストを保ち、明確に影を表示します。必要に応じて影の色をRGBA形式で設定して透明度を調整することもできます。

.box {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

影がテキストや要素の上に重なる場合

不具合:
要素のテキストや他のコンテンツと影が重なり、読みづらくなることがあります。

解決方法:
z-indexプロパティを使用して、テキストやコンテンツが影よりも前面に表示されるように制御します。

.box {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

これらの不具合と解決方法を意識することで、box-shadowを効果的に使用してデザインを制御できるようになるでしょう。

マテリアルデザインへの応用

マテリアルデザインは、Googleが提唱したデザイン手法であり、現代のウェブデザインに広く採用されています。

その特徴的な要素の1つは、要素間の陰影（シャドウ）の使用です。

CSSの影を駆使してマテリアルデザインをどのように表現するかを紹介します。

カードの影を作成する

カードの影:
カードはマテリアルデザインにおいて頻繁に使用される要素です。カードに影を追加して、浮遊感を演出しましょう。

See the Pen Untitled by Urufu (@urufu-note) on CodePen.

【Run Pen】を押してみてください。浮遊感を感じる要素が見えたのではないでしょうか？

実は背景と要素は同色（#FFFFF）なのです。影を用いるだけで浮遊感を与えることができます。

フローティングアクションボタン（FAB）の影を作成する

FABの影:
FABはアクションを促すためのボタンで、浮遊感を持たせることが重要です。

See the Pen FAB by Urufu (@urufu-note) on CodePen.

このコードは、「＋」のアイコンを持つFABを表示するものです。

FABにはホバーアニメーションが追加されており、カーソルがFABの上に重なると背景色が変化し、少し浮き上がるような効果があります。

右下などで常に表示しておくと、閲覧者がアクションを起こしやすくなります。

影を使いこなしてデザインの幅を広げよう！

以上が、影のデザインに関するCSSの基本的なテクニックの紹介です。

CSSのbox-shadowプロパティは、要素に奥行きや立体感を加え、デザインをより魅力的にすることができます。

また、上手に影を活用することで、簡単にマテリアルデザインの要素を作成することができます。

影の位置や強さ、色などを調整することで、ウェブアプリケーションやウェブサイトに現代的な雰囲気を持たせることができます。

これらの影のテクニックを組み合わせて、独自のデザインを創造する楽しみをぜひ体験してみてください！