レスポンシブデザインでのサイト作成

レスポンシブデザインとは

レスポンシブデザインとは、1つのウェブサイトを複数の端末（PC、モバイル、タブレット）に可変的に対応させることです。

レスポンシブデザインでは、主としてCSS3の@media（メディアクエリ）を使用して、閲覧するブラウザの幅に合わせて適用するスタイルを切り替えます。

従来の、モバイル用のサイトを別に用意してサーバー上で振り分けるスタイルは、Googleのオススメウェブサイトにあるように廃れていく方向にあるのかもしれません。

詳しい解説は、下記スライドを見ていただくと良いと思います。

/*幅768px未満（iphoneとかスマホのようなモバイル）*/
h1 {
	color:#000;
	}

/*幅768px以上（ipadのようなタブレット）*/
@media screen and (min-width:768px){
h1 {
	color:#00f;
	}
}

/*幅1024px以上（PCのモニタ）*/
@media screen and (min-width:1024px){
h1 {
	color:#f00;
	}
}

とすると、ブラウザの幅が768px以上の場合にのみ、色を青にするというスタイルを、幅が1024px以上の場合のみ、色を赤にするスタイルを適用させることができます。

この書き方はモバイルファーストと呼ばれ、先にモバイル用のスタイルを指定して、あとからデスクトップ用のスタイルで上書きする記述法です。逆の書き方のデスクトップファーストもありますが、モバイルファーストのほうがレスポンシブデザインの主流となっています。

メディアクエリでの分別方法にはmin-width（最小表示領域幅）以外にも、解像度を基準とした方法等もある上、切り替えるブラウザ幅のpxも1024pxとかでなければならないということは全くなく、自由に指定することができます。

その幅やら解像度らが各デバイスによって異なっているため（同じiphoneですらが3と4と5では解像度が異なる）、それら全てを区切りとして分けるのは不可能に近く、大体このくらいという程度で作った後に徐々に修正をかければよいかと思います。

デバイスピクセル比

一方、デバイスピクセル比（devicePixelRatio）というものがあり、これは画像の1ピクセルを各デバイスで何ピクセルで描画するかを表す値のこと。javascriptで「window.devicePixelRatio」で取得できる。

iphone4のデバイスピクセル比は2ということなので、10pxの画像はiphone4上では20px（2倍）で表示されるということ。そのため、拡大によるぼやけてしまうという症状が起こる。これを防止するのが以下の記述。

@media only screen and (-webkit-min-device-pixel-ratio:2){
        #a1{
                background:url(2bai.jpg);/*2倍の画像を指定*/
		-webkit-background-size:1px 1px;/*場合によりサイズを半分に*/
		background-size: 1px 1px;/*場合によりサイズを半分に*/
            }
}

backgroundの記述だけど、imgを直接編集したりするのはどうやるんでしょうね。（未解決）

iphone4の解像度は縦960×横640となっていますが、iphone4の表示領域幅は縦480px×横320pxなので、仮想的に960pxを実装していると言えます。つまり、1pxのなかに小さな仮想1pxを2×2詰め込んで、2倍のpxがあるかのように見せているわけです。

本来960×640の画像は、iphone4の画面上で幅いっぱい、480×320画像として振る舞う。本来480×320の画像は、iphone4画面上では240×160画像として振る舞う。これだと画像が小さくなってしまうため、デバイスピクセル比で2倍に拡大して表示させるらしい。

そのため、ぼやけずに画像を表示させたい場合は、デバイスピクセル比を掛けた大きさの画像を使う必要がある。等倍の画像を等倍で表示させるのではなく、2倍の画像をwidthで縮小表示させる感覚？

また、viewportを指定しないときちんとモバイル端末の幅に収まらないので注意します。

<meta name="viewport" content="width=device-width">

レスポンシブデザインサイトの作成

実際のレスポンシブデザインのサイト作成は、ゼロから始めるレスポンシブデザイン入門を見るとよいでしょう。

サイトにあるように、まずモバイルから作成していくというのがポイントです。Chrome拡張機能のResize windowを使えば、自動で複数の端末の幅にブラウザ幅を合わせてくれるので便利です。

早速作ってみました→佐野西村眼科クリニック

メディアクエリでの幅の切り分けは、モバイル、768px、1024pxの3つで、768px以下の時にナビメニューを2行のトグル型にし、floatを解除するようにしました。

IE8以下を対応させるには

IE8以下はメディアクエリに対応していないため、別に対応させるためのjsファイルを読み込まなければなりません。

読み込み方法は２つ、

<!--[if lt IE 9]>
<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

を記述するか、Respond.jsを読み込むか

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

ともに注意点がいくつかあり、前者は

media type（screen等）を省略してはならない
CSSを@importを使って読み込まない
@mediaの記述だけを別ファイルにしない＋@mediaより前に@chrsetを書かない＋@media以外の通常のCSSルールを書かないが揃った場合

があり、後者は

style要素は対象外（別ファイル）
CSSを@importを使って読み込まない

などがあるという。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>