レスポンシブデザインに必須「メディアクエリ」の基本

2025/06/262025/06/27

レスポンシブデザインの基礎にして最重要テクニック

Webサイトをスマホやタブレット、PCなど異なる画面幅に対応させるには、CSSの「メディアクエリ」が欠かせません。
ビューポートのサイズに応じてスタイルを切り替えることで、柔軟なデザインを実現できます。現代のWeb制作では必須の知識です。

ブレイクポイントとは、CSSのスタイルを切り替える境界となる画面幅（ピクセル数）のことです。たとえば、ある画面サイズ以下ではスマホ用レイアウトに変更し、それ以上ではPC用のデザインを適用する、という具合に、デバイスごとにスタイルを最適化できます。

一般的に使われるブレイクポイントには以下のような例があります：

スマホ：〜600px
タブレット：601px〜1024px
デスクトップ：1025px〜

このように、画面の幅に応じて適切なスタイルを切り替えることで、すべてのデバイスで見やすく、使いやすいデザインを提供できます。より細かな調整をしたい場合は、複数の画面幅（ブレイクポイント）に応じたスタイル設定が効果的です。たとえば、PC・タブレット・スマホの3段階に対応することで、より快適なUI/UXを実現できます。


.responsive-box {
  background: lightblue;
  padding: 20px;
  font-size: 16px;
}

@media screen and (max-width: 600px) {
  .responsive-box {
    background: lightcoral;
    font-size: 14px;
  }
}

.responsive-box {

background: lightblue;

padding: 20px;

font-size: 16px;

}

@media screen and (max-width: 600px) {

.responsive-box {

background: lightcoral;

font-size: 14px;

}

ブレイクポイントを複数使う場合


/* PC（幅 1025px 以上） */
@media screen and (min-width: 1025px) {
  .responsive-box {
    background: lightgreen;
  }
}

/* タブレット（幅 601px〜1024px） */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .responsive-box {
    background: lightskyblue;
  }
}

/* スマホ（幅 600px 以下） */
@media screen and (max-width: 600px) {
  .responsive-box {
    background: lightcoral;
  }
}