2024年2月28日(水)2024年2月28日(水) 投稿者: iwbjp

愚かなCSSはブレークポイントを誤る

CSSのブレークポイントとは
CSSのブレークポイントの指定ミスに注意
CSSのブレークポイントは大量に設定してはいけない
Chrome拡張機能で各画面サイズを確認
メディアクエリ構文ではデバイスの判定は不可
不等号（>=など）でもブレークポイントを設定可能

CSSのブレークポイントとは

CSSのブレークポイントとは、異なる画面サイズやデバイスの種類に応じてスタイルを変更するために設定する、特定の幅の閾値のことを指します。

これはレスポンシブウェブデザインにおいて重要な概念であり、ユーザーが使用しているデバイス（デスクトップ、タブレット、スマートフォンなど）に応じて最適な表示を提供するために使用されます。

例えば以下のようなCSSを書けばそれぞれの画面サイズによって適用されるCSSが変わります。

/* スマートフォン */
body {
  background-color: lightblue;

  &::before {
    content: "スマートフォン";
  }
}

/* タブレット */
@media (min-width: 768px) {
  body {
    background-color: orange;

    &::before {
      content: "タブレット";
    }
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  body {
    background-color: lightgreen;

    &::before {
      content: "デスクトップ";
    }
  }
}

CSSのブレークポイントのサンプル

@media screen and (min-width: 1024px) のように「screen」も指定しているケースも多いですが、@mediaクエリ内のscreenの指定は必須ではありません。

多くの場合、Webサイトはスクリーン上で表示されることが前提なので、screenは省略できます。

CSSのブレークポイントの指定ミスに注意

CSSのブレークポイントの指定を誤ると表示崩れや非表示にする箇所が表示されてしまうなど、Webページの表示内容に悪影響が発生します。

例えば、『TVアニメ「愚かな天使は悪魔と踊る」公式サイト』ではCSSのブレークポイントが正しく書かれていないので、画面幅が901px〜1100pxのときにメニューが勝手に表示されてしまいます。

TVアニメ「愚かな天使は悪魔と踊る」公式サイト

このようなミスを防ぐためには、いくつかの点に注意する必要があります。

CSSのブレークポイントは大量に設定してはいけない

前述のWebサイトのCSSを確認するとブレークポイントが大量にあります。

しかもmin-widthだけでなくmax-widthも使用されており、これだとどこで何を使用されているのかわかりにくく、表示バグを発生しやすいです。

CSSのブレークポイントの@mediaは適切にコードが書かれていれば、min-widthだけ使用すれば、max-widthを使用しなくても問題なく制作できます。

また、ブレークポイントはスマートフォン、タブレット、デスクトップの3つ (多くても4つ)までにしたほうが、確認する画面サイズが少くて済むので、表示に関する問題が発生する可能性が減ります。

Chrome拡張機能で各画面サイズを確認

Webブラウザで各画面サイズに切り替えてWebページを確認するのは時間がかかります。

Chrome拡張機能のResponsive Viewerを使用すれば、画面上に複数の画面サイズのデバイスを擬似的に表示できるので、確認する時間を短縮できます。

Chrome拡張機能 Responsive Viewer

※ 画面サイズを確認するための拡張機能なので、ユーザーエージェントは変更されない点に注意してください。

メディアクエリ構文ではデバイスの判定は不可

ブレークポイントをスマートフォン、タブレット、デスクトップの3つに分けたコードを書きましたが、あくまで画面サイズで分けているだけで、デバイスの判定はできません。

最近のスマートフォンは画面が大きく、iPhone 15 Pro MaxだとCSSピクセルが430x932なので、横向き表示だとサンプルのCSSコードだとスマートフォンのCSSが適用されません。

そのため、ブレークポイントを利用してスマートフォンのときだけApp Storeへのリンクのボタンを表示するみたいなコードを書くのは避けたほうが良いです。

不等号（>=など）でもブレークポイントを設定可能

CSSのブレークポイントでは、メディアクエリ構文を使用してmin-widthまたはmax-widthを指定することが一般的ですが、どちらを使用すべきか迷うことがあります。

CSSに慣れていない方にとっては、「@media (min-width: 1024px) {」が1024px未満、以下、以上、超過のどれを意味するのか、すぐには理解しにくいかもしれません。

しかし、CSSのブレークポイントでは不等号（>=など）を使用することも可能です。以下のように書くことで、コードが格段に読みやすくなります。

/* スマートフォン */
body {
  background-color: lightblue;

  &::before {
    content: "スマートフォン";
  }
}

/* タブレット */
@media (width >= 768px) {
  body {
    background-color: orange;

    &::before {
      content: "タブレット";
    }
  }
}

/* デスクトップ */
@media (width >= 1024px) {
  body {
    background-color: lightgreen;

    &::before {
      content: "デスクトップ";
    }
  }
}