Webデザインやガジェット、格安SIMの情報ブログ

レスポンシブでPC向け画像をスマートフォンに対応させるあれこれ

久しぶりにCSSのネタでも更新します。今回は画像をスマートフォンに対応させるテクニックをまとめました。

スポンサードリンク

デモ

まずはデモをご覧ください。
画像を画面幅に応じて縮小したり、画像を切り替えたりしてスマートフォンに対応させています。

HTML


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像をスマートフォンに対応させるあれこれ</title> 
<link rel="stylesheet" href="css/reset.css" >
<link rel="stylesheet" href="css/style.css" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/script.js"></script>
<!--[if lt IE 9]>
<script  src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<header>
<h1>画像をスマートフォンに対応させるあれこれ</h1>
</header>

<div id="contents">
<section>
<h2>画面から画像がはみ出ないようにする</h2>
<p><img src="img/img_001.jpg" alt="ひまわり"></p>
</section>

<section>
<h2>背景画像を画面幅いっぱいに表示する</h2>
<div class="bg"></div><!-- /.bg -->
</section>

<section>
<h2>レスポンシブで画像を切り替える(CSS)</h2>
<p class="img01"><img src="img/img_003_pc.jpg" alt="都合の悪いことは聞こえません"></p>
</section>

<section>
<h2>レスポンシブで画像を切り替える(jQuery)</h2>
<p class="img02"><img src="img/img_004_pc.jpg" alt="コノニホン…ヨノナガヲ…ガエダイ!!!"></p>
</section>

<p class="back"><a href="/2014/07/smartphone-site-img/ ‎">←記事に戻る</a></p>
</div><!-- /#contents -->

<footer>
<p>&copy; 2014 Creator Clip</p>
</footer>

</body>
</html>

CSS


@charset "UTF-8";

header {
	padding:0.8em;
	color:#FFFF00;
	font-size:150%;
	text-align:center;
	background:#E67168;
}

#contents {
	max-width:750px;
	margin:0 auto;
	text-align:center;
}

#contents h2 {
	margin:2em 0 1em;
	font-size:120%;
	color:#F08080;
}
#contents h2:before {
	content:"▽";
}

.back {
	margin:1em;
}

footer {
	padding:0.8em;
	color:#FFFF00;
	font-size:100%;
	text-align:center;
	background:#E67168;
}


/* 画面から画像がはみ出ないようにする */
img {
	max-width:100%;
	width /***/:auto; /* IE8のみ */
	height:auto;
	vertical-align:bottom;
}

/* 背景画像を画面幅いっぱいに表示する */
.bg {
	height:0;
	padding-top:66.666%; /* 500px÷750px×100=66.666...% */
	background:url(../img/img_002.jpg) no-repeat center;
	background-size:contain;
}

/* レスポンシブで画像を切り替える(CSS) */
@media screen and (max-width: 480px) {
	.img01 {
		height:0;
		padding-top:69.531%; /* 445px÷640px×100=69.531...% */
		background:url(../img/img_003_sp.jpg) no-repeat center;
		background-size:contain;
	}
	.img01 img {
		display:none; /* PC用画像を非表示にする */
	}
}

jQuery


$(function(){
	var wid = $(window).width();
	if( wid < 480 ){ // ウィンドウ幅が480px未満だったら
		$('.img02 img').each(function(){
			// 画像名の「_pc」を「_sp」に置き換える
			$(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
		});
	}
});

画面から画像がはみ出ないようにする

これはもう有名なので皆さん知っていると思いますが、おさらいとして…。
max-width:100%;とすることで画像が親要素からはみ出なくなります。IE8だと横方向のみ可変になるバグがあるので、3行目にwidth /***/:auto;のハックを入れています。

IE8で画像が縦にびろーんと伸びてしまう場合の解決方法 | nekonomemo.net

HTML


<section>
<h2>画面から画像がはみ出ないようにする</h2>
<p><img src="img/img_001.jpg" alt="ひまわり"></p>
</section>

CSS


img {
	max-width:100%; /* 画像の最大幅 */
	width /***/:auto; /* IE8のみ */
	height:auto;
	vertical-align:bottom;
}

背景画像を画面幅いっぱいに表示する

背景画像を画面いっぱいに表示させるには、background-size:contain;で背景画像の比率を維持したまま表示させ、高さをpadding-top(またはpadding-bottom)で可変にします。

高さの計算方法は高さ÷幅×100です。今回の数値を当てはめると500px÷750px×100=66.666…%となります。これを応用するとYoutubeなどの埋め込みコードにも対応することが出来ます。

ソーシャルサービスの埋め込みパーツをレスポンシブデザインに対応させる | Creator Clip

HTML


<section>
<h2>背景画像を画面幅いっぱいに表示する</h2>
<div class="bg"></div><!-- /.bg -->
</section>

CSS


.bg {
	height:0;
	padding-top:66.666%; /* 500px÷750px×100=66.666...% */
	background:url(../img/img_002.jpg) no-repeat center;
	background-size:contain;
}

レスポンシブで画像を切り替える(CSS)

PC向けとスマホ向けの画像2種類をメディアクエリを使って画像を振り分ける手法です。

通常は画像を<img>タグでそのまま表示し、ウィンドウサイズが指定されたpxより小さくなるとスマホ向けの背景画像が表示されます

HTML


<section>
<h2>レスポンシブで画像を切り替える(CSS)</h2>
<p class="img01"><img src="img/img_003_pc.jpg" alt="都合の悪いことは聞こえません"></p>
</section>

CSS


/* レスポンシブで画像を切り替える(CSS) */
@media screen and (max-width: 480px) {
	.img01 {
		height:0;
		padding-top:69.531%; /* 445px÷640px×100=69.531...% */
		background:url(../img/img_003_sp.jpg) no-repeat center;
		background-size:contain;
	}
	.img01 img {
		display:none; /* PC用画像を非表示にする */
	}
}

レスポンシブで画像を切り替える(jQuery)

今度はjQueryで画像のパスを書き換えてPCとスマホ向けの画像を切り替えます。

HTML


<section>
<h2>レスポンシブで画像を切り替える(jQuery)</h2>
<p class="img02"><img src="img/img_004_pc.jpg" alt="コノニホン…ヨノナガヲ…ガエダイ!!!"></p>
</section>

jQuery


$(function(){
	var wid = $(window).width();
	if( wid < 480 ){ // ウィンドウ幅が480px未満だったら
		$('.img02 img').each(function(){
			// 画像名の「_pc」を「_sp」に置き換える
			$(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
		});
	}
});

jQueryのソースは以下のコードを参考にしました。色々探しましたが、こちらで紹介されているコードがシンプルでわかりやすかったです。

鹿
writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。
  • Feedly(RSS)で
    ブログを購読してみる
    購読する
  • Push7(プッシュ通知)で
    ブログを購読する
    購読する