menu

レスポンシブWebデザインのブレイクポイントについて

2020年4月27日

レスポンシブWebデザインを考える際、特に重要視されているのはブレイクポイントの設定ではないでしょうか?
ブレイクポイントと言ってもさまざまな基準値があり、設定に迷ってしまいますね。ここでは、ブレイクポイントの基本から標準値の考え方についてお話していきます。


・ブレイクポイントについて
ブレイクポイントとは、ブラウザのウィンドウ幅にあわせてCSSを切り替え、最適なレイアウトでWebサイトを見れるように設定する境界値のことです。

Webサイトを閲覧するとき、スマートフォン、タブレット、PCでは画面サイズが異なりますね。各デバイスの画面サイズを考慮したレイアウトで、Webサイトを作成するためにブレイクポイントの設定が必須となっているのです。

 

・ブレイクポイントの分割数について
近年ではデバイスの種類が多数存在するため、「ブレイクポイントを細かく設定した方が良いのでは」と思うかもしれません。しかしながら、ブレイクポイントを細かく設定することはレイアウト調整の増加につながり、コストがかかるため避けた方が良いでしょう。
ブレイクポイントの分割数は、だいたい2~3つに設定することが一般的となっています。

 

・ブレイクポイントの標準値について
レスポンシブWebデザインで設定するブレイクポイントは、制作者によってさまざまな観点で決めるため、これといった数値がありません。
ブレイクポイントの標準値について調べてみたところ、次の数値に設定することが多いようです。

  • ・スマートフォン:320px〜480px
  • ・タブレット:768px〜1023px
  • ・PC:1024px〜

特定のデバイスを基準にしてブレイクポイントを設定してしまうと、基準としたデバイスが変わるごとにコーディングをやり直さなくてはいけないため、手間がかかります。そのため、デバイス依存にならないブレイクポイントを設定するように心掛けましょう。

 

まとめ
ブレイクポイントの設定は「Webサイトを快適に閲覧できる」という点を重視して、慎重に決めたいですね。
コーディングが完了したら、デベロッパーツールなどを利用してレイアウトの確認や操作感を確かめるようにしましょう!

CPTIMES

   

投稿一覧

pagetop