【レスポンシブ】メディアクエリの書き方

以前は、「ウェブサイト＝パソコンでみる」というのが一般的でしたが、

最近では、スマートフォンやタブレットで見る人がとても多くなりました。

そのため、今まではパソコンで見れるサイトを作ればよかったものが、パソコン＆スマートフォンで見れる（見やすい）サイト。

もしくは、パソコン＆スマートフォン＆タブレットで見れる（見やすい）サイト。

を作る必要があり、そこで出てきたのがレスポンシブデザインという手法です。

Contents

1 レスポンシブとは
2 メディアクエリとは
- 2.1 端末別画面サイズ
  - 2.1.1 一般的なブレイクポイント
3 メディアクエリの書き方
- 3.1 HTMLファイルに書く場合
- 3.2 CSSファイルに書く場合
4 まとめ

レスポンシブとは

レスポンシブ（responsive）というのは、『敏感に反応する』という意味を持っており、レスポンス（反応）という言葉から来ています。

今までは

パソコン用サイト + スマートフォン用サイト=2サイト

のように別々に作っていたものが、このレスポンシブ（メディアクエリ）の登場で、

パソコン用&スマートフォン用サイト=1サイト

ということが可能になり、サイト制作や更新がとても効率的になりました。

この、レスポンシブwebデザインを実現するのがメディアクエリです。

メディアクエリとは

メディアクエリとは、CSSのmediaタイプを発展させ、CSS3で新しく出てきた要素です。

以下のコードはHTML作成の際、記述するので見たことがあると思います。

<link rel="stylesheet" href="css/style.css" media="screen">

これは、通常のディスプレイでは、style.cssを適用します。

という意味のコードになります。

端末別画面サイズ

ここで、端末別の画面サイズをおおまかに理解しておきましょう。

パソコン	1280px以上
タブレット	600px〜1024px
スマートフォン	320px〜540px

上記のサイズを参考に、ブレイクポイント（表示の切り替え）の指定をしていきます。

一般的なブレイクポイント

ブレイクポイントは、上の表の範囲内であれば、多少アバウトな指定をしてもOK！

結論、それぞれの端末で見た時に崩れがなく、きちんと見やすい状態であれば問題は無いからです。

以下は一般的なブレイクポイントです。

パソコン用	1069px〜
タブレット用	768px〜1068px
スマートフォン	〜767px

もっと細かくブレイクポイントを設ける場合もありますが、基本的には上記の値を軸に考えていきます。

メディアクエリの書き方

実際にメディアクエリの書き方を説明します。

あわせて、メディアクエリにはブレイクポイントを指定する際にmax-widthとmin-widthというものを使います。

「max-width」と「min-width」ってなに？

と思った方は以下の表を参考にしてください。

max-width:○○px	○○pxまで
min-width:●●px	●●pxから

上記を頭に入れながら以下のコードを見ていきましょう。

HTMLファイルに書く場合

この方法は、htmlの<head>~</head>の中に記述します。

先ほど紹介した書き方と似ていますが、メディアクエリに対応させる場合は、

○○px以下

ディスプレイサイズ「767px以下」ではsp.cssを適用する場合。

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

○○px以上

ディスプレイサイズ「768px以上」ではtab.cssを適用する場合。

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

○○px〜○○pxの間

ディスプレイサイズ「481px〜1023px」ではtab.cssを適用する場合。

<link rel="stylesheet" href="tab.css" media="screen and (min-width:481px) and (max-width:1024px)">

複数指定

以下のように、複数の指定をすることも可能です。

<link rel="stylesheet" href="pc.css" media="screen and (min-width:1024px)">
<link rel="stylesheet" href="tab.css" media="screen and (min-width:481px) and (max-width:1023px)">
<link rel="stylesheet" href="sp.css" media="screen and (max-width:480px)">

ディスプレイサイズ「1024px以上」でpc.cssを、「481px〜1023px」ではtab.cssを、「480px以下」はsp.cssを適用する場合。

CSSファイルに書く場合

スタイルシート（CSS）に書く場合は、記述が少し変わります。

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

ディスプレイサイズが「480px以下」はこの中の記述を適用します。

という意味になり、以下のように{}の中に適用させるスタイルを記述します。

p{color:black;}
@media screen and (max-width:480px) {
p{color:blue;}
}

上記の記述だと、画面サイズが480px以下で文字色が青になり、それ以上のサイズでは文字色は黒になります。

○○px以下

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

○○px以上

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

○○px〜○○pxの間

@media screen and (min-width:481px) and ( max-width:1023px) {}

複数指定

/*　全てのサイズで読み込まれます　*/

@media screen and (min-width:1024px) {
/*　画面サイズが1024pxからはここを読み込む　*/
}

@media screen and (min-width:481px) and ( max-width:1023px) {
/*　画面サイズが481pxから1023pxまではここを読み込む　*/
}

@media screen and (max-width:480px) { 
/*　画面サイズが480pxからはここを読み込む　*/
}