訪問者が利用する端末やブラウザのサイズによってページのデザインが変わる仕組みのことを「レスポンシブ」と言います。レスポンシブウェブデザインでは、ブラウザのサイズ（横幅）に応じて、読み込むスタイルシートが切り替わるメディアクエリ(Media Queries)という機能を利用してスタイルシートを作成します。ここではサイトをレスポンシブ対応させる方法についてお話していきます。

デザインが切り替わるブレイクポイントの設定

ブレイクポイントというのは、読み込むスタイルシートが切り替わるポイントのことです。ページをレスポンシブ対応させるには、はじめにブレイクポイントを決める必要があります。ブレイクポイントは、パソコン、タブレット、スマートフォンなどの端末のサイズを基準にするのが一般的です。ここでは、一般的なブレイクポイントの基準として下記のサイズを例にスタイルシートの切り替え方法についてお話していきます。

ブレイクポイントの一般例

レスポンシブ化の２つの方法

スタイルシートを切り替える方法は２つあります。

１．１つのスタイルシート内にメディアクエリを複数設定する方法

こちらの方が一般的なやり方です。

２．複数のスタイルシートを作成する方法

PC用、スマホ用など複数の端末に合わせたスタイルシートを別々に用意してそれぞれlink要素を設定する方法です。

１つのスタイルシート内にメディアクエリを複数設定する方法

ブラウザのサイズごとのスタイルシートの指定は、次のように記入します。

/* パソコン（width:960px以上） */
@media screen and (min-width:960px) {
	ここにパソコンのみに適用させるプロパティを記入
}

/* タブレット（width:600px~959px） */
@media screen and (min-width:600px) and (max-width:959px) {
	ここにタブレットのみに適用させるプロパティを記入
}

/* スマホ（width:599px以下） */
@media screen and (max-width: 599px) {
	ここにスマホのみに適用させるプロパティを記入
}

「@media screen and (サイズ指定)」という形でサイズを指定してカッコ「{}」の中にプロパティを記入していきます。この部分がメディアクエリになります。

このようにメディアクエリが設定されたカッコ「{}」内に書き込まれたプロパティは、指定されたブラウザのサイズのみに適用されるようになります。あとから編集する際に、メディアクエリのポイントが分かりやすいよう、上記のようにコメントを入れて、さらにプロパティのぶ部は１段多くスペースを設けると分かりやすくなります。

link要素で切り替える方法

１つのスタイルシートにすべての端末のスタイルシートを記入すると内容が多くなってしまう場合は、いっそのことメディアクエリごとにスタイルシートを分けても良いですね。この場合はhead内に記入するlink要素の部分にサイズの指定を入れます。

例えば、

<link rel="stylesheet" href="style.css"> <!-- 共通スタイルシート -->
<link rel="stylesheet" href="pc_style.css"> <!-- PC -->
<link rel="stylesheet" href="tablet_style.css">  <!-- タブレット -->
<link rel="stylesheet" href="sp_style.css"> <!-- スマホ -->

の場合、次のように記入します。

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="pc_style.css" media="screen and (min-width:960px)">
<link rel="stylesheet" href="tablet_style.css" media="screen and (min-width:600px) and (max-width:959px)">
<link rel="stylesheet" href="sp_style.css" media="screen and (max-width:599px)">

これで指定されたブラウザサイズのときだけスタイルシートが読み込まれるようになります。
以上がレスポンシブ対応の基本となるメディアクエリの設定方法です。