今の時代はスマートフォンやスマホからの流入が多いので、サイトを作る際もモバイルファーストで、モバイルサイトから先に作るWebデザイナーさんも多いのだとか。
私も、はてなブログでテーマを作成するのであれば絶対にレスポンシブデザインがいいと思っていました。
なので、今回はレスポンシブデザインを作る最初の手順としてブレイクポイントについて考察してみたいと思います。
ブレイクポイントとは？
レスポンシブデザインのサイトを作る時に一番最初に考えないといけないのはブレイクポイントです。
ブレイクポイントというのは、横幅がどのポイントでスマートフォンからタブレット表示、タブレット表示からパソコン表示に切り替えるか？という問題です。
今は、いろんなメーカーからいろんなサイズの液晶端末が出ているので、「これ！」といった正解はないようです。
はてなブログのベーステーマの「Boilerplateテーマ」では、ブレイクポイントは768pxと996pxに設定がありました。
私の場合はどうしたいかというと、自分の持っている端末でよりよくみたいと思っています。
iPhone13Proの縦→スマホ表示 iPad11Proの縦→タブレット表示 iPad11Proの横→パソコン表示 パソコン→パソコン表示
こういうふうに考えていくと、まず最初のブレイクポイントはiPhone13ProとiPad11Proの間ですが、これはベースのテーマの768pxで問題なさそうです。
次のブレイクポイントのiPad11Proの縦とiPad11Proの横ですが、996pxだと少し狭いんですよね。
とりあえず、少し広めの1024pxとして、パソコンだと横幅すぎても記事が読みにくいのでmax-widthを1140pxで設定しました。
まとめ
こういうのは素人が考えてもどこが正解なのかわかりませんね。
とりあえず、自分が作るテーマのブレイクポイントは
という設定にしておくことにします。
