ブレイクポイントとは??レスポンシブ化における各ブレイクポイントのpx設定について

programming

Webデザインを作成する際に、今や必須なのがレスポンシブ化ですよね。

HTML、CSS書く人はまず絶対書いてると思います。

たみお
たみお

そんで持って具体的な数字ってみんなどうしてるのさ??

と言うことで、レスポンシブ化を行う際に必要な「ブレイクポイント」について、またその設定すべきpx数について備忘録ついでにまとめましたのでよければどぞ!!

*当記事は初心者が書く初心者向けの内容となっています。できる限り一般の方にわかりやすく書いているつもりなので、すでに知っている方には物足りない内容かもしれません・・・。ご容赦を!

スポンサーリンク

ブレイクポイントとは

レスポンシブ化における「ブレイクポイント」と言うのは、画面幅によってCSSを切り替える際のポイントになります。

たみお
たみお

例えばあなたがインターネットで何か記事を読む時、パソコンで見るのとスマホで見るのとでは、明らかに画面サイズが違いますよね?

もしレスポンシブ化がされていないとどうなるのでしょう?

ブレイクポイントを設定していないと、スマホ画面で見たときにレイアウトが崩れてしまう

こんな感じにレイアウト崩れが起こったり

ブレイクポイントが設定されてないと、PC画面を縮小した形になり見づらい

パソコン画面に設定された記事であれば、一つの文字がとてつもなく小さくなってしまったりと、ユーザーからすればとんでもなく読みにくい記事になってしまいます。

それを解決してくれるのが、ブレイクポイントごとに設定した、レスポンシブデザインなのです!

スポンサーリンク

ブレイクポイントを設定するには?

ブレイクポイントは、CSSにメディアクエリ(@media)として書き込むことで、使用することができます。

記入例↓

See the Pen gQpYGj by tami0525 (@tami0525) on CodePen.

スポンサーリンク

各画面幅に対応したブレイクポイント一覧

と言うことで、実際にブレイクポイントを設定していくため、各画面幅に対応したブレイクポイントを載せていきます。

画面サイズブレイクポイント
スマホ縦持ち480px以下
スマホ横持ち480px〜600px
タブレット縦持ち600px〜960px
PC小画面960px〜1280px
PC大画面1280px以上

では次に、メディアクエリ(@media)を使ってCSSに書いていく方法を載せておきます。

See the Pen ブレイクポイント一覧 by tami0525 (@tami0525) on CodePen.

【2018年版】レスポンシブデザインにおけるブレイクポイントの最適解はこれだ!

こちらを参考にしました!

スポンサーリンク

最後に

レスポンシブ化に必要なブレイクポイントについてまとめました。

見やすいデザインにできるよう、設定して見てください!^^