レスポンシブwebサイトを作成するに当たって必ず出てくるのがメディアクエリ（Medhia Queries）とブレイクポイント（Break Points）です。
※ブレイクポイントはブレークポイントと表記することもあるようです。
日本語読みなのでどちらでもいいとは思いますが、ここではブレイクポイントと表記します。
この2つの役割等を調べてみました。
メディアクエリとは
メディアクエリとはサイトをレスポンシブ対応にする際に、対応するメディアに合わせたスタイルシートを設定するために必要な式の事を表します。
式というと数学の公式的なものを思い浮かべると思いますが、要はメディアサイズに合わせたルールを決めましょうという事です。
メディアクエリが出る前まではPCサイトと携帯サイトを別々に作成し、.htaccessファイル等でアクセス制御を行って見せ方を変えていました。
ただ、その方法ではスマートフォンやタブレット端末の普及により、対応しきれなくなっていた時の策としてCSSメディアクエリが開発されています。
これによって、コンテンツそのものは１つで、出力デバイスに合わせて表現を変える事が出来るようになっています。
このメディアクエリですが、CSS2からCSS3にかわることによって、メディア依存のスタイルシートのサポートが強化されていて、よりメディアや出力デバイスの特性に合わせたスタイルシートを構築することが可能なってきています。
プレイクポイントとは
ブレイクポイントとはメディアクエリを使用して出力デバイスの変更を行う際に、デバイス表示の切り替えを行う数値を表します。
例えば基本CSSを用意して、デバイスが幅320px以下の場合と321pxから600pxまで、601px以上の場合で表現を変える際には次のように切り替えを行う事になります。
記載例
実際にメディアクエリをサイトに適用させる場合の記述をしてみます。
ここではHTMLにブレイクポイントを記述する方法と、スタイルシートに記述する2通りの方法を紹介します。
htmlにブレイクポイントを記述
<link rel="stylesheet" href="style.css"> ：基本CSS <link rel="stylesheet" media="(max-width:320px)" href="small.css"> ：画面表示幅320px以下の場合、small.cssを適用 <link rel="stylesheet" media="(min-width:321px) and (max-width:600px)" href="middle.css"> ：画面表示幅321px以上、600px以下の場合、middle.cssを適用 <link rel="stylesheet" media="(min-width:601px)" href="large.css"> ：画面表示幅601px以上の場合、large.cssを適用
※上記コードはmedia要素とhref要素は逆でも構いません。たとえば次の様になります。
<link rel="stylesheet" media="(min-width:601px)" href="large.css"> <link rel="stylesheet" href="large.css" media="(min-width:601px)">
スタイルシートにブレイクポイントを記述
上記例はhtmlの中にメディアクエリを書き込んだ例ですが、スタイルシートに書き込む方法もあります。
この場合はブレイクポイントと同時にスタイルシートも記述する形になります。
@media only screen and (max-width : 320px){
} ：320px以下に対応するCSSを書き込み
@media only screen and (min-width : 601px) and (max-width:600px){
} ：321px以上、600pxいかに対応するCSSを書き込み
@media only screen and (min-width : 601px){
} ：601px以上に対応するCSSを書き込み
メディアクエリはどこに設定するのがベスト？
メディアクエリの設定をhtmlに書き込む場合とスタイルシートに書き込む場合の2通りを紹介していますが、設定方法のメリット、デメリットを見てみます。
htmlに書き込む場合
メリット
・スタイルシート毎に管理出来るので管理しやすい。
・ブレイクポイントの変更が簡単
・@mediaをスタイルシート内に記述する必要がない
デメリット
・コンテンツの構造を変更した際に、すべてのスタイルシートの変更が必要になる
スタイルシートに書き込む場合
メリット
・スタイルシートを1つのファイルにまとめることができる
デメリット
・スタイルシートが長くなるので見にくくなる
・ブレイクポイントを変更する時に更新性が悪くなる
ただ、1つ言えるのは2つの方法を混合して使う事です。これを行うと一気に作業性が悪くなります。
やってはダメな事
やってはダメな例を示します。
これはhtmlにブレイクポイントを600pxで設定し、さらにスタイルシートで320pxにブレイクポイントを設定しているパターンです。
htmlコード
<link rel="stylesheet" href="style.css"> ：基本CSS <link rel="stylesheet" media="(max-width:600px)" href="small.css"> <link rel="stylesheet" media="(min-width:601px)" href="large.css">
small.cssコード
@media only screen and (max-width : 320px){
}
@media only screen and (min-width : 601px) and (max-width:600px){
}
このような事を行うと構造が複雑になって、管理も出来なくなるし、作業性・生産性も悪くなります。
min-device-widthを使う際の注意点
メディアクエリの設定要素の中に、max-device-widthやmin-device-witdth等の-device要素がありますが、この要素は使用しない方がよさそうです。
その理由がGoogle Developersのサイトで解説しているので紹介します。
最後に
レスポンシブwebサイトを構築するに当たって、メディアクエリとブレイクポイントの関係を紹介しましたが、メディアクエリの設定1つにしてもアプローチ方法は色々とあります。
自分に合った方法を見つけることで作業性は向上していくと思うので、参考にして頂ければと思います。
こちらも参考に
レスポンシブWebデザイン 制作の実践的ワークフローとテクニック
コメント