スマホ対応必須 メディアクエリを使おう！
こんにちはスマホ対応化させるにはどうしてもメディアクエリを使って、画面サイズによって条件分岐させなければいけません、今回はメディアクエリを解説します。
そもそもメディアクエリとは
メディアクエリは画面の解像度や大きさなどの条件に対応してCSSのプロパティを変えたり、追加していくCSS3の機能です。
画面が大きい小さいを数値化して、その数値にそってCSSを決めていきます。それでは早速やっていきましょう！！
メディアクエリを使ってみる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>.box {
background-color: blue;
width: 500px;
height: 500px;
}
@media screen and (min-width:500px) {
/*500px以上で適用する内容*/
.box {
background-color: blueviolet;
}
}
@media screen and (min-width:1000px) {
/*1000px以上で適用する内容*/
.box {
background-color: chartreuse;
}
}パソコンでみている方はブラウザの横幅を小さくしてみてください、黄緑から紫へ変わったとおみます。このようにメディアクエリを使うと画面の大きさによってCSSを動的に変化させることができます。
メディアクエリを使う上での注意点
メディアクエリは順番が大切です。順番を間違えるとうまく機能しない場合があります。
@media screen and (min-width:500px)
これは画面のwidthが500px以上の時反映されます。なのでメディアクエリの順番を
１番 @media screen and (min-width:1000px)
２番 @media screen and (min-width:500px)
このような順番でやってしまうと1000px 以上で指定したいCSSが500pxのメディアクエリで上書きされてしまいます。ですので、数字の小さい順に上から書くようにしましょう
コメント