WEBデザイン

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

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

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

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

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

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

レスポンシブとは

レスポンシブ(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-widthmin-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からはここを読み込む */
}

まとめ

メディアクエリでレスポンシブができると、とても効率よくページをデザイン・コーディングすることができます。

Webデザインやサイトコーディングをしている人には必須の知識なので、Webページ制作の際はぜひ、このレスポンシブを使ってコーディングしてみてください。

ABOUT ME
FreeLaDay管理人
FreeLaDay管理人
現役フリーランスによる情報サイト。 webデザインに関する知識などを主に、コラムやライティング術など、在宅ワークが充実するような楽しい記事も掲載中です。