レスポンシブWebデザインの概念・メディアクエリのサンプル

  • このエントリーをはてなブックマークに追加

レスポンシブWebデザインはCSSで、デバイス・ブラウザの画面幅によってレイアウトの切り替えを行うメディアクエリ。画像にmax-width:100%;やwidth:100%;を使って、親要素の幅に合わせ、画像が比率を保ったまま拡大・縮小表示されるフルードイメージ。レイアウトを固定幅ではなく、画面幅に合わせて要素を可変にレイアウトするフルードグリッド。

  1. メディアクエリ
  2. フルードイメージ
  3. フルードグリッド

この3つをすべて使わなければレスポンシブWebデザインは実現できないかと言うとそうではなく、一部を使うだけで実現可能。

レスポンシブWebデザインのメリット

一部語弊があるかもしれないが、メリット。

  • 幅に応じてレイアウトが変化する
  • 画像などを一つのリソースにまとめることができ、そういった意味では効率化をはかれる
  • 画像は縮小表示したり、拡大表示するため、柔軟にレイアウトに対応できる

レスポンシブWebデザインのデメリット

一部語弊があるかもしれないが、デメリット。

  • 画像が実際表示されるよりも大きく書き出すため
  • 構築の際は計算が面倒
  • 状況によっては分担作業が非効率的

アダプティブWebデザインとの違い

アダプティブというのは異なったデバイスや環境などに合わせてそれに最適化されたソースが表示される。レスポンシブWebデザインと違って一度表示されたソースは基本的にはそのまま変化させずに使う。

アダプティブWebデザインのメリット

一部語弊があるかもしれないが、メリット。

  • メリットとしては、表示されるリソースが最小限に収まるため、クライアント側からすると、軽く済む
  • ソースコードが別々なので、環境によっては分担作業が行える

アダプティブWebデザインのデメリット

一部語弊があるかもしれないが、デメリット。

  • サーバー側の処理が必要
  • 適切な大きさの画像にしないと容量が大きくなり表示に時間がかかる

レスポンシブWebデザインのサンプル

幅によって変化する背景色。

@media screen and (min-width: 0) and (max-width: 499px){
body{background:#00f;}
}
@media screen and (min-width: 500px) and (max-width: 999px){
body{background:#0f0;}
}
@media screen and (min-width: 1000px){
body{background:#f00;}
}

幅によって変化するレイアウト。

HTML

<div id="wrapper">
    <div id="main">main</div>
    <div id="sub1">side</div>
</div>

CSS

@media screen and (min-width: 0) and (max-width: 499px){
    #wrapper{
    }
    #main{
        background: #ccf;
    }
    #sub1{
        background: #fcc;
    }
}
@media screen and (min-width: 500px) and (max-width: 999px){
    #wrapper{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    #main{
        width: 60%;
        display: flex;
        background: #ccf;
    }
    #sub1{
        width: 40%;
        display: flex;
        background: #fcc;
    }
}
@media screen and (min-width: 1000px){
    #wrapper{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    #main{
        width: 75%;
        display: flex;
        background: #ccf;
    }
    #sub1{
        width: 25%;
        display: flex;
        background: #fcc;
    }
}

その他注意しなければいけないこと

iframeだと、読み込み先の幅が小さい時にスマホ表示になるので厄介。
※例えばレフトナビや複数列ならぶレイアウト内にiframeを読み込んでいる等

HTMLが単純に2つ分になるので、ヘッダー・フッター・メイン部分のコードが表示市内にもかかわらず重たくなる。なんらかの処置をしないといけないので、それをするのも大変。

基本的には重いが、全く違うデザインの場合は、2つ記述するのが普通。