1. home
  2. /tutorial
  3. /breakpoints

ブレイクポイントの設定

Tips

デバイスに応じてコンテンツを変えたい場合

※本ドキュメントの内容は本サービス向けの内容になります。

ブレイクポイントとは

ブレイクポイントとは、レスポンシブデザインの表示を切り替える画面幅の切り替えポイントのことです。年々様々なサイズの端末が登場するため、一概にこのサイズと定義されているわけではありません。

Tips:本サイトは概ね768pxを基準に表示を切り替えています。これはiPad miniの画面サイズが基準となっています。

ブレイクポイントを指定する方法

モバイルファースト(スマホ端末最適化)のため、ブレイクポイントの指定は小さい画面から順に設定します。

そのため、基本的には下記の順でサイズを指定します。

  1. スマートフォン(以下「SP」)
  2. タブレット(以下「TAB」)
  3. パソコン(以下「PC」)
  4. ワイドモニター

もちろん全てのサイズに対応することは少ないため、多くのケースではSP表示とPC表示のみ気にすれば良いでしょう。

ブレイクポイントを指定しない場合

ブレイクポイントを指定せずにレスポンシブ対応をする場合、768pxを基準に制作いたします。