人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. SVGでtext要素を上下左右中央寄せする

  8. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. .matchMedia()でJSでもメディアクエリを使って条件分岐する

.matchMedia()でJSでもメディアクエリを使って条件分岐する

JavaScriptでウィンドウサイズによる条件分岐はどのようにやっていますか。ちょっと前までは window.innerWidth と resize を使って実装していたと思います。しかし、今ではもっと便利で使いやすい .matchMedia() があるのでそれを使ってみます。

.matchMedia()


if (matchMedia('(max-width: 798px)').matches) {
  // ウィンドウサイズが798px以下のとき
} else {
  // それ以外
}

.matchMedia() を使うことでCSSのメディアクエリのように条件分岐することができます。しかし、この記述だと ページが読み込まれた時 にしか実行されません。CSSのメディアクエリはウィンドウサイズを変更したらスタイルが適用されますよね。


var mediaQuery = matchMedia('(max-width: 798px)');

// ページが読み込まれた時に実行
handle(mediaQuery);

// ウィンドウサイズが変更されても実行されるように
mediaQuery.addListener(handle);

function handle(mq) {
  if (mq.matches) {
    // ウィンドウサイズが798px以下のとき
  } else {
    // それ以外
  }
}

.addListener() を使うことでウィンドウサイズを変更しても実行されるようにできます。


var mediaQuery = matchMedia('(orientation: landscape)');

ちなみにこのようにすれば、スマホを 横にしている ときを判定することができます。

CSS本執筆しました！！！