ポケモンGOが大盛り上がりで、改めてスマートフォン向けのコンテンツの可能性を感じる今日この頃です。
私もたまたまアメリカのiTunesアカウントを持っていたので、ポケモンGOをダウンロードしてみました。
が、ポケモンで遊んだことがないので、まだポケモンGOの面白さは理解できませんでした…機会があれば記事にしてみたいと思います。

話がずれましたが、今回はレスポンシブWebデザインを発注する際に必要な知識を改めて基本から確認する、”これだけは知っておきたい！レスポンシブ・Webデザイン発注のポイント” 第二回です。

”これだけは知っておきたい！レスポンシブ・Webデザイン発注のポイント” 第一回はこちら

今回は、レスポンシブWebデザインでは必ずといっていいほど使われる、”メディアクエリー”という機能についてご説明します。

メディアクエリーとは何か

メディアクエリーとは、ものすごく簡潔に言うと、”スマートフォンやPCなどのデバイス毎に、違った見た目を表示させることができる機能”のことです。

メディアクエリーを使うことによって、レスポンシブWebデザインではWebサイトを様々なデバイスに最適化して表示することが可能です。

メディアクエリーの様々な機能

メディアクエリーでは、デバイスのサイズや解像度、またはデバイスの向きなど様々な条件に応じて、Webサイトの見た目を変更させることができます。

こう書くと”メディアクエリーってすごい！何でもできそう！”と思われてしまう方がいらっしゃるのですが、実際メディアクエリーというのはデバイスのサイズや解像度などを判定して、あらかじめ複数用意したWebサイトのデザインデータの中から指定したデザインを表示する機能なので、もしいろいろなデバイスに対応したい場合は、その分だけWebサイトのデザインデータを作成する必要が有ります。

例えばWebサイトのデザインデータを1~3番の三つ作成したとして、iPhone6Sの場合はWebサイトのデザイン1番を、PCの場合はWebサイトの2番を、iPadなどのタブレットの場合は3番を表示して欲しい、とメディアクエリーで設定することによって、それぞれのデバイスに最適化された見た目を表示できるのです。

メディアクエリーを使用するために必要なヒアリング・ポイント

レスポンシブWebデザインを行う際、使わないことはない必須機能のメディアクエリーですが、実際使用するためにはいくつか必ずクライアントに確認しておかないといけないポイントがあります。

それに関しては、”これだけは知っておきたい！レスポンシブ・Webデザインのポイント” 第三回でお伝えしますので、どうぞご期待ください。