【CSS】ドロップシャドウ完全マスター！7つの応用例で徹底解説

はじめに

Webデザインでは、デザインのアクセントや要素を際立たせるために、ドロップシャドウがよく使用されます。

しかし、初心者にとっては、どのようにしてこの効果を実現するのか分からないことが多いでしょう。

この記事では、CSSドロップシャドウの作り方、使い方、対処法を初心者向けに徹底解説し、サンプルコードや応用例を交えながら、ドロップシャドウを完全にマスターするための方法をお伝えします。

●基本的なドロップシャドウの作り方

まずは、基本的なドロップシャドウの作り方から始めましょう。

CSSでドロップシャドウを実現するには、box-shadowプロパティを使用します。

.box {
  width: 200px;
  height: 200px;
  background-color: #ff6347;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

このコードでは、.boxというクラス名の要素に、横方向に5px、縦方向に5pxずれた場所に10pxのぼかしを持つ黒色（透明度0.5）のドロップシャドウが適用されます。

●ドロップシャドウの使い方

それでは、ドロップシャドウの使い方について解説します。

○シャドウのぼかしを調整する

ぼかしの大きさを変えることで、シャドウの印象を変えることができます。

ぼかしの大きさは、box-shadowプロパティの第3引数で指定します。

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

このコードでは、ぼかしの大きさが20pxになっており、より柔らかい印象のシャドウが描かれます。

○シャドウの色と透明度を変更する

シャドウの色や透明度を変更することで、デザインの雰囲気を調整できます。

色と透明度は、box-shadowプロパティのrgba値で指定します。

.box {
  box-shadow: 5px 5px 10px rgba(255, 0, 0, 0.3);
}

このコードでは、シャドウの色が赤色になり、透明度が0.3に設定されています。

これにより、軽やかな印象のシャドウが描かれます。

○シャドウを内側に描画する

シャドウを要素の内側に描画することで、立体感や凹んだ印象を与えることができます。

内側のシャドウは、box-shadowプロパティにinsetを追加することで実現できます。

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

このコードでは、シャドウが要素の内側に描かれ、凹んだ印象が生まれます。

●ドロップシャドウの応用例とサンプルコード

ここからは、実際にドロップシャドウを応用したデザインの例を紹介していきます。

○テキストにドロップシャドウを適用する

テキストにシャドウを付けることで、読みやすさや立体感を強調できます。

テキストにドロップシャドウを適用するには、text-shadowプロパティを使用します。

h1 {
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

このコードでは、h1要素のテキストに、横方向に3px、縦方向に3pxずれた場所に5pxのぼかしを持つ黒色（透明度0.5）のシャドウが適用されます。

○カードデザインにドロップシャドウを適用する

カードデザインにドロップシャドウを適用することで、各カードの重要性や立体感を強調できます。

.card {
  width: 200px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

このコードでは、.cardというクラス名の要素に、縦方向に4pxずれた場所に6pxのぼかしを持つ黒色（透明度0.1）のドロップシャドウが適用されます。

○ボタンにドロップシャドウを適用する

ボタンにドロップシャドウを適用することで、押下感や立体感を表現できます。

.button {
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

このコードでは、.buttonというクラス名の要素に、縦方向に2pxずれた場所に4pxのぼかしを持つ黒色（透明度0.2）のドロップシャドウが適用されます。

○画像にドロップシャドウを適用する

画像にドロップシャドウを適用することで、画像が浮かび上がるような印象を与えられます。

img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

このコードでは、img要素に、縦方向に4pxずれた場所に8pxのぼかしを持つ黒色（透明度0.3）のドロップシャドウが適用されます。

○複数のシャドウを重ねる

複数のシャドウを重ねることで、よりリッチな表現が可能になります。

.box {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.1);
}

このコードでは、.boxというクラス名の要素に、2つのシャドウが重ねられて適用されます。

○ホバーエフェクトでシャドウを変化させる

マウスオーバー時にシャドウを変化させることで、インタラクティブなエフェクトを実現できます。これにより、ユーザーが要素に対してアクションを起こしやすくなります。

.button {
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}

.button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

このコードでは、.buttonというクラス名の要素に、マウスオーバー時にシャドウが大きくなるエフェクトが適用されます。

○ドロップシャドウを角丸にする

シャドウの角を丸くすることで、柔らかい印象を与えることができます。

.box {
  width: 200px;
  height: 200px;
  background-color: #ff6347;
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

このコードでは、.boxというクラス名の要素に、角丸のドロップシャドウが適用されます。

まとめ

この記事では、CSSドロップシャドウの基本的な作り方、使い方、対処法を初心者向けに徹底解説しました。

さらに、豊富なサンプルコードと7つの応用例を通じて、あなたもドロップシャドウを完全にマスターできるはずです。

問題の解決策として、box-shadowプロパティを使ったドロップシャドウの作成方法や、text-shadowプロパティを使ったテキストへのシャドウの適用方法など、様々な使い方を学ぶことができました。

これらの知識を活かし、あなたのWebデザインに立体感やアクセントを加えることで、より魅力的なコンテンツを作成できるでしょう。