img(画像)には文字色を指定しよう(そう、文字の色を)初代編集長ブログ―安田英久img(画像)には文字色を指定しよう(そう、文字の色を)なぜ画像なのに「文字の色」を指定しなければいけないのでしょうか。noteで書くこれは広告です今日は、Webページの作り方に関して、ちょっとした細かい話を。ページに画像を入れるときに、imgタグの「文字の色」をCSSで指定しておきましょう。思ったあなた、ちゃんと理由があるのです。画像なのに「文字の色」を指定しなければいけないのでしょうか。それは、画像が表示されない状態では画像のaltテキストが表示されるため、その状態での表示をおかしくない状態にするためです。念のために説明しておくと、altテキストとは、imgタグで画像の簡単な説明をテキスト記述するものです。HTMLの用語では「alt属性」と呼ばれ、img要素には必ず記述することとされています。altテキストはふつうにブラウザでページを見ているときには関係ありませんが、画像を解釈できない検索エンジンや視覚障害者が使うテキスト読み上げブラウザにとっては、そこに何が示されているのかを理解するのに重要です。alt属性が表示されるシチュエーションはほかにもあります。iPhoneやイー・モバイルなどを使ってモバイル環境からウェブにアクセスする人にもaltテキストは関係があります。モバイル環境では通信速度が(オフィスなどに比べると)遅いため、画像の表示をオフにしている場合があるのです。すると、画像のあるべき場所にはaltテキストが表示されます。画像をオフにしていなくても、通信が遅くて画像が読み込まれるまで時間がかかる場合は、altテキストが表示された状態になります。いった状況で、多少なりともaltテキストを読んで理解してもらうためにも、img要素の文字色を設定しておくべきなのです。濃い背景に画像だけを置いている場所などでは、altテキストが標準の文字色で表示されると読みづらくなる場合もあるでしょうから、しっかりと文字色を指定しておきましょう(標準では画像のaltテキストは親要素の文字色が使われます)。画像のaltテキストが表示された際の色を設定するには、CSSで次のようにします。#ffffff;}ほかにも、ロゴ画像のaltテキストなら、ロゴに近いフォントや太字にして、背景色にもロゴの色と同様の色を指定しておくといいでしょう。画像のaltテキストが表示されている状態altテキストにスタイルを指定した状態また、画像にはwidth属性(幅)とheight属性(高さ)で正しく画像のサイズを指定するようにしましょう。widthとheightは省略してもブラウザが適切に設定してくれますが、ブラウザにこの処理をさせると、画像を読み込んでからHTMLの表示を調整していくため、ページ表示に余分な時間が(多少)かかってしまいます。altテキストだけが表示されてもレイアウトが崩れないようにするためにも、widthとheightを指定しておくのがいいでしょう。検索エンジンやモバイルを考慮して画像にはaltテキストを設定するaltテキストが表示される場合も考慮してimg要素の文字スタイルをCSSで指定するページ表示のパフォーマンスとaltテキスト表示のレイアウトを考慮して画像にはwidthとheightを指定するようにするといいのではないでしょうか。Streetの次の記事がネタ元となっています。「Web担当者Forum」初代編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開いる。現在は編集統括として媒体に携わる。個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。AdWordsが消滅、18年の歴史を終え「Google広告」へ。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。いいね!※記事へのコメント機能は2021年11月をもって終了しました。編集部へのご連絡は、問い合わせフォーム・メール・Twitterなどをご利用ください。広告が目指す戦略アドフラウド対策でCPA改善!「おとなの自動車保険」のデジタル広告が“損失1700万円”を克服するまで成功事例・失敗から学ぶWebサイトリニューアル。Plan(事業継続計画)の略。顧客理解のためのUXリサーチ実践講座~インタビュー・ネットリサーチから分析手法をワークショップで学ぶすべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。Web担主催のイベントに協賛しませんか?年4回実施している数百人~3,4千人規模の無料イベント。イベントに協賛して、新規のリード獲得・認知向上をしませんか。寄稿記事・取材の企画の募集はこちらWeb担に寄稿したい、取材してもらいたい、などの場合はこちらから情報提供お願いします。