現代のウェブサイト制作では、スマホ、タブレット、PCなど様々なデバイスに対応することが必須です。
そこで大活躍するのがメディアクエリ（Media Queries）です！
この記事では、メディアクエリの基本と、よくある使い方を実例つきで解説します。

メディアクエリとは、ホームページを表示する端末の画面サイズや向きに合わせて、サイトのデザインやレイアウトを自動で切り替えるための仕組みです。

たとえば、

• 文字をスマホで見たときは大きく表示、パソコンで見たときは小さく表示
• 画像を、スマホで見るときは縦に並べて表示、パソコンで見たときは横に並べて表示画面
• 二つの画像のサイズや重なり方を、スマホ、タブレット、パソコンで変える

といった調整ができます。

メディアクエリは、レスポンシブデザイン（どんな端末でも見やすいサイト）を作るための、大切な基本です。

メディアクエリの基本の構文は以下のようになります。

@media (条件) {
　セレクタ {
　　プロパティ: 値;
　}
}

例えば、スマホサイズだけ背景色を変えるなら：

@media (max-width: 600px) {
　body {
　　background-color: lightblue;
　}
}

となります。

max-width: 600pxのとき（条件）に、body（セレクタ）にbackground-color: lightblue（プロパティ）を適用、という意味になります。

主な条件の例を下表に示します。

条件	説明
max-width	画面の横幅が指定した値以下のとき適用。スマホサイズ向けによく使われます。
min-width	画面の横幅が指定した値以上のとき適用。タブレットやPC向けのデザインで使います。
orientation	画面が縦向き（portrait）か横向き（landscape）かを判定します。 向きによりレイアウト切り替える場合に使います。
prefers-color-scheme	ダークモード・ライトモードのユーザー設定に応じたデザイン切り替えができます。

例えば、

• スマホ: 〜600px
• タブレット: 601px〜1024px
• PC: 1025px〜

のように、画面幅によって段階的にレイアウトを変える場合は、以下のように記載します。

/* ===== スマホ用（〜600px） ===== */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* ===== タブレット用（601px〜1024px） ===== */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    background-color: lightgreen;
  }
}

/* ===== PC用（1025px〜） ===== */
@media (min-width: 1025px) {
  body {
    background-color: lightcoral;
  }
}

この例では、背景の色が、

• 画面幅600px以下の時：lightblue
• 画面幅601〜1024pxの時：lightgreen
• 画面幅1025px以上の時：lightcoral

になります。

こちらのページでWordpressで複数の画像を重ねる方法を解説しました。

例えば、gazou_blueとgazou_redのの重なり方を画面幅に応じて変えたい場合は、以下のように記載してください。

/* ===== 共通 ===== */
.container2 {
position: relative;
width: 100%;
height: 350px;
}

/* ===== スマホ用（〜600px） ===== */
@media (max-width: 600px) {
  .gazou_red {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
opacity: 0.7;
z-index: 1; /* 背景画像が後ろ */
}

.gazou_blue {
position: absolute;
top: 40px;
left: 40px;
width: 300px;
height: 300px;
opacity: 0.7;
z-index: 2; /* 上に重ねる */
}
}

/* ===== タブレット用（601px〜1024px） ===== */
@media (min-width: 601px) and (max-width: 1024px) {
  .gazou_red {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
opacity: 0.7;
z-index: 1; /* 背景画像が後ろ */
}

.gazou_blue {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
opacity: 0.7;
z-index: 2; /* 上に重ねる */
}
}

/* ===== PC用（1025px〜） ===== */
@media (min-width: 1025px) {
  .gazou_red {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
opacity: 0.7;
z-index: 1; /* 背景画像が後ろ */
}

.gazou_blue {
position: absolute;
top: 60px;
left: 60px;
width: 300px;
height: 300px;
opacity: 0.7;
z-index: 2; /* 上に重ねる */
}
}

記載場所は、こちらのページで確認ください。