Contents
メディアクエリとは
メディアクエリとは、従来のCSSでは媒体までしか判断できなかったメディア・タイプを拡張して媒体の特性まで判断できるようにしたCSS3の要素のことです。
これを使用することで、メディア・タイプを拡張して媒体の特性まで判断できるようになり、レスポンシブデザインが作れるようになりました。
レスポンシブデザインとは、画面の大きさに合わせてレイアウトを調整するWebデザイン手法のことです。
あらゆるデバイスやディスプレイサイズでも見やすいWebページをデザインできるため、ユーザー満足度を高められるのがメリットと言えます。
メディアクエリの書き方
HTMLの場合
HTMLの場合ではリンクに直接埋め込むことで、メディアクエリを指定できます。
/* 画面サイズが500px以上はここを読み込む */
<link rel="stylesheet" href="style.css" media="screen and (max-width:500px)">
/* 画面サイズが500px以下はここを読み込む */
<link rel="stylesheet" href="style.css" media="screen and (min-width:500px)">CSSの場合
cssで記述する際には下記の通りに記述します。
media メディアタイプ and (メディア特性){
指定したいCSSの記述
}
@media screen and (min-width:500px) {
/* 画面サイズが500pxからはここを読み込む */
｝
@media screen and (min-width:500px) and ( max-width:1000px) {
/* 画面サイズが500pxから1000pxまではここを読み込む */
}
@media screen and (min-width:1000px) {
/* 画面サイズが1000pxからはここを読み込む */
}
