レスポンシブデザインでスマホ対応させる方法（CSS3、メディアクエリ）

2016年08月17日

2015年4月より、Googleは検索順位のランキング要因にモバイルフレンドリー（スマホ対応）を盛り込むことを開始しました。スマホを中心とするモバイルタブレットへの対応の一貫なのですが、この流れは今後より重要になっていくことでしょう。

今回はスマホ対応するために最もよく使われている方法である、レスポンシブデザインの作り方について解説します。SEO対策にもなるので、ぜひ参考にしていただければと思います。

レスポンシブデザインの基礎知識

はじめに、レスポンシブデザインの仕組みについて簡単に確認しておきましょう。

レスポンシブデザインとは、デバイスの横幅によって適用するCSSを切り替える方法を指しています。従来はデバイスごとにHTMLを分ける方法がとられてきましたが、レスポンシブデザインでは用意するHTMLはページごとに一つで済みます。

レスポンシブデザインを導入することのメリットについてもご紹介しておきましょう。

上で述べたように、レスポンシブデザインではページごとのHTMLが1つで済みます。そのため、開発工数を削減したり、保守管理や改修もし易くなるでしょう。冒頭で述べたように、SEOへの効果も期待できます。

一方で、既存のサイトをレスポンシブデザインに変更する場合、工数やコストが嵩んでしまうことがあります。状況によっては、レスポンシブデザインのサイトを新規に作成した方が良いこともあるでしょう。

レスポンシブデザインを作るときの手順について見ていきましょう。ここでは640pxをブレークポイントとして、横幅が640px以下のデバイスにのみ適用させるスタイルを書いていきましょう。

下のように記述することで、全体に適用させる共通のCSSと、640px以下のデバイスにのみ適用させるCSSを分けることができます。

/* 共通のCSSを記述 */

@media screen and (max-width: 640px) {
    /* 640px以下のデバイスにのみ適用させるCSSを記述 */
}

640px以下のデバイスでアクセスした場合、まずはじめに共通のCSSが読み込まれます。その後に、640px以下のデバイス向けのCSSが読み込まれます。つまり640pxの場合は、CSSが上書きされた結果、最終的にスマホ対応されたデザインで表示されるということです。

次に、HTMLファイルのheadタグ内に下のコードを記述します。これでレスポンシブデザインが働くようになります。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

レスポンシブデザインの作り方について解説しました。レスポンシブデザインは、そのための設計とブレークポイントを適切に決めることがポイントです。上手に採り入れていっていただければと思います。