画像に影をつけると縁が白くなる現象【box-shadow】

f:id:soybeans6:20210923053149p:plain

突然ですが、あなたはこの２枚の画像の違いがわかりますか？

f:id:soybeans6:20210921182805j:plain

f:id:soybeans6:20210921182809j:plain

画像に影をつけたら縁が白くなってしまった

この記事では、こんな悩みを解説します。

記事の内容

画像にbox-shadowで影をつける時は、classをimgタグに追加する

ポイント

見た目の違い
HTML/CSSの違い

見た目の違い

２枚の画像を見比べると、犬の画像の下に白い縁があるのがわかると思います。

f:id:soybeans6:20210921182805j:plain

f:id:soybeans6:20210921182809j:plain

わかりやすくする為に、もう少し画像のサイズを小さくしてみます。

f:id:soybeans6:20210921182805j:plain

f:id:soybeans6:20210921182809j:plain

サイズ：80%

サイズを小さくすると、より違いが浮き彫りになりましたね。

犬の画像は、白い縁の周りに影がついているのに対し

猫の画像は、綺麗に画像の周りだけに影ができています。

HTML/CSSの違い

２枚の画像の違いは、classを追加したタグが違うことにあります。

今回は例として、box-shadowのclass名をkageとします。

box-shadowの書き方

CSS


/* box-shadowで影をつける */

.〇〇 {
  box-shadow: 左右の向きpx  上下の向きpx ぼかしpx 広がりpx 色 内側指定;
}

/* 例 */

.kage {
  box-shadow: 0 0 8px gray;
}

では、class="kage"がHTMLのどのタグに追加されているか見てみましょう。

class="kage"を追加するタグの違い

HTML


<!---- 犬の画像 ---->
<!---- <p class="kage"> ---->

<p class="kage"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/soybeans6/20210921/20210921182805.jpg" alt="f:id:soybeans6:20210921182805j:plain" width="1200" height="800" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></p>

HTML


<!---- 猫の画像 ---->
<!---- <img .... class="hatena-fotolife kage" .... > ---->

<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/soybeans6/20210921/20210921182809.jpg" alt="f:id:soybeans6:20210921182809j:plain" width="1200" height="800" loading="lazy" title="" class="hatena-fotolife kage" itemprop="image" /></p>

class="kage"を追加したタグを見ると

犬は、手前の「段落タグ」の中。

<p class="kage">

猫は、「イメージタグ」の中。

<img .... class="hatena-fotolife kage" .... >

となっているのがわかりました。

タネがわかればなんということはなかったですね。

画像にbox-shadowで影をつける時は、classをイメージタグに追加しましょう。