img（画像）には文字色を指定しよう（そう、文字の色を）

今日は、Webページの作り方に関して、ちょっとした細かい話を。ページに画像を入れるときに、imgタグの「文字の色」をCSSで指定しておきましょう。画像に文字色？ と思ったあなた、ちゃんと理由があるのです。

なぜ画像なのに「文字の色」を指定しなければいけないのでしょうか。それは、画像が表示されない状態では画像のaltテキストが表示されるため、その状態での表示をおかしくない状態にするためです。

念のために説明しておくと、altテキストとは、imgタグで画像の簡単な説明をテキスト記述するものです。HTMLの用語では「alt属性」と呼ばれ、img要素には必ず記述することとされています。altテキストはふつうにブラウザでページを見ているときには関係ありませんが、画像を解釈できない検索エンジンや視覚障害者が使うテキスト読み上げブラウザにとっては、そこに何が示されているのかを理解するのに重要です。

しかし、alt属性が表示されるシチュエーションはほかにもあります。iPhoneやイー・モバイルなどを使ってモバイル環境からウェブにアクセスする人にもaltテキストは関係があります。モバイル環境では通信速度が（オフィスなどに比べると）遅いため、画像の表示をオフにしている場合があるのです。そうすると、画像のあるべき場所にはaltテキストが表示されます。また、画像をオフにしていなくても、通信が遅くて画像が読み込まれるまで時間がかかる場合は、altテキストが表示された状態になります。

そういった状況で、多少なりともaltテキストを読んで理解してもらうためにも、img要素の文字色を設定しておくべきなのです。特に濃い背景に画像だけを置いている場所などでは、altテキストが標準の文字色で表示されると読みづらくなる場合もあるでしょうから、しっかりと文字色を指定しておきましょう（標準では画像のaltテキストは親要素の文字色が使われます）。

画像のaltテキストが表示された際の色を設定するには、CSSで次のようにします。

img{
    /* 黒背景だとして文字を白色にする場合 */
    color: #ffffff;
}

ほかにも、ロゴ画像のaltテキストなら、ロゴに近いフォントや太字にして、背景色にもロゴの色と同様の色を指定しておくといいでしょう。

#logo img{
    /* Web担のロゴなら背景ピンクで文字は白、太字で大きく */
    background-color: #EC6089;
    color: #ffffff;
    font-weight: bold;
    font-size: 2em;
}

ロゴ画像が正しく表示されている状態

画像のaltテキストが表示されている状態

altテキストにスタイルを指定した状態

また、画像にはwidth属性（幅）とheight属性（高さ）で正しく画像のサイズを指定するようにしましょう。

widthとheightは省略してもブラウザが適切に設定してくれますが、ブラウザにこの処理をさせると、画像を読み込んでからHTMLの表示を調整していくため、ページ表示に余分な時間が（多少）かかってしまいます。また、altテキストだけが表示されてもレイアウトが崩れないようにするためにも、widthとheightを指定しておくのがいいでしょう。

ということで、

• 検索エンジンやモバイルを考慮して画像にはaltテキストを設定する
• altテキストが表示される場合も考慮してimg要素の文字スタイルをCSSで指定する
• ページ表示のパフォーマンスとaltテキスト表示のレイアウトを考慮して画像にはwidthとheightを指定する

ようにするといいのではないでしょうか。

ちなみに、この記事は456 Berea Streetの次の記事がネタ元となっています。

Specify a text colour for img elements | 456 Berea Street
http://www.456bereastreet.com/archive/201002/specify_a_text_colour_for_img_elements/