スキルアップを始める!

【CSS】メディアクエリ(Media Queries)とは?スマホのレスポンシブ対応の基本

CSS(シー・エス・エス)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

今回は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デザイン」を作ることができます。

御参考ください😃

URLをコピーしました!