レスポンシブデザイン
スマートフォンやタブレットの普及に伴い、サイトを構築するときはデスクトップサイズだけでなく、
それぞれのデバイスにあったレスポンシブデザインの構築が必要になってきています。
今日はレスポンシブデザインを作る時に必ずと言っていいほど出てくるメディアクエリについて説明していきます。
メディアクエリ
通常、htmlのheadにcssを読み込ませるときは
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
のように記述します。
mediaとは
さきほどのコードの中にmedia=”screen”というのが出てきましたが、そもそもmedia属性とはなんなのかを簡単におさらいしましょう。
media属性では、screenのときはディスプレイ、projectionのときはプロジェクター、printのときはプリンタ、tvのときはテレビなど、
どのメディアのときに指定したスタイルシートを反映させるかというのを指定することができます。
またどのメディアの場合にも適応するallという値もあります。
media=”screen”にした場合、ディスプレイという媒体の時のCSSを読み込ませることが出来ますが、
ディスプレイの幅には依存しません。
いかなるディスプレイ幅のときでも同じCSSを反映させてしまいます。そこで登場したのがメディアクエリです。
メディアクエリ
ディスプレイの幅ごとに違うCSSを読み込ませたい場合、メディアクエリを指定します。
指定の仕方はmedia=”screen and (max-width:◯◯px) という風に
screenのあとに(max-width:◯◯px)もしくは(min-width:◯◯px)をつけることで指定出来ます。
media=”screen and (max-width:480px)”の場合は480px以下の場合を表示します。
media=”screen and (min-width:768px)”の場合は768px以上の場合を表示します。
480px以上768px以下を表示したい場合は
media=”screen and (max-width:480px) and (min-width:768px)”という風に指定します。
<link rel="stylesheet" href="small.css" type="text/css" media="screen and (max-width:480px)">
この場合は、480px以下の場合にsmall.cssを反映させます。
画面幅ごとに複数のCSSを読み込ませることもできます。
<link rel="stylesheet" href="small.css" type="text/css" media="screen and (max-width:480px)"> <link rel="stylesheet" href="middle.css" type="text/css" media="screen and (max-width:768px) and (min-width:1024px)"> <link rel="stylesheet" href="large.css" type="text/css" media="screen and (max-width:1024px)">
CSSファイルに直接書き込む
リンクでCSSを読み込ませるだけでなく、CSSファイルに直接書き込むこともできます。
@media screen and (min-width:480px) {
/* 画面サイズが480px以上のときの設定 */
p {font-size:16px}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面サイズが768px以上1024px以下のときの設定 */
p {font-size:18px}
}
@media screen and (min-width:1024px) {
/* 画面サイズが1024px以上のときの設定 */
p {font-size:24px}
}
上の場合のように小さいサイズから指定していく方法をモバイルファーストと呼びます。
@media screen and (max-width: 1024px) {
/* 1024px以下のときの設定 */
p {color:gray}
}
@media screen and (max-width: 768px) {
/* 768px以下のときの設定 */
p {color:red}
}
@media screen and (max-width: 480px) {
/* 480px以下のときの設定 */
p {color:blue}
}
@media screen and (max-width: 320px) {
/* 320px以下のときの設定 */
p {color:green}
}
上の場合のように小さいサイズから指定していく方法をデスクトップファーストと呼びます。
モバイルファーストとデスクトップファーストはどちらの方がいいのかを調べてみたところ、現在の主流はモバイルファーストのようです。
というのもデスクトップファーストで作ると、ブラウザが読み込まれる時、先にデスクトップのデータが読み込まれてしまい、モバイル版のデータが読み込まれるのが遅くなってしまうからです。
もちろん制作するサイトのターゲット層の閲覧環境がPCが多いとを想定しているのであればデスクトップファーストで問題ありません。
メディアクエリを書くときはモバイルファーストであれば「小さいサイズから大きいサイズ」デスクトップファーストであれば「大きいサイズから小さいサイズに」というルールがあるので忘れないようにしておきましょう。
また、私がたまにやってしまうのが、波括弧のとじ忘れと違うところのサイズに書くことです。
当たり前ですが、上記のようなことをすると反映されません。
データをアップしても反映されず、キャッシュをクリアしても全然反映されないときは閉じ忘れや記載する場所を改めて確認しましょう。
最後にiphoneとipadとpcの一般的なブレイクポイントを書いて終わりにします。
/* iphone縦の時の記載を最初にする */
@media screen and (min-width:480px) {
/* 480px以上でiphone横のときの設定に */
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 768px以上1024px以下でipadのときの設定に */
}
@media screen and (min-width:1024px) {
/* 1024px以上でpcのときの設定に */
}
普段iphoneの横を意識していなかったのですが、今後はきちんと見ていこうと思う今日このごろです。
へば！
