メディアクエリとは、CSSで画面サイズに応じてスタイルを切り替えるための条件文です。

スマートフォン・タブレット・PCなど、異なるデバイスでも見やすいレイアウトを実現するために使います。

よく使うメディアクエリの基本パターン

/* タブレット向け（768px〜1024px） */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* タブレット向けのスタイル */
}

/* PC（768px以上） */
@media screen and (min-width: 768px) {
  /* PC向けのスタイル */
}

/* スマホ（767px以下） */
@media screen and (max-width: 767px) {
  /* スマホ向けのスタイル */
}

上記のように、min-width や max-width を指定することで、画面幅に応じたスタイルを設定できます。