<img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">新登場！ 44ページの電子書籍「CSS in 44 minutes」が発売されました！ 😃
# img
ウェブページに挿入される画像を定義します。
例: コピー
例: コピー
<!-- For responsive images, use srcset and sizes -->
<img src="/images/sunset-360.jpg"
alt="Picture of a Ha Long Bay sunset"
srcset="/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w>"
sizes="(min-width: 800px) 720px, 360px">
src
画像がホストされているURL。
必須。
"/images/tiramisu.jpg"
相対URLを使用できます。
"https://htmlreference.dokyumento.jp/images/traffic.jpg"
絶対URLを使用できます。
alt
画像が表示されない場合に画像を説明するための代替テキスト。スクリーンリーダーで使用されます。
必須。
"ドラゴンズ・パール号の前に立っている男性の写真"
画像がないものとして説明してください。
srcset
同じ画像の異なるソースのリストを定義します。ブラウザは使用するのに最適なものを選択します。
"/images/[email protected] 2x"
2xのようなピクセル密度記述子を定義できます。この場合、[email protected]は幅が720pxです。
<img src="/images/sunset.jpg"
srcset="/images/[email protected] 2x"
alt="Picture of a Ha Long Bay sunset">ブラウザは、利用可能なスペース、ピクセル密度などに応じて、sunset.jpgまたは[email protected]を使用します。
"/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"
360wのような幅記述子を使用できます。この値は、sizes属性で定義されたソースサイズのいずれかで除算され、ピクセル密度が得られます。
<img src="/images/sunset-360.jpg"
alt="Picture of a Ha Long Bay sunset"
srcset="/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w>"
sizes="(min-width: 800px) 720px, 360px">
sizes
異なるソースサイズのリストを定義します。それぞれをメディアクエリと組み合わせることができます。
"(min-width: 800px) 1440px, 720px"
ビューポートが800pxより大きい場合、ブラウザはsrcsetで定義された1440pxの画像を使用します。
そうでない場合は、720pxを使用します。
<img src="/images/sunset-360.jpg"
alt="Picture of a Ha Long Bay sunset"
srcset="/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w>"
sizes="(min-width: 800px) 720px, 360px">
height
画像の高さを定義します。
"240"
ピクセル単位の高さ。
width
画像の幅を定義します。
"120"
ピクセル単位の幅。