CSSで疑似要素に影をつける方法｜box-shadowとfilter: drop-shadowの違いと使い分け

CSSで疑似要素に影をつける方法を解説します。

吹き出しの三角形に影をつけたいのに、box-shadow では四角い影になってしまうことがあります。

この問題は、box-shadow と filter: drop-shadow の違いを理解することで解決できます。特に、三角形や透過PNGのような複雑な形状には filter: drop-shadow が有効です。

この記事では、両者の特徴と使い分けを整理し、具体例を交えながらわかりやすく説明します。

疑似要素とは？CSSでの役割と基本

疑似要素は、HTMLに新しいタグを追加しなくてもCSSだけで装飾を足せる便利な機能です。主に装飾やレイアウトの微調整に使われ、デザインの幅を広げるのに役立ちます。

代表的な疑似要素

• ::before：要素の内容の前に仮想的なコンテンツを追加
• ::after：要素の内容の後に仮想的なコンテンツを追加

疑似要素の基本的な使い方

以下は、::beforeを使って要素の前に赤い■を追加する例です。

<div class="element">テキスト</div>

.element::before {
  content: "■";
  color: red;
  margin-right: 5px;
}

結果： .elementクラスの要素の前に赤い■が表示されます。
→　■ テキスト

• content プロパティは必須
• 疑似要素に表示する内容を指定（空文字でも可）

疑似要素に影をつける方法｜CSSで三角形や吹き出しに自然な影をつける

疑似要素に影をつける方法は主に2つあります。

• box-shadow：要素全体に四角い影をつける
• filter: drop-shadow：要素の形状に沿った自然な影をつける

吹き出しの三角形に自然な影をつけたい場合は、filter: drop-shadow を使用します。

影を加えると立体感が生まれ、デザインの完成度が高まります。ここからそれぞれの特徴と使い方を詳しく見ていきます。

CSSで影をつける方法①：box-shadowの基本と使い方

box-shadowとは？

box-shadowは、要素の外枠（ボックス）に影をつけるCSSプロパティです。ボタンやカード、吹き出しなどに立体感を加えるのに広く使われます。

box-shadowの基本構文

.element {
  box-shadow: h-offset v-offset blur spread color;
}

• h-offset：影の水平方向のずれ（正: 右、負: 左）
• v-offset：影の垂直方向のずれ（正: 下、負: 上）
• blur：影のぼかし半径（大きくするとふわっとした影に）
• spread：影の広がり（大きくすると影が拡大）
• color：影の色（例: rgb(0, 0, 0, 0.2)で透明度20%の黒）

box-shadowの使用例

吹き出しに影をつける例です。

.speech-balloon {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  position: relative;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

結果：吹き出し本体にさりげない影がつきます。

補足：box-shadowは複数影の重ね合わせやinset（内側影）にも対応しています。

box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.1);

疑似要素にbox-shadowを適用するとどうなる？

吹き出しの三角部分（::afterで作成）にbox-shadowを適用してみます。

.speech-balloon::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  border: 10px solid transparent;
  border-top-color: #fff;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

結果：三角部分に影をつけたつもりが、四角い影がついてしまい不自然に…。

原因：box-shadowは要素の外枠（矩形）に影をつけるため、疑似要素の形状（三角形など）を考慮しません。borderで作った三角形も内部的には四角いボックスとして扱われるためです。

CSSで影をつける方法②：filter: drop-shadowの特徴と適用例

filter: drop-shadowとは？

filter: drop-shadowは、要素の形状に沿った自然な影をつけるプロパティです。

drop-shadowは要素のアルファチャンネル（透明度情報）を基準に影を描画します。特に、透過PNG画像や疑似要素のような複雑な形状に適しています。

filter: drop-shadowの基本構文

.element {
  filter: drop-shadow(h-offset v-offset blur color);
}

• h-offset：影の水平方向のずれ
• v-offset：影の垂直方向のずれ
• blur：影のぼかし半径
• color：影の色

box-shadowではspread（影の拡大・縮小を制御する値）が指定できます。一方、filter: drop-shadowにはこの機能がありません。影は要素の形状に沿った表示部分のみに適用されます。

filter: drop-shadowの使用例

吹き出し全体（本体＋三角部分）に影をつける例です。

.speech-balloon {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  position: relative;
  filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.3));
}

.speech-balloon::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  border: 10px solid transparent;
  border-top-color: #fff;
}

結果：吹き出し本体と三角部分の両方に、自然な形状に沿った影がつきます。

drop-shadow成功例ポイント：filter: drop-shadowは親要素に適用すると、子要素や疑似要素にも影が反映されるため吹き出しのような複合的なデザインに最適です。

box-shadowとfilter: drop-shadowの違いを比較

box-shadowとfilter: drop-shadowはどちらも影をつけられますが、適用方法や結果に大きな違いがあります。以下に比較をまとめます。

項目	box-shadow	filter: drop-shadow
影の適用範囲	要素の外枠（矩形）に影をつける	要素の形状（透過部分を除く）に沿った影
疑似要素への適用	疑似要素に適用すると矩形の影になる	形状に沿った自然な影が可能
透過PNG画像	透過部分も含めて矩形の影	透過部分を無視して表示部分だけに影
複数影	複数影を重ねられる	複数影は重ねられない
パフォーマンス	軽量	やや処理負荷が高い

パフォーマンスについては、通常のWebサイトでは体感できる差はほとんどありません。

三角形や透過画像のような複雑な形状には drop-shadow、シンプルなボックス要素には box-shadow が適しています。

比較例：透過PNG画像に影をつける

以下の透過PNG画像に影を適用して比較します。

box-shadowの適用例

結果：要素の外枠に影がつき、不自然。

.image {
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

filter: drop-shadowの適用例

結果：要素の輪郭に沿った自然な影がつく。

.image {
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}

まとめ｜疑似要素の影付けにはfilter: drop-shadowが最適

• box-shadow
  • 要素全体に四角い影をつける。
  • 疑似要素に適用すると形状を無視した影になる。
  • ボタンやカードなど、シンプルな形状に適している。
• filter: drop-shadow
  • 要素の形状に沿った自然な影をつける。
  • 吹き出しの三角部分や透過PNG画像に最適。
  • 親要素に適用すれば、疑似要素にも自動で影が反映。
• 実践のポイント
  • 吹き出しのような複雑な形状にはfilter: drop-shadowがおすすめ。
  • デザインの幅を広げるために、影の位置やぼかしを試してみましょう！

影をつけたい要素のセレクタを調べる方法は、以下の記事を参考にしてください。