4kaku design

マーケティングを勉強しているWebデザイナーのノート

モバイルファーストなブレイクポイントを調べてみた

5月16日(土)のマカベンで、モバイルファーストなCSSフレームワークのブレイクポイントを調べてみました。レスポンシブWebデザインの実装をするに当たって、どこを基準にすればいいか悩んでいたからです。


「ブレイクポイント」とは、CSSが切り替わる画面幅のこと


モバイル対応のメジャーな方法になったレスポンシブWebデザイン。この手法は、CSS3のMedia Queriesを使って画面サイズごとにCSSを切り替えます。「ブレイクポイント」とは、CSSが切り替わる画面幅のことです。

メジャーなブレイクポイントって何ピクセルなの?

最近、受託案件で既存のテンプレートを元にWebサイトのカスタマイズを行いました。そこで気になったのが、世の中ではどんなブレイクポイントが一般的なのかということ。テンプレートのHTMLとCSSがあるのでこの案件ではそれに合わせないといけないんですが、気になったので調べてみました。

Bootstrap、Foundation、acms.cssを比較してみた


Bootstrap、Foundation、acms.cssを比較してみた

以下の3つのCSSフレームワークのCSSを見ながら、ブレイクポイントを図にまとめました。(※2015年5月16日現在)

メジャーかつモバイルファーストで作られているCSSフレームワークということで、「Bootstrap」「Foundation」、それに加えて、職場でWebサイト実装時に使う「a-blog cms」に付属しているCSSフレームワークである「acms.css」を比較しました。(私は←のCMSを作っている会社でWebデザイナーをしています。

どの端末に対応するかがひと目でわかるのは使いやすい

(手前味噌ですし、慣れによるところも大きいんですが)改めて並べてみるとどの端末に対応しているかひと目でわかるacms.cssはやっぱり使いやすいなぁというのが結論です。もちろんBootstrapにも良いところはあって、この前趣味でBootstrapを使ったWebサイトを作ったときにタブレットにきめ細やかに対応できるのは魅力的でした。

そして今回一番気になったのは、Foundation。

Foundationはブレイクポイントをemで指定している

上の図ではpxで統一して表記していますが、Foundationはpxではなくem単位でブレイクポイントを指定しています。FoundationのMedia Queriesについては公式ドキュメントをご覧ください。
Media Queries | Foundation Docs

スマートフォン〜タブレットのときは大まかな画面幅の指定しかされていませんが、PCの画面幅が細かく区切られているのでそういう需要があるのかなぁと思って見ていました。ここについては海外のCSSフレームワーク事情も含めて、引き続き調べていきます。