レスポンシブデザインにしる(超初心者)

画面幅に合わせて、
2カラムのページを1カラムに切り替える。

基本的な構造

まず、基本的な2カラムの構造です。

HTML部分

<div id="container">
<div id="header">ヘッダー</div>
<div id="content">コンテント</div>
<div id="sidebar">サイドバー</div>
<div id="footer">フッター</div>
</div">



デスクトップPCのモニターの画面幅は横長で、
タブレットやスマホ画面は縦長です。
画面幅(解像度)が異なるため、
モニターで見ているときは2カラム、
スマホで見ているときは、1カラムになるようにします。

画面幅

画面サイズ幅を便宜上、S、M、Lと名付けます。
数字に特に意味はないですが、
Sがスマホ、Mがタブレット、Lがモニターを想定します。
パソコンから、ブラウザ画面幅を縮めると、
スマホ画面の幅の挙動を確認できます。

表 画面サイズと挙動
サイズ画面幅幅の指定カラム
Lサイズ960px~px2カラム
Mサイズ600~959px%2カラム
Sサイズ~599px100%指定1カラム

メディアクエリ

メディアクエリは、特定のメディアの条件で
適用されるCSSを指定する概念です。
「このCSSはこの条件でのみ使う」と指定できます。
CSS3から拡張され細かく指定ができるようになりました。

外部CSSに書く場合の例。
<link rel="styleseet" href="アドレス"
media="only screen and (min-width:300px) and (max-width:600px)">


<style>タグに直書きの場合の例。
@media only screen and (min-width:300px) and (max-width:600px){}

「only ~」の部分は、「メディアタイプ」と呼び、
デバイスの種類を指定します。
「all」が全て。「screen」がディスプレイ。
「print」プリンター。「projection」プロジェクターなど。
なくてもいいです。

その後に続いてるやつが、
「(メディア)特性」と呼び、
使用している環境やデバイスの特徴などを指定します。
その条件下でのみ適用するCSSを指定することができます。
「width」ビューポート幅。(max-やmin-を付けて使う。)
「divice-width」表示領域。
「orientation」デバイス向き。などがあります。

「min-width」は横幅の下限。「max-width」は上限。

「論理演算子」で細かい指定ができます。
「and」~かつ~。「not」~でない場合。
「only」~のみ。「,」(カンマ)または。

種類がいろいろありますが、
複雑な使い方をしなければ
「max-width」と「min-width」と「and」で
事足りると思います。

先ほどの2カラムのHTMLに、
以下のメディアクエリのCSSを適用します。

CSS部分

/*Lサイズ*/
#container{ width:960px; margin:0 auto; }
#content{ width:600px; float:left; }
#sidebar{ width:300px; float:right; }
#footer{ clear:both; }

/*Mサイズ*/
@media (max-width:959px) and (min-width:600px){
#container{ width:100%; }
#content{ width:62.5%; }
#sidebar{ width:31.25%; }
}

/*Sサイズ*/
@media(max-width: 599px){
#container{ width:100%;}
#content,#sidebar{width:100%; float:none;}
}

Lサイズ→Mサイズ→Sサイズに縮めていった時の
変化がわかるような例です。
わかりやすいように色をを変えています。
以下のソースコードをブラウザで表示して
横幅を変えていくと変化が分かります。  ソースコード

<style type="text/css"><!--

#container *{height:50px;}

/*色*/
#container{ background:darkgray; }
#header{ background:darkgreen; }
#content{ background:darkred; }
#sidebar{ background:darkblue; }
#footer{ background:darkorange; }

@media(max-width:959px) and (min-width:600px){
#container{background:gray; }
#header{background:green ;}
#content{background:red; }
#sidebar{ background:blue; }
#footer{ background:yellow; }}

@media(max-width: 599px){
#container{background:lightgrey; }
#header{background:lightgreen; }
#content{background:lightred; }
#sidebar{ background:lightblue; }
#footer{ background:lightyellow; }}

/*Lサイズ*/
#container{ width:960px; margin:0 auto; padding:20px 0 }
#content{ width:600px; float:left; }
#sidebar{ width:300px; float:right; }
#footer{ clear:both; }

/*Mサイズ*/
@media(max-width:959px) and (min-width:600px){
#container{ width:100%; }
#content{ width:62.5%; }
#sidebar{ width:31.25%; }
}
/*Sサイズ*/
@media(max-width: 599px){
#container{ width:100%;}
#content,#sidebar{width:100%; float:none;}
}

--></style>

<div id="container">
<div id="header">ヘッダー</div>
<div id="content">コンテント</div>
<div id="sidebar">サイドバー</div>
<div id="footer">フッター</div>
</div> 閉じる



図の一番上がブラウザ画面最大まで広げた様子です。
図の2段目がブラウザの横幅を960px以下にした時の挙動です。
一番下が600px以下にした時の挙動です。
960pxまでは画面を縮めても左右の余白がなくなるだけです。
960px以下は、サイズをpx指定から%指定にして、
画面幅に対する比率で各要素が縮んでいきます。
さらに600px以下にすると、2カラムにしていた部分の
floatを解除して1カラムになります。
各要素の幅もすべて100%にしています。

ビューポート

ビューポートは画面に何pxとして表示するかを
指定する概念です。
特にスマホ画面では、解像度が数百pxしかないため、
そのまま表示すると明らかにはみ出ます。
何pxという指定もできますが、「device-witdh」で
指定することが一般的です。
ビューポートを設定していない場合、
モバイル版、chrome、firefox、operaなどは、
980pxがデフォルトのビューポートになります。

densityに基づいたビューポート

「device-width」を指定すると、
densityに基づいたビューポートが指定されます。
「density」は、
基準となるdpi(そのデバイスの初号機など)
に対して、そのデバイスのdpiが何倍かという比、
ランク分けです。
density = そのスマホのdpi / 基準のdpi。

densityに基づいたViewPort = デバイス解像度/density。
= デバイス解像度/(デバイスのdpi/基準のdpi)
= (デバイスの解像度/デバイスのdpi)×基準のdpi
= デバイスのインチ × 基準のdpi
= 1インチあたりのドット数を(基準に)統一した解像度。