ブレイクポイント
レスポンシブのブレイクポイントを再設定しました。
今回設定したブレイクポイントは、Googleアナリティクスからディスプレイ解像度から設定しました。
ディスプレイ解像度
Googleアナリティクスの「テクノロジー – 概要」から確認することができます。
この中からユーザー(画面の解像度)から確認することができ、ユーザーの画面解像度の数値を取得しました。
| ユーザー(画面の解像度) | 閲覧回数 |
|---|---|
| 1680 | 6割 |
| 1920 | 2割 |
| 1280 | 2割 |
統計としての数字がかなり少ないのでこの割合が正しいのかは微妙ですが、
必要なのは現時点でのユーザーの画面解像度です。
なので、この数値にターゲットを置いてブレイクポイントを設定していくことにします。
基本的な設定
基本的な設定としては、PC、タブレット、スマートフォンの三つを想定しています。
今回取得したのが、PCのディスプレイです。
なので、この数値からディスプレの最低値を「1279px」をターゲットしました。
1279pxとしたのは、ひと昔のWebサイトレイアウトの最大値が1280pxだからです。
ここをブレイクポイントにして、PCレイアウトかタブレットレイアウトのCSSレイアウトを構築していきます。
タブレット、スマートフォンの設定についての詳細については、今後記事にしていきたいと思います。
CSSの設定
ブレイクポイントのトリガーは、ブラウザーのサイズ(横幅のサイズ)です。
ブラウザーの大きさを広くしたり小さくしたもの(サイズ)を取得して、
CSSで設定したブレイクポイント毎に読み込んで、Webデザインに適用します。
記述
CSSで認識させるための記述として、「@media screen and (min-width: —-px) { CSS設定の記述; }」を
記述します。
| 項目 | 内容 |
|---|---|
| パソコン向け | @media screen and (min-width: Apx) ※A: パソコンの切り替わりディスプレイサイズ |
| タブレット向け | @media screen and (max-width: Bpx) and (min-width: Cpx) ※B:タブレットの最大サイズ。C:タブレットの最小サイズ |
| スマホ向け | @media screen and (max-width: Dpx) ※D: スマホの最大サイズ |
設定する単位
ブラウザに反映される単位は複数あります。
※pxや%、emなど
私は、Webサイト全体のフォントを基準にタブやクラスなどの大きさ(サイズ)を設定する方法を使っています。
サイト全体のフォントサイズを「px」で設定したあとに、それぞれで使用する大きさ(サイズ)を「em」で設定します。
こうすることで、CSSの記述を一つで大丈夫になります。
もちろん、微調整をする場合には個別に記述する必要があります。