Media Queries(メディアクエリ)でサイトをレスポンシブにする

「モバイルファースト」をスローガンにスマホ最適化が必須となっているこの時代において、サイトのレスポンシブ対応は避けては通れない道です。

この記事ではMedia Queries(メディアクエリ)を用いてサイトをレスポンシブ対応にする方法をご紹介します。

サイトのレスポンシブ化とは

サイトのレスポンシブ化とは、ユーザーが使用するデバイスに応じてみやすいようにサイトを表示しましょうよ、という手法・概念のことです。

もっと正確に言うと、以下のようになります。

レスポンシブウェブデザインは、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。(Wikiより)

サイト担当者間では、レスポンシブ化=スマホ表示もしっかりとする、みたいな認識であることが多いので、「スマホ化」とか「スマホ最適化」とよく言い換えます。

モバイルファーストとは

Web業界にいれば必ず知っておかないといけないトレンドがこのモバイルファーストです。

どういうことかと言うと、最近ではサイトを閲覧するユーザーの70%以上がスマホユーザーになっています。

スマホ登場以前はPCの見た目だけを綺麗に整えておけば問題なかったのですが、スマホ登場以後スマホからの流入が圧倒的に増加し今ではその流入数が逆転しています。

つまり、ユーザーの多くはスマホでサイト見るんだからそっちも最適化しないとダメだよねって言うのがモバイルファーストです。

稀にモバイルファーストを歪曲しすぎて、「スマホサイトから作るべきだ」「PCはどうでもいいんだ」なんてことをいうWeb担当者がいたりするらしいですが、それは誤解です。

あくまで、ユーザーが見やすいように、利用しやすいようにと言う思想の元出てきたスローガンなのでPCを疎かにしていいわけでは無いです。

つまるところユーザーの利便性を徹底的に考え抜いたサイト最適化が求められていると言うことです。

Media Queries(メディアクエリ)を適用してみよう

レスポンシブについての前提知識を話終えたところで、早速Media Queriesの使い方、記法についてご紹介していきます。

HTML/CSSに2箇所記載するだけでレスポンシブ化できるので、簡単です。

JSでメディアデバイスごとに出し分けるような高度な方法ではないのでご安心ください。

Media Queriesの準備① HTML側の記述

まずはHTML側の記述。スマホ最適化のためにviewportを読み込んでおきましょう。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

いつものHTMLの<head></head>内に上記のメタタグを記述します。

巷ではビューポート(viewport)記述、スマホ最適化meta記述とか呼んだりしますが、これはサイトを表示する横幅をどうするのかを指定する呪文みたいなものです。

何を記述しているのか詳しく知りたい!という好奇心お化けの方のために、上記で指定している内容を一応補足しておきます。

“name”内

記述内容がviewportである事の宣言。meta name=”description”とかseoとかogpとかとごっちゃにならないように注意。

“content”内

width:表示領域の幅を200px~10000pxの範囲で指定できます。デフォルトは980担っています。今回はレスポンシブ対応にさせるのでdevice-widthと指定する事で、ユーザーのデバイス幅を指定しています。

initial-scale:デフォルトのズーム倍率です。数値で指定しますが、だいたい等倍の1を指定。

minimum-scale:最小倍率の指定ができます。0~10の範囲で指定でき、デフォルトは0.25です。

maximum-scale:最大倍率の指定ができます。最小値と同様0~10の範囲で指定でき、デフォルトは 1.6です。

user-scalable:ユーザーのズーム処理の許可不許可の指定が可能。yes/noで指定でき、デフォルトでyesになっています。基本はnoで。

Media Queriesの準備② CSS側の記述

HTML側の記述ができれば、次にCSS側の記述をしましょう。

HTML側のviewportでユーザーの端末の横幅を認識できるようになったので、CSSでその横幅ごとにCSSを出し分けるという記述を施します。

デフォルトでは上記のように「PC」「タブレット」「スマホ」用にそれぞれ記述します。

それぞれ解説します。

@media screen and (min-width: 768px) { }

min-width: xxxpx;」はxxxpxよりも大きい幅の時は{}内のCSSを適用するよという記述です。 上記で言えば、デバイス幅が768px以上の時に{}内のCSSを適用することになります。

わかりやすくするために今回はPC用にと記述しましたが、以下2つでタブレット、スマホを指定できているので記載不要です。

@media screen and (max-width: 767px) { }

min-width: xxxpx;」はxxxpxよりも小さい幅の時は{}内のCSSを適用するよという記述です。 上記で言えば、デバイス幅が767px以下の時に{}内のCSSを適用することになります。

※以下で別途480px以下の指定をしているので、481px以上767px以下(タブレット+ちょっと大きいスマホ)は上記のCSSが適用されるわけです。

@media screen and (max-width: 480px) { }

min-width: xxxpx;」はxxxpxよりも小さい幅の時は{}内のCSSを適用するよという記述です。 上記で言えば、デバイス幅が480px以下の時に{}内のCSSを適用することになります。

大体のスマホは480px以下で網羅できるので、上記の記述をしとけばレスポンシブは怖いもの無しです。

CSS側の記述も意外と簡単ですよね。

他にもCSS側では以下のような設定もできるのでメモ程度に。(私はほとんど指定したことがないですが)

Max Device Width:デバイスサイズの最大幅の指定。このサイズより小さい場合に適用されます。

Min Device Width:デバイスサイズの最小幅の指定。このサイズより大きい場合に適用されます。

Device Pixel Ratioデバイスの解像度の指定

Orientationデバイスの向きの指定

これでサイトのレスポンシブ対応は完了です。意外と簡単ですよね。

Media Queries(メディアクエリ)記述の際の注意点

最後によくあるMedia Queries(メディアクエリ)の記述ミスをサクッと。

メディアクエリを指定しているのに、CSSが適用されない!という時は以下のようなミスが非常に多いのでチェックして見てください。

  • viewportの記述忘れ、間違い
  • 読み込んでいるCSSファイルが違う
  • @media screen and (max-width: 767px) { }の最後の } が一つ足りない

特に最後のは非常に多いミスなので、まずこれを疑ってみてください。

 

是非快適なコーディングライフを。

media queries eyecatch
Twitterでも色々呟きますので、フォローどうぞ。