画像に指定したURLが存在しない時の壊れた画像表示をスタイル設定する方法
この記事は約 4 分で読めます。
とても興味深い記事なのですが
イマイチ理解できず、
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%;
}
結果

2.

3.
- いちばん上が画像のURLが存在しない場合に表示されるやつ。
- 2番目がスタイルを適用して画像が無い場合。
- 3番目がスタイルを適用して画像がある時。
何もしなければ1番目の表示になります。
スタイルを適用すると
2番目のように任意のスタイルで表示されます。
スタイルを適用した場合でも
3番目のように画像があれば影響を受けません。
Firefoxの挙動
- altがあると壊れた画像マークが表示されない。
- altがあるとaltの中身が表示されてしまう。

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: "画像ないじゃん";
最後に
今回、たいへん勉強になりました。
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません