Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

2018/01/18 2018/09/29 Web制作

【CSS】レスポンシブデザインのブレイクポイントなんて適当でいいんじゃね?って話

つい先日、ようやく重い腰を上げてブログのテーマをレスポンシブ化しました。メディアクエリの書き方とか覚えてなかったから10時間くらい掛かったよ。死ぬかと思ったよ。

レスポンシブレイアウトを実装するにあたって、初心者のLeo(@Akamaru12mg)が特に念入りに調べたのはブレイクポイントについてでした。

ブレイクポイント
レスポンシブデザインにおいて、スタイルを切り替える際の境目となるポイント

「ブレイクポイントって何pxくらいにするのが良いのかなぁ~」と色々調べたんですが、どこを見ても似たような事が書いてあって…

  • 現在の解像度シェアを調べて、それに合わせる
  • iPhoneの最新端末に合わせる

大体こんな感じでした。調べた中で多そうなのは480px・768px・960pxあたりです。

@Akamaru12mg
ふむふむ、じゃあこのあたりを目安に作りますか…

作りづれぇわ

新規でテーマを作るんじゃなく、既存のテーマのレスポンシブ化に取り組んだため、予めブレイクポイントを決めて組み直していくのはマジで作りづらかった。あーここ768pxで切り替えると横の余白が広すぎてダサいわーみたいな。

で、色々試してみて気付いたんです。ブレイクポイントなんて適当でいいんじゃねーかと。

コンテンツに合わせるべきだよね?

Web屋じゃないので詳しいことは言えない(というか知らない)ですが、レスポンシブデザインってユーザーがどの端末・解像度で見てもコンテンツが綺麗に表示される事を目的にして編み出された手法ですよね?ついでにPC/モバイルで別々のテーマを用意するよりもメンテナンスに掛かる時間が削減できるというオマケ付き。

つまり、シェアの高い端末に合わせる~とかではなく、コンテンツがしっかり表示されるように適宜ブレイクポイントを設定していくという考え方のほうが正しいレスポンシブデザインに近づくんじゃねーかと思ったわけです。

端末や解像度のシェアなんて年々変わっていくわけですし、特定の端末に合わせるために無理にレイアウトを組み直したりするのは本末転倒な気がします。

んで、結局こうなった

うちのブログのブレイクポイントは3箇所です。

  • 1170px
  • 720px
  • 500px

深いことは考えずに適当に決めましたが、Chromeの開発者ツールで見た限り、どの解像度で見ても破綻はしていません。もっと細かく作ったほうが良いのかもしれませんが、これがLeo(@Akamaru12mg)の限界です。燃え尽きた。

@Akamaru12mg
以上、ブレイクポイント・レスポンシブデザインの考え方についてでした。ん?Web屋になってから言えって?知らんがな。