レスポンシブで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>© 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のソースは以下のコードを参考にしました。色々探しましたが、こちらで紹介されているコードがシンプルでわかりやすかったです。
