みなさんこんにちは。
今回はレスポンシブWebデザインのメディアクエリの考え方について学んでいこうと思います。
レスポンシブWebデザインとは、スマートフォン・PG等どんなデバイスでも画面サイズに応じてレイアウトを変更する手法のことを指します。
つまり、Webサイトのレイアウトをスマホで見た時は一列に、PCで見た時は2列以上に…といったように変更できるのです！
それにはまずはメディアクエリというものをCSSに記載しなければいけません。
＜サンプル＞
@media only screen and (min-width:700px){
body{
background-color:red;
}
}
@media only screen and (min-width:1000px){
body{
background-color:blue;
}
}
上記をCSSファイルに記載し、HTMLとリンクしてみましょう。
画面サイズが700px以上であれば赤に、1000px以上であれば青になります。
ポイントは「min-width」の部分です。
「min-width:700px」というのは「最低でも700px」という意味で、つまり700px以上ということになります。
このように、●●px以上になったらこのCSSを適用したいですよ！という命令を指示していくわけです。
これにより、画面幅が小さい時はfloatを指定せずに一列のレイアウトにし、画面幅が広い時にはfloatを指定し複数列に…ということが可能になります。
みなさん、是非とも試してくださいね！
