【レスポンシブ対応に欠かせない！】CSSのメディアクエリの書き方と構成式について

ひぐま
ひぐま

メディアクエリって？

メディアクエリを用いることで、画面の解像度の違いや、デバイスの種類などそれぞれの環境に応じたスタイルに切り替えを行うことができます。

そのため、昨今ではPC,スマホ,タブレットといった、端末のサイズに応じてデザインの切り替えを行うレスポンシブサイトにおいて欠かせないものになっています。
今回はそのメディアクエリの指定について、よく使用する例を抜粋してご紹介いたします。

メディアクエリの基本

スタイルシートにおけるメディアクエリの基本の指定方法は下記のようになります。

@media メディアタイプ and (メディア特性) { 指定CSS }

1.メディアタイプ

メディアタイプでは、適用するデバイスの種類を判断します。

all
すべてに適用
print
プリンターのデバイスで適用(印刷時に適用)
screen
PCやスマートフォンなど、プリンター以外のデバイスで適用

allはデフォルト値であり省略が可能です。メディアタイプの指定のない場合も"すべてに指定(all)"となります。

また、このメディアタイプは、HTMLの<link>要素でも指定が可能です。
よって、下記のようにスタイルシートをメディアタイプ別に分け、読み込みを分岐することもできます。

<!--スクリーン用に適用されるCSS-->
<link rel="stylesheet" href="css/style.css" media="screen">
<!--プリント用に適用されるCSS-->
<link rel="stylesheet" href="css/print.css" media="print">

2.メディア特性

ユーザーエージェント、使用端末、環境などの特性を条件として指定します。

たくさんあるメディア特性ですが、 経験上よく使用されるものを抜粋してご紹介いたします。

①width

デバイスの画面幅を検出して判断します。

min-width：〇〇px
適用されるデバイスの最小サイズを指定します。
max-width：〇〇px
適用されるデバイスの最大サイズを指定します。

例えばスタイルシートで、スマホ、PC、タブレットで切り替えを行う場合は下記のように切り分けをします。

/*PCサイズに適用*/
@media screen and(min-width:1024px){
	CSSの指定をここに
}
/*タブレットサイズに適用*/
@media screen and(max-width:1023px) and(min-width:600px){
	CSSの指定をここに
}
/*スマホサイズに適用*/
@media screen and(max-width:599px){
	CSSの指定をここに
}

上記のようにレスポンシブデザインにおいてデザインを切り替えるポイントはブレイクポイントと呼ばれています。
例えば、PCでのコンテンツ大きさが1080pxほどだったとして、スマホやタブレットでそのスタイルのデザインを反映してしまうと領域をはみ出してしまいますよね。
コンテンツがデバイスの領域を超えてしまうと意図しないスクロールが発生してしまったり、文字など必要な情報が隠れてしまったり、デザインの体裁が崩れてしまって非常に見づらくなってしまいます。
そこで、ブレイクポイントを追加して、デザインを適切な形で納めるためにメディアクエリを使っています。

販売される端末の普及具合で需要が毎年変わるため、その時々で、より普及しているデバイスサイズに合わせて指定すると良いです。

②orientation

ビューポートの向き(縦長、横長)に応じて判断します。横向き、縦向きに切り替えのできるタブレットやスマホの場合に向きの切り分けで使われたりします。

/*ビューポートの向き横向き(横長)の場合に適用*/
@media (orientation: landscape){
	CSSの指定をここに
}
/*ビューポートの向き縦向き(縦長)の場合に適用*/
@media (orientation: portrait){
	CSSの指定をここに
}

2.論理演算子と,(カンマ)

論理演算子は複合的なメディアクエリを構成するために用いられます。

not
特定条件を否定します。そのため通常の指定と反転した条件になります。
例：@media not (orientation: portrait) { CSSの記述 }/*ビューポートの向きが縦向きでない場合に適用*/
and
andで結びつけることで〇〇かつ、〇〇の場合などといった複数指定ができます。
例：@media (min-width:340px) and (orientation: landscape) { CSSの記述 }/*340px以上で、ビューポートの向きが横向きの場合に適用*/
only
指定した条件以外を対象外とします
＊古いブラウザで適用されるのを防ぐことが目的のため、最近のブラウザーで適用されることはありません。
,(カンマ)
カンマで区切りリストにすることで「〇〇または〇〇の場合に適用」といった条件を指定できます。
例：@media (max-width:1023px), (orientation: portrait) { CSSの記述 }/*1023px以下の画面か、ビューポートの向きが縦向きの場合に適用*/

JSでのメディアクエリについては、下記の記事で紹介しております。是非参考にしてくださいね。

レスポンシブ対応時のJavascriptとメディアクエリ

関連記事