CSS

レスポンシブウェブデザインの基本|メディアクリエリの設定

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

コンテンツ

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

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

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

端末 画面の横幅(px)
パソコン 960px~
タブレット 600px~959px
スマホ ~599px

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

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

1.1つのスタイルシート内にメディアクエリを複数設定する方法
こちらの方が一般的なやり方です。
2.複数のスタイルシートを作成する方法
PC用、スマホ用など複数の端末に合わせたスタイルシートを別々に用意してそれぞれlink要素を設定する方法です。

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

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

/* パソコン(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 (サイズ指定)」という形でサイズを指定してカッコ「{}」の中にプロパティを記入していきます。この部分がメディアクエリになります。

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

link要素で切り替える方法

1つのスタイルシートにすべての端末のスタイルシートを記入すると内容が多くなってしまう場合は、いっそのことメディアクエリごとにスタイルシートを分けても良いですね。この場合は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)">

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

最近の記事

  1. CSS

    CSS|中央寄せが効かないときは・・・
  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  3. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP