【画像に関連する、タグ名・属性名・使い方】「HTML・解説・初心者向け」| ノブレコ
nobreco
画像表示に関する解説
この記事では、HTMLで「画像」を扱うことに関しての解説をしています。
主に画像に関するタグ名や属性名、使い方について紹介しています。
画像の表示形式一覧のあるよ。
参考程度によろしければ見ていってください！
画像表示させるタグ
HTMLに画像を表示するためには以下のようなタグを使用します。
<img>
imgはimageの略で、画像のことを指します。
※開始タグだけで使用するタグです。
① <img>に必須な属性として、src属性を使用します。
src属性とは――画像を表示するためのパスを指定する属性。
② 画像をテキストで説明するために、alt属性も使用します。（必要に応じて使用）
alt属性とは――何らかの理由で画像がブラウザに表示されない場合、画像の代わりとなる「代替テキスト」を指定しておくために必要な属性。
【記述例】：
・画像を表示させる
<img src="画像のパス" alt="代替テキスト">
・画像表示の幅と高さを指定する
width属性と、height属性を追加する。
<img src="○○" alt="○○" width="幅" height="高さ">
※単位はつけず、ピクセル数で正の整数で指定する。
属性で幅、高さの指定がない場合、ビットマップ形式の画像は実サイズで表示される。
・画像をリンクさせる
<a href="">ここにimg要素を入れる</a>
<img>:使える属性一覧：
※グローバル属性が使用可能。
・alt
・auto
・async
・anonymous
・crossorigin
・decoding
・height
・intrinsicsize
・ismap
・loading
・use-credentials
・referrerpolicy
・src
・sync
・sizes
・srcset
・usemap
・width
HTMLで使用できる画像形式：
・APNG
・AVIF
・GIF
・JPEG
・PNG
・SVG
・WEBP
まとめ
この記事では、HTMLで画像を表示させるためのタグ、属性、方法について簡単に紹介しました。
画像の寸法を変更したりする場合には、CSSプロパティでの指定も可能です。
また、<img>の対応ブラウザはオールマイティーです。
alt属性を使った代替えテキストは、画像の説明として分かりやすいものを入れましょう！
最後まで読んでいただき、ありがとうございました(●'◡'●)
