画像(img)のaltが表示されない理由と対応方法を解説します。「画像にマウスを乗せてもaltのテキストが表示されない」のは普通の状態です。昔のブラウザではaltが表示されていたこともありましたが、最近のブラウザでは表示されません。下記はaltを設定していますがマウスを乗せてもテキストは表示されません。src="https://csshtml.work/wp-content/uploads/cat.jpg">まずはaltの意味を確認していきましょう。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むaltの意味altは「画像代替文字」です。3つの意味があります。意味1.画像のリンクが切れたときに表示される画像代替文字は画像のリンクが切れて表示されないときに画像の代わりに表示される文字です。逆に言えば画像がちゃんと表示されているなら表示されない文字です。下記はわざと画像のリンクを切った例です。altが表示されています。src="https://csshtml.work/wp-content/uploads/.jpg">意味2.目の見えない方が利用する画像代替文字は目の見えない方などがブラウザの読み上げ機能を使うときに読み上げられる文字です。目の見えない方は画像が見えないためaltで画像の内容を理解します。意味3.ロボットに伝える画像代替文字はロボットに画像の内容を伝える文字です。ここでいうロボットとはgoogle検索などの検索エンジンの周回ボットなどです。現時点ではロボットは画像内容を理解できないため、文字で伝える必要があります。いえ過信してはいけません。通常のテキスト程度と思っておきましょう。適切なaltとはaltのテキストを入力するときは「画像の代わりにどんなテキストが表示されていれば伝わるか」考えると適切なテキストがわかるでしょう。不要なのであれば下記のようにaltを空欄にできます。「そうはいっても画像の説明を伝えたいんだ!」というアナタへ、画像(img)の説明を表示させる方法を紹介します。「画像にマウスを乗せたとき、テキストを表示させたい」のであればtitle属性を設定しましょう。下記画像はtitle属性を設定した例です。マウスを乗せるとテキストが表示されます。src="https://csshtml.work/wp-content/uploads/cat.jpg">title属性を設定した場合でもaltは必要です。このtitleですが、基本的には不要です。方法2.テキストを掲載【オススメ】ユーザーはわざわざ画像の上にマウスを乗せて待っていてくれません。スマホの場合「マウスを乗せる」という行為ができません。よって画像の説明をしたいのであれば直接テキストを表示させることをオススメします。src="https://csshtml.work/wp-content/uploads/cat.jpg"><p>子猫が毛布にくるまっている様子</p>テキストを表示させるとき、altは空白にしましょう。altに同じ説明テキストを載せた場合、同じテキストが2度あることになり、日本語として不自然です。【まとめ】画像(img)のaltが表示されない理由と対応方法そもそもaltは表示されないのが普通。以上、画像(img)のaltが表示されない理由と対応方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。