レスポンシブ対応ページの簡単な作り方！導入部分を解説します。

こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。

今回は、レスポンシブ対応ページの簡単な作り方についてお話していきます。

ウェブページをどう手を加えればレスポンシブ対応したことになるのでしょうか。これにはいくつかのステップを経る必要となります。

本記事では、近年の主流の考え方であるモバイルファーストを意識したレスポンシブデザインページの作り方をご紹介します。

参考：モバイルファーストとは？

ステップ①　HTMLにmeta viewportタグを入れる

headタグ内以下のタグを入れます。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

viewportは表示領域を設定するためのメタタグです。

name=”viewport”で自身がviewportであることを指定し、contentの中で設定内容を記述します。

設定内容のそれぞれの意味については以下です。

width=device-width

ここではページの横幅がどの大きさになるかを設定します。

widthの値として数値を入れることもできますが、「device-width」とすることでデバイスの横幅を取得し、それをサイトの横幅としています。

PCでのページを閲覧中にウィンドウの幅を小さくしていくとスマホの見た目に切り替わるのはこの設定が効いているからです。

initial-scale=1.0

ページを読み込んだ時の初期のズームの値です。

width=device-widthの設定をした時点でinitial-scaleの値は1.0になりますが、両方記述して明示しておきます。

minimum-scale=1.0

最小のズームの値です。

initial-scale=1.0と合わせると、ズームアウト（縮小）の動作が無効になります。

ステップ②　CSSにメディアクエリを設定する

デバイス毎のcssを記述します。

メディアクエリというCSSの機能で画面幅による出し分けを行います。

近年はモバイルファーストといって、スマートフォンから見える情報を重要視してウェブサイトを構築する手法がSEO的に好まれておりますので、スマートフォン用の画面幅が狭い場合のCSSからまず作成し、その後メディアクエリを用いてPC用のCSSを記述していくようにサイトを作るといいでしょう。

この場合のCSSは以下のようになります。

/* スマホ用のCSSを普通に記述する */
body{
    margin:0;
    padding:0;
}
body > .wrap{
    width:100%;
}
img{
    width:100%;
}
......

/* PC用のCSSをメディアクエリの中に記述する */
@media screen and (min-width: 768px) {
    body > .wrap{
        width:960px;
    }
    img{
        width:auto;
    }
    ......
}

上の例ではスマホサイトではコンテンツ幅が基本的に横幅の100%となることを意識してページを制作するようにしています。

幅768pxはiPadを縦にしたときの幅ですが、このiPad以上の幅からPC画面が見えるようにします。

このPC画面では基本のコンテンツ幅を960pxとし、中身も固定のps数を設定するように意識して作ることになります。

画像はスマホサイトでは幅によって可変になるように100%を指定し、PCサイトではそれぞれの画像の幅、もしくは固定のpx数を振るように指定するといいでしょう。

まとめ

肝としてはviewportの設定とメディアクエリによる幅ごとのCSSの指定です。

メディアクエリで特定の幅から画面が切り替えることができればレスポンシブサイトといえるでしょう。

参考：レスポンシブサイト用ブレイクポイント考察！時代に適するサイズとは？

昔はPCサイトのデザインや機能を決めた後、スマホページの見た目をメディアクエリで作るという流れが主流でしたが、これからはモバイルファーストの時代ですので、まず真っ先にスマホで閲覧するのに適したコンテンツ・見た目を作るのがスタンダードになっていきますので、これを意識したサイト制作ができればSEO的にもつよくなると思います。

シンメトリックでは、メディアクエリの設定不要でレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。