CSSメディアクエリのブレークポイントを簡単に確認する方法

ユーザーCSSでブレークポイント確認

レスポンシブWebデザインのサイトを作成する際にはCSSメディアクエリでブレークポイントをいくつか指定する。

例えば

@media only screen and (max-width: 800px) {
  body {
    background: red;
  }
}

のように記述すればブラウザの表示領域が800px以下のときに背景色を赤にすることができる。

このCSSメディアクエリのブレークポイントを簡単に確認するにはユーザーCSSを使用する。

まずブラウザにStylishを入れる。(Chrome, Firefoxの場合)

ユーザーCSSはこのように記述する。

@media only screen and (max-width: 800px) {
  body::before {
    max-width: 800px;
    position: fixed;
    top: 0;
    right: 0;
    padding: 3px;
    background: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    text-align: center;
    z-index: 100000;
  }
}

@media only screen and (max-width: 600px) {
  body::before {
    max-width: 600px;
  }
}

@media only screen and (max-width: 400px) {
  body::before {
    max-width: 400px;
  }
}

するとブレイクポイントに達した場合、ブラウザの右上にこのように表示される。