制作会社様とのやり取りに特化したコーディング代行ならくまWebにお任せください！

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

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

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

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

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

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

導入するメリット・デメリット

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

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

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

レスポンシブデザインの作り方

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

CSSを書く

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

/* 共通のCSSを記述 */

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

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

HTMLにviewportを書く

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

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

あとがき

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