熱が距離を縮める
熱が距離を縮める
2012.09.28

必読!5分でわかるレスポンシブWebデザインまとめ 制作編

野田

注意点

今回制作するページで、いくつか気をつけなければならないことがございます。
ひとつひとつ解決策として紹介させていただきます。

HTML5について

HTML5で制作するにあたって、IE7~8の対策をする必要があります。
単純に制作してしまうと、HTML5の新要素に未対応のIEのブラウザに対してはスタイルが効かないということになります。
そういった場合に備えてGoogleコードで公開されている、html5.jsを使用し、対応します。
下記のコードをhead内に読み込んであげてください。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS3(Media Queries)について

01-01. Media Queriesの記述方法について

Media Queriesの記述方法は、いくつか方法がございますので、代表的なものをご紹介させていただきます。

インライン記述
css内にソースをまとめて書く時などに便利です。

@media screen and (min-width: 0px) and (max-device-width: 640px) {
中身
}
@media screen and (min-width: 641px) and (max-device-width: 768px) {
中身
}
@media screen and (min-width: 769px)  {
中身
}

外部CSS記述
cssごとに振り分けて記述する方法です。

<link rel="stylesheet" media="screen and (min-width: 769px)" href="css/pc.css">
<link rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 641px)" href="css/tablet.css">
<link rel="stylesheet" media="screen and (max-width: 640px) and (min-width: 0px)" href="css/phone.css">
01-02.Media Queriesの記述属性について

Media Queriesの振り分けでは下記のような属性があります。

Media Queriesの記述属性について

02. CSS3(Media Queries)について

残念ながらIE8以下では使えません。
そのため公開されているスクリプトを使用して対応させてあげましょう。
今回は、Googleコードで公開されている、css3-mediaqueries.jsを使用し、対応させてあげます。ありがとう。Googleさん。
下記のコードをhead内に読み込んであげてください。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
03. css3-mediaqueries.jsを使用するにあたって

これには、解決せずに大変だった問題がございます。
css3-mediaqueries.jsを使用する場合、外部cssの読み込みを使用するとIE8以下では動いてくれません。
@media規則で指定すると解決するので、こちらを使用してください。

良い例:

@media screen and (min-width: 0px) and (max-device-width: 640px) {
中身
}
@media screen and (min-width: 641px) and (max-device-width: 768px) {
中身
}
@media screen and (min-width: 769px)  {
中身
}

ダメな例:

<link rel="stylesheet" media="screen and (min-width: 769px)" href="css/pc.css">
<link rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 641px)" href="css/tablet.css">
<link rel="stylesheet" media="screen and (max-width: 640px) and (min-width: 0px)" href="css/phone.css">

しかし、残念ながらこれが全ての解決策ではございません。
一定の条件になるとしっかりと効くこともあるので、もしもバグがでたら試してみてください。

Viewport のプロパティ

Media Queries を使って、デバイスサイズごとにスタイルを振り分けるだけでは、スマートフォンでブラウジングする際に、アレッて表示になってしまいます。
スマートフォンのブラウザにはViewportという機能があります。
こちらを使用しないと、せっかくスマートフォン用に制作したものも、980pxのサイズで表示され、PC用の画面が表示されてしまいます。
メディアクエリを使用してレスポンシブWebデザインを制作する際には、このViewportをデバイスの横幅であるdevice-widthに指定してあげます。
これで、解決することができます。

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

Retinaディスプレイの対応について

Retinaディスプレイ対応・対策については、対応する画像部分についてはスクリプトやcssで対応し、css3で対応できるところは、css3で対応させてあげます。
画像についての対応方法をこちらではご紹介します。
今回は画像等はあまり使用しないので、特別な対応はしませんが、私のオススメは、
Retinajs.jsです。
Retinaディスプレイ判別で自動で高解像度画像を入れ替えて表示してくれます。
使用している画像と同じ階層に、同じ名前+【@2x】を追記しておいてあげるだけで、Retinaディスプレイの場合のみ画像を入れ替えてくれます。
例:
retina_image.jpg  ←通常の画像
retina_image@2x.jpg  ←Retinaディスプレイ用高解像度画像

使い方は、サイトからretina.jsをダウンロードし、下記のコードをhead内に読み込んだ上で、Retinaディスプレイ高解像度画像を用意してあげるだけです。

<script type="text/javascript" src="js/retina.js"></script>

かなり高速で説明しましたが、これも五分に抑えるためなのでご了承ください。