さぁ!検索しよう!

レスポンシブWebデザインを完成させるための6つのポイントです。

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

レスポンシブWebデザインとは、ブラウザウィンドウのサイズの変化に応じてページのレイアウトやデザインが切り替わり、あらゆるデバイスに最適化されるようなデザインをいいます。

レスポンシブWebデザインは、以下の6つのことを行なうことで実現が可能です。

リキッドレイアウト

リキッドレイアウトとは、widthheight,padding,margin等の単位をパーセントで指定することで、ブラウザウィンドウ(viewport)サイズに合わせて可変するレイアウトをいいます。

フルードイメージ

フルードイメージとは、ブラウザウィンドウサイズの変化に応じて、画像の縦横比を維持したまま伸縮させることをいいます。フルードイメージを行なうには、以下をCSSに記述します。

img{
    height:auto;
    max-width:100%;
}

border-box

通常、要素の横幅や高さはborderpaddingを指定している場合は、その合計で決まります。
そのため、レイアウトを組む際は、親要素からはみ出ないように事前に横幅や高さにborderpaddingを足した値を計算しなければいけません。

ですが、以下のようにbox-sizing:border-boxを指定することで、borderpaddingの値を幅や高さに含めることができるため、前述のような計算をする必要がなくなります。

* {
        box-sizing: border-box;
}

box-sizing: border-box;を適用後のwidth

border-box

メディアクエリー

メディアクエリーとは、指定した横幅を境に要素のスタイルを切り替えたいときに用いる手法であり、以下のようにデフォルトのスタイルシートに追加することで行うことができます。

メディアクエリーの記述例

始めに、小型デバイス向けのレイアウトを決めてスタイルを記述していき、それを基に大型デバイスのレイアウトとなるようにスタイルを追加(広げて)・上書きしていきます。

/* デフォルトのスタイル */
#container{
    //下へ継承される
    padding:10px;
    width:100%;
}
/* ブラウザウィンドウの横幅が768pxより大きくなったらheaderの背景がblackになる。 */
@media screen and (min-width:768px){
    #container{
        background:black;//新たに追加
    }
}
/* ブラウザウィンドウの横幅が1024pxより大きくなったら#containerのwidthを1000pxに変更。 */
@media screen and (min-width:1024px){
    #container{
        width:1000px;//上書き
    }
}

ブレークポイント

ブレークポイントとは、メディアクエリーによってスタイルが切り替わる境目をいいます。上述の@media screen and (min-width:768px)でいえば、min-width:768pxの部分がブレークポイントです。

post_08_image03

どの値を境にするかはあなた次第です。

viewport

PCサイトをスマートフォン等の小さいデバイスで閲覧すると、下記のようにページがPC向けのページが、小さい画面内に収まるように疑似的に表示されてしまうため、各要素が全体的に小さく表示されてしまいます。

post_08_iamge05

これを回避するために、viewportを用います。viewportはスマートフォンやタブレットでページを読み込んだ際のページの表示のされ方を指定することができ、<head></head>内に下記のmetaタグを読み込むことで完了します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.6, user-scalable=yes," >

metaタグ内の意味は下記の通りです。

width ウィンドウの幅をデバイス幅に合わせます。上記のようにdevice-widthを指定すると、ページがデバイス幅にフィットされて表示されます。初期値は980pxなので、何も指定しないとPC画面のまま表示されてしまうというわけです。
initial-scale 最小縮小率です。デフォルト値は0.25で、10までの値を指定することができます。1.0を指定するとユーザが縮小できないようにすることができます。
minimum-scale 最小縮小率です。デフォルト値は0.25で、10までの値を指定することができます。1.0を指定するとユーザが縮小できないようにすることができます。
maximum-scale 最大拡大率です。デフォルト値は1.6で、10までの値を指定することができます。1.0を指定するとユーザが拡大できないようにすることができます。
user-scalable 値を入れることでユーザが拡大・縮小をできるかできないかを決めることができます。yesを入れるとでき、noを入れるとできないようにすることができます。

以上で、レスポンシブWebデザインを完成させるための6つのポイントを終わります。