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

サイト構築 -CSS

Post on:2016年3月15日

img要素の2つのポイント

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

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

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

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

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

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

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

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

基本のHTML

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

<img src="http://bitsofco.de/broken.jpg" alt="Kanye Laughing">

1	<img src="http://bitsofco.de/broken.jpg" alt="Kanye Laughing">

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

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

img {  
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

img {

font-family: 'Helvetica';

font-weight: 300;

line-height: 2;

text-align: center;

width: 100%;

height: auto;

display: block;

position: relative;

}

img:before {

content: "We're sorry, the image below is broken :(";

display: block;

margin-bottom: 10px;

}

img:after {

content: "(url: " attr(src) ")";

display: block;

font-size: 12px;

}

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

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

img { /* Same as first example */ }

img:after {  
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

img { /* Same as first example */ }

img:after {

content: "\f1c5" " " attr(alt);

font-size: 16px;

font-family: FontAwesome;

color: rgb(100, 100, 100);

display: block;

position: absolute;

z-index: 2;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #fff;

}

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

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

img {  
  /* Same as first example */
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "\f127" " Broken Image of " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}