【レスポンシブサイト】ブレークポイントの書き方と場所まとめ【整理】

レスポンシブ HTML/CSS

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在フリーランスとして活動しています。

レスポンシブサイトを作るときに、こんな経験ありませんか?

ブレークポイントってどこだっけ。。

ということで、今回は、基本的なcss上での書き方とブレークポイントの場所を説明します〜。

この記事は以下のような人向けです。

ブレークポイントの書き方と場所を整理したい

では、参りましょう〜。

スポンサーリンク

 ブレークポイントの書き方

まず、基本的なcss上でのブレークポイントの書き方を整理します。

〇〇px以下は「max-width」

〇〇px以下は「@media screen and (max-width:〇〇px)」で表します。

max(最大)の長さがここまでという意味で、「以下」を表します。

※これをデスクトップファーストというそうです。

〇〇px以上は「min-width」

〇〇px以上は「@media screen and (min-width:〇〇px)」で表します。

min(最小)の長さがここまでという意味で、「以上」を表します。

※これをモバイルファーストというそうです。

〇〇px以上△△以下は「min-width」and「max-width」

〇〇px以上△△以下は「@media screen and (min-width:〇〇px)」と「@media screen and (max-width:△△px)」を合体して、

「@media screen and (minwidth:〇〇px) and ( maxwidth:△△px)」

と表します。

 

大手飲料水や食品メーカーのサイトの案件に携わらせていただいていますが、「デスクトップファースト」や「モバイルファースト」という言葉はあまり聞かないです。

そして経験上、コード内では、ほぼ「max-width」しか見ません。

ターゲットの閲覧環境が「PC重視であればデスクトップファースト」、「モバイル重視であればモバイルファースト」といったようにルールでどちらを採用するかを選んでもよいかもしれません。

引用:https://sole-color-blog.com/blog/71/

とあるように、案件ごとで決めてしまえばいいですね。

しかし、これまでの経験上、そこまでブレークポイントの書き方にこだわる方はいないです。

そこまで「デスクトップファースト」か「モバイルファースト」かは気にせずに、綺麗なコードであれば大丈夫だと個人的には思います。

スポンサーリンク

 ブレークポイントの場所

お次は、ブレークポイントの場所です。

ブレークポイントは細かく分ければ多数ありますが、bootstrapのグリッドシステムのブレークポイントさえ押さえておけば大丈夫です。

画面サイズ bootstrapで言うと…
0 ≦ x ≦ 544px xs(Extra Small)
544px ≦ x ≦ 768px sm(Small)
768px ≦ x ≦ 992px md(Medium)
992px ≦ x ≦ 1200px lg(Large)
1200 ≦ x xl(Extra Large)

上の5つの範囲ですね。

いわゆる”デスクトップファースト”で表現すると、

このような感じです。

実際、768px以上と768px以下のスタイルで分けることが多いです。

すなわち、③の記述をよく使います。

とりあえず、「544px」「768px」「992px」「1200px」のブレークポイントをおさえておけば十分です。

スポンサーリンク

 まとめ

以上、ブレークポイントの書き方と場所について説明してきました。

すべて覚える必要はなくて、感覚的に理解しておいて、その都度ググれば十分ですね。

ブレークポイントについて諸々忘れたというときに、このサイトをまた参考にしていただければと思います。

以上でなっちる先生の授業を終わります〜。

素敵なプログラミングライフを!

HTML/CSS
スポンサーリンク
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました