HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは!
今日も頑張ろう

画面の幅による表示画像の切り替え

説明

概要

画面幅の変化(レスポンシブ対応)による画像ファイルの切り替え方法は、複数ありますので、それぞれの特徴を理解して適切な方法で画像切り替えを実施しましょう。

  • メディアクエリ(@media)を使用した切り替え
  • srcset 属性を使用した切り替え-1
  • srcset 属性を使用した切り替え-2
  • picture/source タグを使用した切り替え
  • Retina ディスプレイ用の切り替え

(1) メディアクエリ(@media)を使用した切り替え

画面幅に合わせて複数の img タグを用意しておいて CSS のメディアクエリ(@media)を用いて切り替える方法です。本方法は、画面幅の変更に確実に追従できるというメリットがありますが、CSS の記述が多くなったしまうと同時にネットワーク負荷が大くなってしまうというデメリットがあります。

HTML


<div class="resize">
	<img class="min" src="images/img-800x600.jpg" alt="小さな画像">
	<img class="big" src="images/img-1600x1200.jpg" alt="大きな画像">
</div>

CSS


div.resize img.min {
	display: none;						/* 初期状態は、小さな画像を非表示に設定 */
}
div.resize img.big {
	display: block;						/* 初期状態は、大きな画像を表示に設定 */
}
@media screen and (max-width: 800px) {
	div.resize img.min {
		display: block;					/* 800pxより小さい時は、小さな画像を表示に設定 */
	}
	div.resize img.big {
		display: none;					/* 800pxより小さい時は、大きな画像を非表示に設定 */
	}
}

サンプル表示

画面幅の変化を確認するために別ウィンドウで表示してください。

ソースコード

ソースコード表示(メディアクエリ(@media)を使用した切り替え)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(メディアクエリ(@media)を使用した切り替え)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
img {
	width: 100%;
}
div.resize img.min {
	display: none;						/* 初期状態は、小さな画像を非表示に設定 */
}
div.resize img.big {
	display: block;						/* 初期状態は、大きな画像を表示に設定 */
}
@media screen and (max-width: 800px) {
	div.resize img.min {
		display: block;					/* 800pxより小さい時は、小さな画像を表示に設定 */
	}
	div.resize img.big {
		display: none;					/* 800pxより小さい時は、大きな画像を非表示に設定 */
	}
}
</style>
</head>
<body>
	<div class="container">
		<div class="resize">
			<img class="min" src="images/img-800x600.jpg" alt="小さな画像">
			<img class="big" src="images/img-1600x1200.jpg" alt="大きな画像">
		</div>
	</div>
</body>
</html>

(2) srcset 属性を使用した切り替え-1

img タグの srcset 属性を用いて複数の画像を用意しておきブラウザに適切な画像を選択してもらう方法です。本方法は、記述が簡単というメリットがありますが、環境に応じた最適な画像選択はブラウザによって異なると同時に画面幅の変更があっても条件に合致した画像の再読み込みが行われない場合がある(キャッシュデータが使用される)というデメリットがあります。このため、用意する画像が同一画像で解像度が異なるだけの場合は、デメリットの影響が少ないですが、画面幅の変化によって異なる画像を表示させたい場合には適しません。

HTML


<img src="images/img-1600x1200.jpg" 
	srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w" 
	alt="画像">

サンプル表示

画面幅の変化を確認するために別ウィンドウで表示してください。

ソースコード

ソースコード表示(srcset 属性を使用した切り替え-1)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(srcset属性を使用した切り替え-1)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
img {
	width: 100%;
	display: block;
}
</style>
</head>
<body>
	<div class="container">
		<img src="images/img-1600x1200.jpg" 
			srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w" 
			alt="画像">
	</div>
</body>
</html>

(3) srcset 属性を使用した切り替え-2

img タグの srcset 属性を用いて複数の画像を用意しておき、さらに sizes 属性を用いて画像を選択する条件を指定する方法です。本方法は、記述が簡単というメリットがありますが、画面幅の変更があっても条件に合致した画像の再読み込みが行われない場合がある(キャッシュデータが使用される)というデメリットがあります。このため、用意する画像が同一画像で解像度が異なるだけの場合は、デメリットの影響が少ないですが、画面幅の変化によって異なる画像を表示させたい場合には適しません。

HTML


<img src="images/img-1600x1200.jpg"
	srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w" 
	sizes ="(max-width: 700px) 800px, (min-width: 701px) 1600px" 
	alt="画像">

サンプル表示

画面幅の変化を確認するために別ウィンドウで表示してください。

ソースコード

ソースコード表示(srcset 属性を使用した切り替え-2)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(srcset属性を使用した切り替え-2)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
img {
	width: 100%;
	display: block;
}
</style>
</head>
<body>
	<div class="container">
		<img src="images/img-1600x1200.jpg"
			srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w" 
			sizes ="(max-width: 700px) 800px, (min-width: 701px) 1600px" 
			alt="画像">
	</div>
</body>
</html>

(4) picture/source タグを使用した切り替え

picture タグ、source タグを用いて複数の画像を用意しておき、指定された条件によって表示する画像を選択する方法です。本方法は、記述が簡単であり画面の横幅の変化に対して思い通りの表示ができます。

HTML


<picture>
	<source media="(min-width: 801px)" srcset="images/img-1600x1200.jpg 1600w">
	<source media="(max-width: 800px)" srcset="images/img-800x600.jpg 800w">
	<img src="images/img-1600x1200.jpg" alt="画像">
</picture>

サンプル表示

画面幅の変化を確認するために別ウィンドウで表示してください。

ソースコード

ソースコード表示(picture/source タグを使用した切り替え)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(picture/source タグを使用した切り替え)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
img {
	width: 100%;
	display: block;
}
</style>
</head>
<body>
	<div class="container">
		<picture>
			<source media="(min-width: 801px)" srcset="images/img-1600x1200.jpg 1600w">
			<source media="(max-width: 800px)" srcset="images/img-800x600.jpg 800w">
			<img src="images/img-1600x1200.jpg" alt="画像">
		</picture>
	</div>
</body>
</html>

(5) Retina ディスプレイ用の切り替え

論理解像度と物理解像度が異なる Retina ディスプレイで表示する時に高解像度の画像に切り替える方法です。本方法を使用することで Retina ディスプレイの性能を最大限に引き出すことが可能になります。
【注意事項】
通常は、同じ画像で解像度が違う画像を用いて切り替えを行いますが、本サンプルでは、表示している画像の違いをわかりやすくするための別の画像を使用しています。

HTML


<img src="images/img-800x600.jpg" 
	srcset="images/img-800x600.jpg 1x, images/img-800x800@2x.jpg 2x" 
	alt="画像">

サンプル表示

画面幅の変化を確認するために別ウィンドウで表示してください。

ソースコード

ソースコード表示(Retina ディスプレイ用の切り替え)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(Retina ディスプレイ用の切り替え)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
img {
	width: 100%;
	display: block;
}
</style>
</head>
<body>
	<div class="container">
		<img src="images/img-800x600.jpg" 
			srcset="images/img-800x600.jpg 1x, images/img-800x600@2x.jpg 2x" 
			alt="画像">
	</div>
</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎