ワンランク上のコーダーは万が一の配慮も欠かさない、リンク切れの画像要素をスタイルするテクニック

通常はお目にかかれませんが、リンク切れの画像があるのはいただけませんね。
画像がリンク切れだと、こんな風に表示されてしまいます。

もちろんリンク切れがないのがベストですが、絶対に存在しない訳ではありません。
よりよいユーザエクスペリエンスを提供するために、リンク切れの画像要素にスタイルを定義しておくことができます。

Styling Broken Images

以下、各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• img要素の2つのポイント
• リンク切れの画像要素のスタイル
• ブラウザのサポート状況

img要素の2つのポイント

リンク切れの画像要素をどのようにスタイルすることができるか理解するために、最初に理解しておくべきimg要素の2つのポイントがあります。

1. img要素に通常の文字関連のスタイルを定義できます。

   定義したスタイルは代替テキスト(alt)に適用され、画像自体には影響を与えません。

2. img要素は置換要素です。

   「置換要素とは外部リソースによって外観とサイズが定義されたものです(Sitepoint)。」どういうことかと言うと、この要素は外部リソースによってコントロールされるため、通常:beforeや:afterなどの疑似要素は機能しません。
   しかし、外部リソースである画像が正常に読み込まれない時には、疑似要素を利用することができます。

この2つのポイントにより、スタイルは画像がリンク切れの時だけ利用することができます。もちろん、通常の画像には一切影響はありません。

リンク切れの画像要素のスタイル

では、さっそくリンク切れの画像要素をスタイルしてみましょう。

リンク切れ用スタイルは、リンク切れの時のみ適用されます。
リンク切れでない時は、通常通りに画像が表示されます。疑似要素も前述の仕様のため、生成もされません。

基本のHTML

画像は通常通りにimg要素で配置しますが、ここではリンク切れの状態です。

ユーザーの役に立つ情報を加える

リンク切れの画像をスタイルする時の一つの方法は、ユーザーの役に立つ情報を提供することです。画像がリンク切れで表示されてないメッセージを表示し、attr()式でリンク切れの画像のURLを表示します。

デフォルトの代替テキストを置換

疑似要素を使って、altの代替テキストを置換することもできます。代替テキストは一度非表示にし、疑似要素でデフォルトのテキストの上に置いて表示します。

リンク切れの画像をデザインしてみる

リンク切れの画像が表示されてしまった場合の壊れた画像や代替テキストをすべてスタイルすることもできます。

ブラウザのサポート状況

すべてのブラウザで同じように、リンク切れの画像を扱うわけではありません。いくつかのブラウザでは、画像が表示されない（外部リソースがロードされない）時でも、疑似要素は機能しません。疑似要素をサポートしないブラウザでは、適用したスタイルは無視され、通常のリンク切れの状態で表示されます。

ブラウザのサポート状況

*

alt内の代替テキストが表示されるためには、img要素に幅を指定する必要があります。img要素に幅指定が無い場合は、代替テキストを表示されません。

**

代替テキストにフォントのスタイルは適用されません。

Styling Broken Images