1ヶ月前に投稿

画像に指定したURLが存在しない時の壊れた画像表示をスタイル設定する方法

この記事は約 4 分で読めます。

4.5

とても興味深い記事なのですが
イマイチ理解できず、
kachibito.netさんの記事でやっと
分かりました。

はじめに

img には擬似要素が使えないって知ってましたか?
お恥ずかしい話ですが、わたしは知りませんでした。
さらに、画像が読み込まれていない場合は適用される
って事も初めて知りました。

img には擬似要素が使えない

imgなどの閉じタグのないものには
擬似要素が使えないそうです。

なぜ? 閉じタグがないと使えない?
閉じタグのない要素は カラ要素だと
判断されるため、仕様的に
擬似要素が適用できないと言う事らしいのです。

ただし、画像が読み込まれていない場合は適用される

  • You can use pseudo-elements on broken images.
    Typically ::before and ::after elements won’t work on images, however, when image is not loaded this elements can appear.
  • 壊れた画像に疑似要素を使用できます。
    通常、:: before要素と:: after要素は画像では機能しませんが、画像が読み込まれていない場合は、この要素が表示される可能性があります。

code

HTML

<img src="https://example.com/piyopiyo.jpg" alt="broken images">
<hr>
<img class="broken_images" src="https://example.com/hogehoge.jpg" alt="画像ないじゃん">
<hr>
<img class="broken_images" src="http://placekitten.com/300/300" alt="Cat Images">

CSS

.broken_images {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-weight: 300;
  line-height: 2;
  text-align: center;
  min-width: 300px;
  min-height: 50px;
  position: relative;
}

.broken_images::before {
  content: '';
  width: 100%;
  height: calc(100% + 10px);
  background-color: #ccc;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: -2px;
  transform: translateY(-50%);
}

.broken_images::after {
  content: "\2639" " " attr(alt);
  font-size: 18px;
  color: rgb(100, 100, 100);
  display: block;
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0;
  width: 100%;
  height: 100%;
}

結果

Really ?

1.
broken images
2.
画像ないじゃん
3.
Cat Images
  • いちばん上が画像のURLが存在しない場合に表示されるやつ。
  • 2番目がスタイルを適用して画像が無い場合。
  • 3番目がスタイルを適用して画像がある時。

何もしなければ1番目の表示になります。
スタイルを適用すると
2番目のように任意のスタイルで表示されます。
スタイルを適用した場合でも
3番目のように画像があれば影響を受けません。

Firefoxの挙動

  1. altがあると壊れた画像マークが表示されない。
  2. altがあるとaltの中身が表示されてしまう。
Firefoxの挙動

HTML に alt を書かないで、
↓ 見たいな感じがよいのかな?

<img src="https://example.com/piyopiyo.jpg">
<hr>
<img class="broken_images" src="https://example.com/hogehoge.jpg">
<hr>
<img class="broken_images" src="http://placekitten.com/300/300" alt="Cat Images">
content: "\2639" " " attr(alt);
     ↓
content: "画像ないじゃん";

最後に

今回、たいへん勉強になりました。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

画像に指定したURLが存在しない時の壊れた画像表示をスタイル設定する方法