【web制作に役立つ】コーディングを学ぶ!「画像を表示する方法」を調べてみた②

alt属性とtitle属性

alt属性

alt属性とは、画像の代わりになるテキスト情報です。

下記のように記述することで、万が一画像が表示されなくても、「alt=””」のなかに書いたテキストが画像の代わりに説明してくれます。

<img src="gazou.jpg alt="猫の写真">

こんなメリットがあります。

  • 検索エンジンにコンテンツの内容を正確に伝えられる
  • 画像は表示できない場合、入力した代替コメントが表示され、テキストで画像の内容を補完してくれたり、音声読み上げ機能を使用した際の読み上げテキストとして役立ったりします。



こんなときは記述しなくてもOK

alt属性は基本的に記述したほうがいいとされていますが、例えば意味をもたない装飾目的で使われる画像などは「alt=””」は記述した上で、””の中を空白にしておきましょう。

title属性

画像の説明を補足したい…という時は、下記のように記述することで、画像にカーソルをマウスオーバーしたときにそのテキストが表示されます。

(記述は任意)

<img src="gazou.jpg alt="猫の写真" title="猫">


alt属性とtitle属性の違い

2つの属性にはこんな違いがあるようです。

alt属性と類似した言葉にtitle属性があります。ここで注意しておきたいのは、alt属性が画像の代替テキストであるのに対して、title属性は画像に対して助言的説明をするものだということです。
簡単にいってしまうとalt属性は画像そのものを指し示すのに対し、titleは補足説明を示してくれます。

一般的なブラウザでは、title属性を記述した画像の上にカーソルをのせると、吹き出しが表示され、その吹き出しに画像の補助的説明が表示されます。
さらにもう一つの違いとして、alt属性は画像以外には設定できませんが、title属性は画像やテキストなどすべての要素に設定することができます。

https://digitalidentity.co.jp/blog/seo/lecture-alt-attribution.html


width属性とheight属性

この2つの属性は画像のサイズを指定することができます。

数値でサイズを指定することで、ページレンダリングの際のレイアウトシフトを防ぐことができます。

(記述は任意)

<img src="gazou.jpg alt="猫の写真" width="600" height="400">


まとめ

今回は「imgタグ」についてさらに調べてみました!

記述する内容は知っていても、「なんのために」「どんな効果があるのか」など記述すべき理由を知らない属性もあったので、大変勉強になりました!

コメント

タイトルとURLをコピーしました