レスポンシブ・ウェブデザインには、ブレイクポイントの選定が必要

様々な端末が存在する中で、ブレイクポイントをどこに設定するか?

様々な端末が存在する中で、ブレイクポイントをどこに設定するか?

スマートフォンからPCまで様々な画面サイズに対応するために便利な「レスポンシブ・ウェブデザイン」ですが、これを採用するためには「ブレイクポイント」をどこに設定するかを決める必要があります。

※レスポンシブなCSSを記述する際には、「画面幅が何px以上の場合にのみ、次のスタイルを適用する」といった指定を記述します。この「何px」の部分(=適用デザインを切り替える境界点)のことを「ブレイクポイント」と呼びます。

レスポンシブ・ウェブデザインを採用する際には、この「ブレイクポイントをどこに設定するか?」で少々悩みます。「スマートフォン」や「タブレット」と一口に言っても、端末によって画面幅は様々ですし、PC環境でも画面幅(ブラウザのウインドウサイズ)は様々ですから。

レスポンシブなCSSを記述する際の、ブレイクポイントの決め方

代表的な画面幅や、解像度のシェアからブレイクポイントを決定する

代表的な画面幅や、解像度のシェアからブレイクポイントを決定する

そこで、本記事では、レスポンシブ・ウェブデザインを採用してCSSソースを記述する際に「ブレイクポイントをどこに設定するか?」という点について、
  • 代表的な端末の画面幅
  • 最近の画面解像度のシェア
の2点を参考にして選定する方法をご紹介致します。


 
細かく分けると労力がかかるが、2分割だけだと不安もある
あらゆる端末に合わせてブレイクポイントを細かく設定することもできますが、そうすると、CSSの記述労力が増えてしまいます。かといって、「モバイル用」・「PC用」の2種類だけだと、うまく表示させられない端末も多いのではないか?といった不安が出てきます。そもそも、その「モバイル」と「PC」の境界をどこ(何px)に設定するのか?という点にも迷います。

たくさんの余力があるなら、あらゆる画面サイズに合わせてブレイクポイントを作れば良いでしょうが、実際にはそこまで煩雑なことはしにくいでしょうし、そこまでする必要性もあまりありません。代表的な端末の画面サイズや、画面解像度のシェアを確認しておけば、作業余力に応じた選択が可能になるでしょう。

それでは次のページから、代表的なモバイル端末の縦横サイズ(解像度)とブレイクポイント候補についてをご紹介致します。