COMMEND

3つの“D”の視点から
夢あるライフスタイルづくりを提案

Vol.9 レスポンシブWebデザインにおいての「Retinaディスプレイ」対応を考える

2014/10/04 up カテゴリー : WEBの現場から！

メディアクエリがどんなものなのか理解していただけただろうか。今回はヘッダー部分のサイトのロゴ画像を配置していく。完成形はこちら【ヘッダー完成】
　
それではロゴ部分をダウンロードしてもらいたい。【→logo.jpg（zip）】
　
それを「sample」フォルダ内の「images」フォルダに入れる。htmlの記述は下記。ソース記述の黒枠右上の「ソースを表示」からコピーして、「index.html」に追加してほしい。
　
「index.html」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<title>MY BLOG</title>

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->

</head>
<body>
<div id="wrap"> 
	
<!-- ヘッダー -->
	<header> 
		<h1><img src="images/logo.jpg" alt="俺のブログ"></h1>
		<img src="images/topimage.jpg" alt="俺のブログ">
	</header>

</div><!-- #wrap end -->
</body>
</html>

　
前回までのトップ画像の作成のソースに引き続き、<h1>〜</h1>の中に画像を指定してあるだけの単純なコードである。サイトのタイトルに画像を使用するときは、見出しタグで囲った方が、SEOにはいいのだ。次にCSSの説明。
　
「style.css」

@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 全デバイス共通のスタイルとスマートフォン向けレイアウト指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/*==========================================
 body
===========================================*/
body {
  width: 100%;
  background-color:#FFF;
  font-family:'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  color:#000;
}
/*==========================================
 ヘッダーのスタイル
===========================================*/
header {
  text-align:center;
  margin:0 auto;
}
header h1 {
  padding:15px 5px 15px 5px;
}
header h1 img {
  width:100%;
  height:auto;
  max-width:200px;
}
header img {
  width:100%;
  height:auto;
  max-width:960px;
}

/* タブレット向けレイアウト指定：521px～960px */
@media only screen and (min-width: 521px) {

}

/* PC向けレイアウト指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {

}

　
前回の「メディアクエリ」で指定した「タブレット向けレイアウト指定：521px～960px」と「PC向けレイアウト指定：961px以上では固定レイアウト」内の記述は消しておこう。今回、追加したのは下記の箇所。ソース記述の黒枠右上の「ソースを表示」をクリックしてコピーし、「style.css」に追加してほしい。
　

header h1 {
  padding:15px 5px 15px 5px;
}
header h1 img {
  width:100%;
  height:auto;
  max-width:200px;
}

　
「header」内はセンター揃えになっているので、タイトルロゴ画像を囲んでいるh1タグには、「padding」以外、特に何の指定もいらない。タイトルロゴ画像の指定部分である「header h1 img」には、「フルードイメージ」で説明した「width:100%;」と「height:auto;」を指定。これで画像の縦横比を保持したまま配置することができる。考え方は「header img」の記述と同じである。あとは、「max-width:200px;」とする。これにより、200px以上のブラウザ幅だと、画像は固定される。つまり、横幅320pxなどの一般的なスマートフォンで見たとき、このロゴ画像は200pxで固定されており、「フルードイメージ」による画像の縮小は適応されない。最も、200px未満のデバイスが存在するならば、縮小されて表示されるだろうが…。横幅200px以上、拡大しないのならば、準備しておくロゴ画像のサイズは、横幅200pxでいいのではないかと思うだろう。しかし、iPhoneの「Retinaディスプレイ」が登場し、Web制作者は頭を抱えることとなった。

Retinaディスプレイ

●Retinaディスプレイとは
2010年6月に登場したアップルのiPhone4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載された。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化を遂げたのである。最近ではMacbook Proなどスマートフォンやタブレット以外でも搭載され話題に。

高精細ディスプレイの登場は、Webページの制作フローにも大きな変化をもたらした。従来のディスプレイとは解像度に対する処理が異なるため、これまでのような制作フローだと普通に表示されていたはずのWebページ上の画像が、荒れた状態で表示されるようになってしまうのだ。

デバイスピクセルとCSSピクセル

iPhone5のデバイスピクセルは640×1136であるが、レスポンシブWebデザインを制作するときには、CSSピクセルで考えるのだ。すなわちiPhone5のCSSピクセルは320×568であり、Webデベロッパが普通ピクセルという場合はこちらを指すのである。単純に考えて縦・横それぞれ2倍の違いがあるのだ。これら2つのピクセル比が1：1であるのなら、画像が荒れる問題はないのだが、上記のiPhone5のピクセル比は、2：1となっている。これはiPhone5に搭載された「Retinaディスプレイ」が起こしているのであり、「Retinaディスプレイ」ではないデバイスでは綺麗に表示されていた画像が、「Retinaディスプレイ」搭載のデバイスでは、荒れた表示になってしまうのだ。

解決策

それではどうしたら良いのか？現状の解決策として、サイズが2倍の画像を用意すればいいのだ。なので今回、用意したタイトルロゴの画像の横幅は、200pxの2倍以上にしてある。2倍の画像を用意して、CSSの「max-width」やHTMLの画像を指定する記述<img src="画像のパス" width="200" height="100" />
に、半分の数値を入れてやれば良いのだ。
　
「Retinaディスプレイ」搭載のスマートフォンでは、下の画像のタイトルロゴのような違いが出る。「200pxのロゴ画像」の画像文字は、にじんだようになっているのが分かるだろうか。
　

2倍のサイズのロゴ画像

Retinaディスプレイ
　