【CSS】メディアクエリとブレイクポイントの書き方 2018年版 レスポンシブデザインの基本
目次
レスポンシブデザインの基本 メディアクエリとは
メディアクエリとは、CSS2で可能だった「media」タイプを発展させた、CSS3の新しい要素です。
mediaタイプの主なものは、
screen（一般的ディスプレイ）、projection(プロジェクター)、print(プリンタ)、tv(テレビ)、all(すべて)
などが挙げられます。
CSS2は上記のように、端末のタイプごとにスタイルを切り分けられることができましたが、それが限界でした。
たとえば、「ディスプレイ」といっても、今やスマホ、タブレット、PCと様々なデバイスが存在しており、それを一括りにしていては（端末毎にサイトを作る場合は別ですが）、見づらいスタイルになってしまいます。
そこで、メディアクエリが活躍します。
mediaタイプ + そのメディアの特性 まで指定できるようなり、その特性毎に適用スタイルを切り分けられるようになりました。
このメディア特性を指定できるのがメディアクエリというわけです。
よく耳にする、「レスポンシブデザイン」というのは、これを使っています。
画面のサイズに応じて、スタイルを切り分けるようにしているのですね。
メディアクエリの書き方
HTMLに書き込む方法
では具体的に、メディアクエリの書き方を見ていきます。
一つ目のやり方は、htmlのheadタグの中に、link要素として記述する方法です。
こんな感じで。
<head> <link rel="stylesheet" href="style.css" media="screen and (min-width:1024px)"> </head>
「and (min-width:1024px)」がメディアクエリです。
“screen”媒体かつ、1024px以上の横幅である場合、このスタイルを適用するという意味です。
「min」は、”もっとも小さい(=minimum)”ですね。
「このcssファイルを読み込むのは、横幅が最低1024pxまでですよ」という意味になります。
これを
<link rel="stylesheet" href="style_small.css" media="screen and (max-width:480px)"> <link rel="stylesheet" href="style_medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> <link rel="stylesheet" href="style_big.css" media="screen and (min-width:1024px)">
みたいな感じで指定すれば、端末の画面サイズ毎に読み込むcssファイルを切り分けられます。
ちなみに、それぞれ指定している画面幅のことを”ブレイクポイント”と呼びます。
CSSに書き込む方法
HTMLでは、読み込むファイルを切り分けましたが、一つのスタイルシートにメディアクエリを指定する方法もあります。
こちらの方が一般的でしょう。それぞれのcssファイルを用意するよりも一つにまとめた方がやりやすいのと、スタイルの指定はやはりcssに任せた方がよいから、画面サイズが変わるたびに読み込むファイルを変えるの負担がでかいから（だと思います…）。
書き方はこんな感じです。
.hoge {
color:#ffffff;
}
//これはすべてのメディアで読まれる
@media screen and (min-width:480px) {
.hoge {
color:#333333;
}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
.hoge {
color:#000000;
}
}
@media screen and (min-width:1024px) {
.hoge {
color:#fff000;
}
}
上記は指定しているスタイルが一つだけ（hogeクラスの文字色）のみなのでわかりやすいですが、いろいろ複雑なスタイルにしていくと、わけわからなくなるかもなので、注意が必要です。
メディアクエリの指定順に注意せよ
メディアクエリを指定する際の注意点は、「メディアクエリの指定順序」です。
ブラウザは、各ファイルを上から下へ読み込んでいきます。
そのため、画像が小さい→大きいの順、もしくは、大きい→小さいの順に書いていく必要があります。
これを例えば、
小
↓
大
↓
中
のような流れで書いてしまうと、ブラウザが理解できず、正しい表示ができなくなります。
ちなみに、小さい→大きいの順に指定している場合（つまり画面が小さい場合のスタイルを優先的に考えている）、「モバイルファースト」と呼び、逆の場合を「デスクトップファースト」なんて呼んだりします。
適切なブレイクポイントはどこだ？ メディアクエリのテンプレート
メディアクエリのブレイクポイントの考え方は、スマホ用/タブレット用/PC用 の３つに分けられれば基本的には十分です。
ただ、小さい端末が主流だったと思いきや、iPhone6を境に画面サイズの拡大が進んだりと、一体、何pxにすれば適切なのか、悩ましいものです。
結論としては、ブレイクポイントは、600px、960px、1281pxでよさそうです（2017年4月現在）。
つまり、
・599pxまではスマホ
・600px～959pxまではタブレット
・960px～1280pxまでは通常のデスクトップ
・1281px以上は、横幅の広いデスクトップ
ということです。
これにしたがって、モバイルファーストでテンプレートを用意するのであれば、
// スマホに適用するスタイルを書く //
@media screen and (min-width:600px) and ( max-width:959px) {
// タブレットに適用したいスタイル //
}
@media screen and (min-width:960px) and ( max-width:1280px) {
// 通常のデスクトップに適用したいスタイル //
}
@media screen and (min-width:1281px) {
// 横幅の広いデスクトップに適用したいスタイル //
}
って感じです。もちろん、今後の端末の大きさ事情によっては、別のブレイクポイントを設ける必要が出てくるかもしれません。
また、スマホやタブレットの縦表示、横表示に応じてスタイルを分けたい場合は、もう少し細かいブレイクポイントが必要となります。
代表的な端末毎の画面サイズについては、下記サイトに詳しくありますので、ご参考ください。
-iPhone,iPad
-Android
メディアクエリ その他の指定方法
端末の向きで指定する
スマホやタブレットで、端末を縦にしている時と、横にしている時でスタイルを変えたい場合に、画像サイズではなく、「向き」で指定する方法です。
//縦向き
@media screen and (orientation:portrait){
.hoge {
font-size: 12px;
}
}
//横向き
@media screen and (orientation:landscape){
.hoge {
font-size: 16px;
}
}
まとめ
サイトデザインによっては、こまかなブレイクポイントを設けるケースがあるかもしれませんが、およそは、ご紹介したテンプレートを活用すれば、スマホ、タブレット、PCで切り分けられると思います！考えるのが面倒な時は、活用してください。
メディアクエリを使った、レスポンシブデザインが学べるオススメの本を紹介いたします。
ぜひ合わせてチェックしてみてください！
