今更聞けないメディアクエリを使ってレスポンシブデザインを導入する方法

2015年4月に、Googleがモバイルフレンドリーを検索順位の決定要因とすると発表しました。モバイルフレンドリーを実現する技術として、レスポンシブデザインはより一層注目されていくことでしょう。CSSのメディアクエリを利用した、レスポンシブデザインの導入方法について解説します。

レスポンシブデザインの基本

最初に、レスポンシブデザインについて復習しておきましょう。レスポンシブデザインとは、サイトを閲覧したデバイスによって、ページのレイアウトを自動で調整する技術のこと。デバイスごとにHTMLを分ける必要がないため、導入することでさまざまなメリットが得られます。サイト制作や管理工数の削減、SEO対策、SNSでバズらせるための施策としても効果があるんです。

なお、レスポンシブデザインとスマホ対応は、イコールではありません。レスポンシブデザインとは、スマホ対応を実現するための一つの方法。スマホ対応をするための手段は他にもありますが、ここでは割愛します。

レスポンシブデザインを導入する

ここからは、レスポンシブデザインの導入手順を解説していきます。レスポンシブデザインを実現する方法として、ここではCSS3から追加されたメディアクエリを利用する方法をご紹介します。

準備

まずは、レスポンシブデザインを導入するための準備から。レスポンシブデザインを導入する前に、レスポンシブサイトの設計を行います。対象とするデバイスから、要素のレイアウトまで詳細に決める必要があります。

ブレークポイントを決定する

次に、ブレークポイントを指定します。レスポンシブデザインでは、一つのページには原則一つのHTMLファイルしかありません。一方で、CSSファイルは複数あります。デバイスのディスプレイサイズによって、適用させるCSSファイルを切り替えているのです。この、適用させるCSSファイルを切り替えるポイントのことを、ブレークポイントと呼びます。

例えば、PCとスマホのCSS切り替えを768px（ディスプレイの横幅）で行うとしましょう。768pxを超える横幅のデバイスではPCレイアウトで表示され、768px以下の場合はスマホレイアウトでサイトが表示されるのです。

注意点としては、ブレークポイントを適切に決めること。ブレークポイントを細かく設定し過ぎてしまうと、その分だけ制作工数・コストが嵩んでしまいます。注意しましょう。

メディアクエリを記述する

さて、ここからがメディアクエリの出番です。メディアクエリの記述方法についてまとめておきましょう。

・max-width

・min-width

max-widthとmin-widthは、同時に指定することもできます。768px以上1024px以下、といった指定も可能、ということです。

さて、それでは実際にメディアクエリを記述していきましょう。具体的には、HTMLファイル内でリンク要素として指定するか、CSSスタイル内で指定します。HTMLファイル内で指定する場合は、内で読み込むCSSファイルを切り替えます。さきほどの例の通り、768pxをブレークポイントとするケースについて考えていきましょう。下記のように記述すると、768px以下のスマホにだけ適用させるCSSを読み込むことができます。

<link rel="stylesheet" media="screen and (max-width: 768px)" href="smartphone.css" />

CSSスタイル内で指定する場合は、下記のように記述します。デバイスごとのCSSを一つにファイル内にまとめている場合などは、この方法を使うことになります。

<br />
@media only screen<br />
    and (max-width: 768px) {<br />
    /* ここにCSSを記述 */<br />
}<br />

CSSスタイルを記述する

ブレークポイントごとのCSSスタイルを記述します。レスポンシブデザインの場合、リキッドなデザインにするとよいでしょう。ディスプレイサイズによって要素が柔軟に配置されるよう、パーセント指定を活用してください。

viewportを設定する

HTMLファイルにviewportを指定して、完了です。

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

レスポンシブデザイン導入の盲点

レスポンシブデザインの導入手順について解説してきましたが、盲点とも言うべき注意点もあります。具体的に言うと、画像です。レスポンシブデザインでは要素をパーセント指定をすべきと述べましたが、バナーなどの画像には一工夫が必要です。PCでは文字が読めていたが、スマホレイアウトになると文字が小さくて読めない、といったことも出てきます。対策としては、画像を複数用意、ブレークポイントごとに画像を切り替えるとよいでしょう。

まとめ

いかがでしたでしょうか。BootstrapなどのCSSフレームワークを利用することでも、レスポンシブデザインの導入が可能です。いろいろと活用していきたいものです。

いまや、多種多様なデバイスが登場しています。PCやスマホ、タブレットと言っても、さまざまなディスプレイサイズの製品があります。ウェブ技術として、レスポンシブデザインはますます注目を浴びていくことでしょう。上手に使っていってくださいね。