メディアクエリ（Media Queries）とは？
サポート部の本田です。朝晩はすっかり気温も下がり、過ごしやすくなってきましたね。
今回はレスポンシブデザインでサイトを構築する上では欠かすことのできない、メディアクエリ（Media Queries）について書いてみます。
そもそもメディアクエリとは、スクリーンサイズに応じてスタイル（CSS）を切り替える機能になります。Google開発者サイトにも以下の記述があります。
メディア クエリは、CSS スタイルに適用できるシンプルなフィルタです。メディア クエリを使用すると、デバイスの種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易に変更できるようになります。
ーCSS メディア クエリを使用してレスポンシブにする
今回はスクリーンサイズによってリストが変化するCSSを適用したメディアクエリの使い方を説明していきたいと思います。
上記デモサイトにアクセスしてみて、ブラウザの幅を縮めてみてください。
スクリーンサイズが962px以上となるとリストが4列となっています。
次にスクリーンサイズが642pxから959pxですと、リストが2列となっています。
そして最後にスクリーンサイズが639px以下になるとリストが1列表示となります。
使っているHTMLのコードは一つですが、スクリーンサイズによってメディアクエリを使い、スタイルを切り替えて列の数を調整しています。
では今回のデモサイトで使用したコードをご紹介します。
HTML
まずはHTMLです。
<ul> <li class="li01"><p>リスト</p></li> <li class="li02"><p>リスト</p></li> <li class="li03"><p>リスト</p></li> <li class="li04"><p>リスト</p></li> </ul>
このようにリストとして使うHTMLは1つです。
CSS
次にCSSです。メディアクエリを使って適用させるCSSを切り替えています。
<style>
/*全スクリーンサイズで共通のCSS*/
li {
border-radius: 10px;
color: white;
border-top: 2px solid rgba(255,255,255,0.2);
border-bottom: 3px solid rgba(0,0,0,0.3);
}
li.li01 {
background: #f44336;
}
li.li02 {
background: #2196F3;
}
li.li03 {
background: #4CAF50;
}
li.li04 {
background: #FFC107;
}
/* スクリーンが962px以上のとき以下の下記CSSを適用 */
@media screen and (min-width: 961px) {
li {
display: inline-block;
width: 24%;
}
}
/* スクリーンが642pxから959pxの際に下記CSSを適用 */
@media only screen and (min-width: 641px) and (max-width: 960px) {
li {
display: inline-block;
width: 49%;
}
}
/* スクリーンがpx以上のとき以下のCSSを適用 */
@media screen and (max-width: 640px) {
li {
width: 100%;
}
}
</style>
このように、
@media screen and (min-width: 961px)
や、
@media only screen and (min-width: 641px) and (max-width: 960px)
のように、@mediaを利用して、スクリーンの幅を指定した後に、そのスクリーンサイズの時のスタイルを調整していきます。
終わりに
このようにスクリーンサイズによってスタイルを変更することができるメディアクエリは、レスポンシブウェブデザインでサイトを構築する上では欠かすことの出来ない技術となります。
新しい技術ではないですが、レスポンシブデザインの基本として覚えておいて損はないでしょう。
本田
