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

2010.03.08

経営・マネジメント

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

安田 英久
株式会社インプレスビジネスメディア Web担当者Forum編集長

今日は、Webページの作り方に関して、ちょっとした細かい話を。ページに画像を入れるときに、[b]imgタグ[/b]の「[b]文字の色[/b]」を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;
}
-----------------------------------------------

次のページページ表示に余分な時間が(多少)かかってしまいます

続きは会員限定です。無料の読者会員に登録すると続きをお読みいただけます。

Ads by Google

この記事が気に入ったらいいね!しよう
INSIGHT NOW!の最新記事をお届けします

安田 英久

安田 英久

株式会社インプレスビジネスメディア Web担当者Forum編集長

企業のウェブサイト活用やウェブマーケティングに関するメディア「Web担当者Forum」(http://web-tan.forum.impressrd.jp/)を運営しています。

フォロー フォローして安田 英久の新着記事を受け取る

一歩先を行く最新ビジネス記事を受け取る

ログイン

この機能をご利用いただくにはログインが必要です。

ご登録いただいたメールアドレス、パスワードを入力してログインしてください。

パスワードをお忘れの方

フェイスブックのアカウントでもログインできます。

INSIGHT NOW!のご利用規約プライバシーポリシーーが適用されます。
INSIGHT NOW!が無断でタイムラインに投稿することはありません。