レスポンシブウェブデザインの設定方法

レスポンシブウェブデザインとはPC用のサイトをモバイル端末でも問題なく見れるようにデザインしたサイトのことです。 ここでは簡単なレスポンシブウェブデザインの設定方法をお話しします。

head要素内にviewportを設定する

viewportとはブラウザの表示領域の事を指します。
headタグ内にviewportを指定することで、環境に関係なく画一的に表示させることができます。

フルードイメージを設定する

フルードイメージ設定により、ウィンドウサイズに合わせて画像が拡大・縮小されます。 img要素に記述しておきましょう。

mg {max-width: 100%;}

フルードグリッド（リキッドレイアウト）を設定する

可変幅にしたいコンテンツの横幅に関するものをpx指定から%指定に変更しましょう。 幅変換は変換対象となる箇所のコンテキスト（要は親要素）のサイズで割ります。 例えば960pxの#containerに格納されている700pxの#mainの場合、以下のようになります。

700 ÷ 960 * 100 = 72.916666667%

※小数点以下の解釈はブラウザによって変わります。上記は小数点以下10位で四捨五入

フォントを設定する

フォントサイズも相対指定となる%、rem、emなどの単位を使用します。 フォントサイズの基準もコンテキストとなるので、フルードグリッドと同じように計算します。

大きさを変化させたくないものは絶対サイズで指定する

例えばボタンなどは画面サイズに比例させてサイズを変えると押しにくいです。 そういった「画面のサイズに関係なく一定のサイズを保ちたいもの」にはpxなどでサイズを指定しましょう。

メディアクエリを設定する

端末幅によって読み込むCSSを選択します。 コンテンツとサイドバーを幅769px以上の端末でのみ左右に配置する場合、下記のようになります。

media screen and (min-width : 768px){
  #contents { text-align : left;}
}
@media screen and (min-width : 1024px) {
  #contents{
    width:100%;
    overflow : hidden;
  }
  #main,#sidebar{
    float : left;
  }
  #main {
    margin: 1%;
    width : 80%;
  } 
  #sidebar {
    margin: 1%;
    width : 19%;
  } 
}

以上が最低限のレスポンシブウェブデザイン対応になります。 凝った作りのものになるとコンテンツパーツの種類や読み込ませるCSS自体を変えるサイトもあります。