WEB Tips デザイン・コーディング

レスポンシブレイアウトの基本設定

2015-02-22

レスポンシブレイアウトの基本設定

サイトをレスポンシブにする場合にまず最初に設定することのまとめ。

ブレークポイントを決める

レイアウトを切替る画面サイズを決めます。
PC・タブレット・スマートフォンそれぞれに対応したレイアウトにするなら

PC向け       768px以上
タブレット向け   768pxまで
スマートフォン   480pxまで

こんな感じでしょうか。

すぐ忘れてしまうので、iPhoneなどのデバイスの解像度を一覧にまとめておきます。

端末画面サイズ(inch)画面解像度(px)デバイスピクセル比ブラウザサイズ
iPhone43.5インチ640 x 9602.0320 x 480
iPhone5/5s4インチ640 x 11362.0320 x 568
iPhone64.7インチ750 x 13342.0375 x 667
iPhone6 plus5.5インチ1080 x 19202.0414 x 738
iPad mini9.7インチ1536 x 20482.0768 x 1024
iPad7.9インチ1536 x 20482.0768 x 1024
Xperia,iPhoneほか 各機種のサイズ一覧

自分で確認する必要があり、エクスペリアをはじめiPhone,GalaxyやAQUOSなどの主要な機種のサイズ仕様を一覧にしました。といっても基本的なサイズや情報だけです。抜け落ちているものもところどこ ...

続きを見る

ViewPort(ビューポート)の設定

実際のHTMLファイルにviewportの設定をします。

<meta name="viewport" content="width=device-width,initial-scale=1">
widthviewportの値を指定する。
ブラウザのウィンドウサイズに合わせたい場合は"width=device-width"をしているする。
heightviewportの高さを指定するが実際使うことはない。
initial-scaleブラウザで表示した場合の初期倍率。
設定数値の倍数で表示される。1なら1倍、2なら2倍。
minimun-scaleピンチインしたときに縮小する倍率の最小値。
maximun-scaleピンチアウト、ダブルタップしたときに拡大する倍率の最大値。
user-scalableユーザーによる拡大縮小を許可するかどうか。yes/noで指定。

ユーザーの利便性を損ねてしまう恐れがあるので特別な理由がない限り、user-scalable、minimun-scale、maximun-scaleなどは制御しません。

 IE8以下でHTML5,CSS3に対応するためのスクリプト

IE8以下ではHTML5やメディアクエリーに対応していないため、JavaScriptで対応します。

IE自体のサポートが終了しているためほとんど活躍する機会は無くなったと思いますがもしもの時用に。

html5shiv.js

html5から導入されたタグ(header,footer,section,article,asideなど)はIE8以下では認識されないため、IE8でも解釈させるためのjavascript ライブラリ。

https://github.com/aFarkas/html5shiv

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

selectivizr

CSS3をIE8以下でも認識させるためのjavascriptライブラリ「Selectivizr」。
疑似クラス・擬似要素(の一部)が利用可能になります。

Selectivizrを使う場合は、
・jQuery,prototype,YUIなどのJavaScriptライブラリが必須
・CSSソースはlink要素を使って読み込む
となります。

https://github.com/keithclark/selectivizr

<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="for-ie6-8style.css" /></noscript>
<![endif]-->

IE6-8環境で「for-ie6-8style.css」を読み込み、他のブラウザでは非表示になります。

respond.js

Media Queries(max-widthとmin-width)を解釈可能にする高速で軽量なpolyfill。

https://github.com/scottjehl/Respond

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

css3-mediaqueries.js

IE8以下でCSS3メディアクエリーを有効にするJavaScriptです。

https://github.com/heathcliff/css3-mediaqueries-js

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

modernizr

ブラウザで対応している機能をCSS,Javascriptで確認できるスクリプト。ブラウザの対応状況ごとにスタイルを設定できたりします。

https://modernizr.com/
https://github.com/modernizr/modernizr

 CSS・メディアクエリーの設定

ブレイクポイントをしていたサイズに応じてMedia Queryを設定します。

@media screen and (min-width:768px){
	768px以上(主にPC)のcssを書く 
}

@media screen and (max-width:767px){
	768px未満(タブレット以下)のcssを書く 
}

もっと細かく設定するなら

@media screen and (min-width: 980px) {
	/* 980px以上 */
}
@media screen and (min-width: 768px) and (max-width: 979px) {
	/* 768px以上979px以下 */
}
@media screen and (min-width: 480px) and (max-width: 767px)  {
	/* 480px 以上 767px以下 */
}
@media screen and (max-width: 479px) {
	/* 479px以下*/
}

メディアクエリーの記述方法には、

・モバイルファーストか
・PCファーストか
という考え方の違いで記述方法も変わってくると思います。

モバイルファーストなメディアクエリーの記述

/* 全スタイルに適用される */
.title{
font-size:20px;
}
@media screen and (min-width: 768px) {
	/*768px以上 デスクトップ用のスタイルを記述 */
     .title{
        font-size:32px;
    }
}

PCファースト(デスクトップファースト)なメディアクエリーの記述

/* 全スタイルに適用される */
.title{
font-size:32px;
}
@media screen and (max-width: 76px) {
	/*767px以下のモバイル用スタイルを記述 */
     .title{
        font-size:20px;
    }
}

-WEB Tips, デザイン・コーディング
-, ,