【HTML入門】 画像を表示するには
Webページで画像を表示するにはimgタグを利用します。
ただ画像を表示するだけでなく、alt属性を設定する、高さや幅を設定するなど、重要な項目を把握しましょう。
画像の表示の仕方
imgタグとsrc属性を用います。srcに表示したい画像のurlを書きます。
See the Pen html img by Totori (@souki202) on CodePen.
ここで、imgタグには閉じタグが存在しません!
閉じタグが無いタグでは, <img ... />のように、最後にスラッシュをつける事もできます。付けるか付けないかは好みで決めて良いと思います。企業であれば、コーディング規約や周りのコードと同じようにすればOKです。
入力できるリンクの種類はaタグのhref属性に入れた値と同じです。自分のWebサイト内の画像なら絶対パスがおすすめです。
画像が1枚あるWebページと画像そのもののページは異なるので注意しましょう。
alt属性
alt属性は、その画像がどのような画像かを言葉で説明するものです。これを設定する目的は、
- 画像が表示できないときに表示するため
- スクリーンリーダの読み上げのため
- 検索エンジンのクローラーに対して、どんな画像かを説明するため (SEO対策)
という3つが大きいです。画像リンクが切れていると、下のような表示になります。
See the Pen html noimg by Totori (@souki202) on CodePen.
画像がないことを示すアイコンとともに、テキストが表示されています。また、画像が存在しても、ネットの調子が悪いなどで画像が表示できない場合にも表示されます。
altタグはSEO対策としても必要ななため、事実上必須の属性です!
サイズを指定
imgタグには、直接サイズを入力することができます。
基本的にはCSSで指定することをオススメします。
See the Pen html img size by Totori (@souki202) on CodePen.
幅または高さのみを指定した場合、デフォルトではアスペクト比固定で拡大縮小されます。
幅と高さ両方を指定した場合、アスペクト比を無視して拡大縮小されます。
まとめ
画像を表示する際には、画像そのもののurlを指定します。同時に、画像が表示されないときや検索エンジンのクローラー向けにalt属性を設定することはほぼ必須です。
CSSの内容と合わせてより様々な画像表示ができるようになりましょう!
