編集長ブログ―安田英久
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/

この記事が役に立ったらシェア!
tweet6このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
SEOやアクセス解析のなどノウハウをゲット
事例やインタビューも見逃さない
要チェックのセミナー情報も届く
編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
SEOやアクセス解析のなどノウハウをゲット
事例やインタビューも見逃さない
要チェックのセミナー情報も届く
編集長コラムを一足先に読める

今日の用語

ユーザビリティ
一般的には、Webサイトやソフトウェアなどの操作性や使いやすさを示す言葉。 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスHP Softwareトランスコスモス株式会社株式会社ハイパーボックスDomain Keeperアドビ システムズ 株式会社
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社SitecoreYahoo!プロモーション広告Oracle