静岡発のホームページ制作・Web集客・映像制作ならIHOLDINGS

メニュー

【CSSリファレンス】レスポンシブデザインのブレイクポイントってどこだっけ?

1430 views
約 1 分

日々コーディングをしていると、あれブレイクポイントって768pxだっけ?767pxだっけ?
ってなります。

私はものすごく忘れっぽいので、メモをデスクトップに貼り付けて間違いのないようにしているのですが、
間違えているときに、スマホとかタブレットでページを確認するとデザインが崩れまくっていて、

ええええええええ〜〜ーーーー!?

ってなります。
そして、10分ぐらい原因を探さないと見つけられないこともたまにあります。

そもそも、レスポンシブコーディングのチェックシートでも用意しておけばいいだけの話なのですが・・。

ですので、これを見ている人は、是非ともチェックシートを用意しましょう!

いままでのブレイクポイント

さて、本題のレスポンシブデザインのブレイクポイントについてなのですが、
日々スマホの画面の大きさが変わることがよくあり、どこまで対応したらいいのか迷ってしまうことがよくあります。

究極を言えば、全デバイスのサイズを調査してそれに合わせればいいだけの話なのですが、
実際のところ、そんなことしたらCSSの読み込みは遅くなるメンテナンスが後々多くなるはの状態なので、
私は今現在は
480px768px
の2箇所にブレイクポイントを置いているだけです。

仕事柄、シンプルなランディングページを作ることが多いからです。

これがコーポレートサイトとかポータルサイトとかになってきたら1024pxにブレイクポイントを追加したりしていますね。

ただ、この従来のブレイクポイントは「特定の製品の解像度を基準」にして設定されてしまっているんです。
お分かりかもしれませんが、あなたを含め周りの友人や同僚にはiphoneを使っている人は多くないですか?
また、タブレットはiPadが多いことも然りです。

つまり、Apple製品に偏ってブレイクポイントを設定してしまっている!
わけなんです。

なので、レスポンシブデザインのブレイクポイントの最新事情を調査したら全くの別物になっていました。

参考サイト:material.io

特定の端末に依存しないブレイクポイント

/*==================
 ▼ブレイクポイントのルール▼
 モバイルファーストとして設計
 *〜479px:SP縦
 *480px〜:SP横
 *600px〜タブレット
 *960px〜小型PC
 *1280px〜大型PC
==================*/

/*  画面サイズが480pxまで  */
p {
 color:blue;
}

@media screen and (min-width:481px) and ( max-width:600px) { 
    /* 画面サイズが480pxからはここを読み込む */
p { color:#ededed;}
}

@media screen and (min-width:601px) and ( max-width:960px) {
    /* 画面サイズが600pxから960pxまではここを読み込む */
p {}
}

@media screen and (min-width:961px) and ( max-width:1280px) {
    /* 画面サイズが960pxから1280pxまではここを読み込む */
p {}
}

@media screen and (min-width:1281px) {
    /* 画面サイズが1280pxからはここを読み込む */
p {}
}

これであれば、ある程度のサイズは網羅しているので、微妙なサイズ変更があったとしても
激変するようなことはないでしょうから、当分は大丈夫そうです。

また、コーディングを書くときにより精度の高い細かいコーディングを描くことができます。
ただし、デバイスのシャア率などを調査した上で、優先すべきサイズはどこなのかをしっかり考慮した上で
コーディングを進めることをお勧めします。

▶︎MEMO
StatCounterというサイトを使えば、リアルタイムでOSやデバイスのシェアを知ることができます。
また、国や地域を絞ることができるので、日本に限らず海外のサイトできになるデザインがあればどのデバイス向けに作られているのか
予測を立てることもできます。ちなみに今現在の日本国内のデバイスのシェア率はこちら↓

まとめ

▼従来のブレイクポイントは
460px,768px,1024pxの3箇所

▼最新のブレイクポイントは
480px,600px,960px,1280pxの4箇所

これを使えばスマホでも縦横のデザインに対応していて、なおかつ特定の端末に依存しないので
今後海外のデバイスのシェアが日本で上がってきたとしても対応するようにできます。

Writer

F.Ryu
Webのコーディングを担当しています。
主にhtml,CSS,php,jQuery,JavaScriptを扱っています。
毎日新しいコードに出会うことで想像する未来が広がって楽しいです。
多くの方にWebを通して貢献していきたいと思っています。

コメントする

*

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Google +
Pinterest
Pocket
Evernote