このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

link”要素~“imagesrcset”属性HTML Living Standardで定義

記事July 7th,2020
使用可能な画像ファイルのセットを示す属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

imagesrcset”属性について

imagesrcset”属性は使用可能な画像ファイルのセットを示すための属性です。レスポンシブな画像を埋め込むのに使用します。

img”要素picture”要素image-set()”関数で埋め込むレスポンシブイメージをrel”属性の値にpreloadを指定されたlink”要素で先読みさせる時に使用することができます。

imagesrcset”属性とhref”属性の少なくともどちらかを指定する必要があります。“imagesrcset”属性とhref”属性をどちらも指定していないlink”要素はリンクを表さず、無意味なものになります。

指定できる値

属性値 説明
URL 画像の横幅w,URL 画像の横幅w,... ビューポートの横幅ごとの表示する画像のURL
URL デバイスピクセル比x,URL デバイスピクセル比x,... デバイスピクセル比ごとの表示する画像のURL

値はimg”要素picture”要素の子要素となるsource”要素の“srcset”属性の値と同じです。

サンプルコード

幅記述子で指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="preload" as="image" href="sample-640.png" imagesrcset="sample-320.png 320w, sample-640.png 640w, sample-1280.png 1280w" imagesizes="50vw">
<link rel="stylesheet" href="css/stylesheet.css">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
<img src="sample-640.png" srcset="sample-320.png 320w, sample-640.png 640w, sample-1280.png 1280w" sizes="50vw" alt="サンプル画像">
...

画素密度記述子で指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="preload" as="image" href="sample-640.png" imagesrcset="sample-320.png 1x, sample-640.png 2x, sample-1280.png 3x">
<link rel="stylesheet" href="css/stylesheet.css">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
<img src="sample-640.png" srcset="sample-320.png 1x, sample-640.png 2x, sample-1280.png 3x" alt="サンプル画像">
...
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク