• Home
  • Web制作
  • 【CSS】影付けの達人になろう！box-shadowを使いこなす方法を徹底解説

【CSS】影付けの達人になろう！box-shadowを使いこなす方法を徹底解説

schedule update
Tags: CSS

はじめに：CSSで影付けをマスターしよう！

Webサイトのデザインにおいて、要素に影を付けることは、奥行きと立体感を演出し、視覚的に魅力的なページを作成する上で非常に効果的です。CSSのbox-shadowプロパティを使うことで、要素に対して簡単に美しい影を付けることができます。

本記事では、box-shadowプロパティの基本的な使い方から、応用的なテクニックまでご紹介します。これを読めば、あなたも影付けの達人になれること間違いなしです。ぜひ最後まで読んで、box-shadowをマスターしましょう。

あわせて読みたい
【CSS入門】Webページを彩るスタイルシートの基本から応用まで徹底解説！

1. box-shadowの基本 syntax

box-shadowプロパティは、以下の基本的な構文で指定します。

box-shadow: offsetX offsetY blurRadius spreadRadius color inset;

それぞれの値は、以下の意味を持ちます。

  • offsetX：水平方向の影の位置を表します。正の値で右方向、負の値で左方向に影が移動します。単位はピクセル(px)やemなどを指定できます。
  • offsetY：垂直方向の影の位置を表します。正の値で下方向、負の値で上方向に影が移動します。単位はoffsetXと同様に指定できます。
  • blurRadius：影のぼかし具合を表します。値が大きいほど影がぼやけます。省略した場合は0となり、ぼかしのないシャープな影になります。
  • spreadRadius：影の広がりを表します。正の値で影が大きく広がり、負の値で影が縮小します。省略した場合は0となり、影のサイズは変わりません。
  • color：影の色を表します。任意の色指定方法(カラーネーム、16進数、rgbなど)で指定できます。省略した場合は、ブラウザのデフォルト値(多くの場合は黒)が適用されます。
  • inset：影を要素の内側に落とす場合に指定します。省略した場合は、要素の外側に影が落ちます。

2. すぐに使える！box-shadowの実践例

box-shadowの基本的な使い方を理解したところで、具体的な使用例を見ていきましょう。

2-1. ボタンに立体感を出す

Sample

ボタンに影を付けることで、クリックできる要素であることをわかりやすく表現できます。

.shadow-button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

上記コードでは、offsetXとoffsetYを2px、blurRadiusを5px、colorを半透明の黒(rgba(0, 0, 0, 0.3))にすることで、右下方向に少しぼかした影を付けています。

2-2. 画像を際立たせる

画像に影を付けることで、背景から浮き上がって見える効果があります。

.image-container {
  width: 300px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.image-container img {
  width: 100%;
  height: auto;
}

上記コードでは、offsetXとoffsetYを0px、blurRadiusを10px、colorを半透明の黒(rgba(0, 0, 0, 0.5))にすることで、画像全体をぼかした影で囲っています。

3. box-shadowをもっと活用する！応用テクニック

box-shadowは、基本的な使い方以外にも、様々な表現が可能です。ここでは、より高度な表現を実現するための応用テクニックを紹介します。

3-1. 複数影の作り方

box-shadowでは、カンマ区切りで複数の影を指定することができます。

.multiple-shadow {
  box-shadow: 
    3px 3px 5px rgba(0, 0, 0, 0.3), /* 影1 */
    -3px -3px 5px rgba(255, 255, 255, 0.8); /* 影2 */
}

上記コードでは、右下方向にグレーの影と、左上方向に白の影を組み合わせて、立体感を強調しています。

3-2. 影の色を工夫する

影の色は、黒やグレーだけでなく、他の色を使うことも可能です。背景色との組み合わせによって、全く異なる印象を与えることができます。

.colored-shadow {
  background-color: #f0f0f0;
  box-shadow: 5px 5px 10px #007bff; /* 青色の影 */
}

上記コードでは、薄いグレーの背景に、青色の影を付けることで、スタイリッシュな雰囲気を演出しています。

3-3. insetを使って内側に影を落とす

insetキーワードを使うことで、影を要素の内側に落とすことができます。

.inset-shadow {
  background-color: #f0f0f0;
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

上記コードでは、薄いグレーの背景に、内側に影を落とすことで、凹んだような表現をしています。

4. box-shadowを使いこなして、ワンランク上のデザインを！

本記事では、CSSのbox-shadowプロパティの使い方について解説しました。box-shadowは、簡単な記述で要素に影を付けることができ、Webページのデザインをより豊かにする効果があります。

基本的な使い方から応用テクニックまでマスターして、box-shadowを使いこなし、魅力的なWebページを作成しましょう！

関連記事