5.1 srcset属性
レスポンシブ画像は、反応の良い最適化されたウェブページを作成する上で重要な役割を果たすんだよね。デバイスや表示条件に応じて、さまざまなサイズと解像度の画像をロードできるので、パフォーマンスと使いやすさが向上するんだ。HTMLでレスポンシブ画像を実装するための主なツールは、srcsetとsizes属性なんだ。
srcset属性は、さまざまなサイズや解像度の画像ソースを指定するために使うんだ。ブラウザはユーザーのデバイスに最適な画像を選択するんだよ。
シンタックス:
<img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Example Image">
どこで:
src: デフォルトの画像のパスを指定するsrcset: カンマで区切られた画像とその特性のリストを含む-
1x,2x: スケーリング係数を示す（例えば、1xは標準解像度、2xは高解像度デバイス向けだね）
srcsetの使用例:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>srcsetの使用例</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
alt="レスポンシブ画像の例">
</body>
</html>
コード説明:
src="images/default.jpg": デフォルトの画像を指定する-
srcset: 画像の幅をピクセル単位で指定したリスト（480w,800w,1200w）。 ブラウザはウィンドウの幅に基づいて最適な画像を選択する
5.2 sizes属性
sizes属性は、表示条件に応じた画像の幅を指定するためにsrcsetと組み合わせて使われるんだ。これにより、ブラウザはより正確に適切な画像を選べるよ。
シンタックス:
HTML
<img src="default.jpg"
srcset="image1.jpg 480w, image2.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
alt="Example Image">
どこで:
sizes: 表示条件とそれに応じた画像の幅のリストを含む(max-width: 600px) 480px: ビューポートの幅が600px以下の場合、480px幅の画像を使用する800px: それ以外の場合は800px幅の画像を使用する
sizesの使用例:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sizesの使用例</title>
<style>
.responsive-img {
width: 100%;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="レスポンシブ画像の例">
</body>
</html>
コード説明:
sizesは、さまざまな表示条件に対して画像の幅を決めるんだ:
- ビューポートの幅が
600px以下の場合、480px幅の画像を使用する - ビューポートの幅が
900px以下の場合、800px幅の画像を使用する - それ以外の場合は
1200px幅の画像を使用する
5.3 レスポンシブ画像
異なるスクリーンサイズに対応した画像
srcsetとsizes属性を使用して、画像がさまざまなスクリーンサイズに適応する例を作ってみよう。
例:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブ画像</title>
<style>
.responsive-img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="レスポンシブ画像の例">
</body>
</html>
コード説明:
src="images/default.jpg": デフォルトの画像を指定するsrcset: 3バージョンの画像を幅で指定する（480w,800w,1200w）-
sizes: さまざまな条件に応じた画像の幅を指定する:600px以下の場合は480px幅の画像を使用する900px以下の場合は800px幅の画像を使用する900px以上の場合は1200px幅の画像を使用する
-
.responsive-img: CSSクラスで、画像に100%の幅と自動の高さを設定して、 利用可能なスペースを占めるようにし、比率を保つ
GO TO FULL VERSION