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

CSSドロップシャドウの例、初心者がドロップシャドウを使いこなすためのポイントCSS
この記事は約6分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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デザインに立体感やアクセントを加えることで、より魅力的なコンテンツを作成できるでしょう。