今回はCSSでのスマホのレスポンシブ対応の基本、「メディアクエリ(Media Queries)」についてご紹介します。
メディアクエリ(Media Queries)とは?
メディアクエリ(Media Queries)とは、「表示された画面サイズに応じてCSSを切り替える機能」のことです。スマホとPCで画面デザインを変える「レスポンシブWebデザイン」を作るときに必要な指定になります。
例えば「画面のサイズが特定のサイズ以下になった時に、フォントサイズを小さくする」といった挙動をメディアクエリで設定できます。
メディアクエリは、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトやアプリを変更したいときに便利です。
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_q
メディアクエリ(Media Queries)を使う条件
まずはhead内のタグにmeta要素としてviewportを指定する必要があります。下記のように、meta要素のname属性に対してviewportを指定、content属性の値にviewportの設定を記述します。
<meta name="viewport" content="width=device-width, initial-scale=1">ビューポートはコンピューターグラフィックの中で現在表示されている領域を表します。ウェブブラウザーの用語では、これは一般にブラウザーウィンドウのうち、ユーザーインターフェイス、メニューバーなどを除いた部分です。すなわち、あなたが見ている文書の部分です。
https://developer.mozilla.org/ja/docs/Web/CSS/Viewport_concepts
WordPressの場合は、基本的には最初からビューポートが設定されているのでmetaタグは気にしなくても大丈夫です。
メディアクエリ(Media Queries)の基本的な書き方
@media screen andという表示を入れることでメディアクエリが指定できます。その後に「(min-width:XXXpx)」と入れることで、XXXpx以上の時に～という指定になります。
※screen andは無くても機能しますが明示的に入れているケースが多いようです。
/* スクリーンが640px以上のときにCSSを適用する */
@media screen and (min-width: 640px) {
/*ここに指定するセレクタ類を入れる*/
}逆に、XXXpx以下の時に～というときは「(min-width:XXXpx)」という指定になります。
/* スクリーンが640px以下のときにCSSを適用する */
@media screen and (max-width: 640px) {
/*ここに指定するセレクタ類を入れる*/
}〜XXXpx以上の時に、かつ～XXXpx以下の時に、～を同時に指定する場合は、andで連結します。
/* 画面サイズが768px～1024pxのときにCSSを適用する */
@media screen and (min-width:768px) and ( max-width:1024px) {
/*ここに指定するセレクタ類を入れる*/
}このメディアクエリの指定によって、画面サイズに合わせてCSSを変えることが可能となります。
まとめ
メディアクエリについて紹介させていただきました。メディアクエリを覚えることで、画面サイズに合わせてCSSを変えることができる「レスポンシブWEBデザイン」を作ることができます。
御参考ください😃
