【iPhone 13 ProMaxまで対応】レスポンシブデザインのブレイクポイントのテンプレ

こんにちは、ゆうが(@yuuuugablog)です。
今回は、最新の機種iPhone 13 ProMaxまで対応しているレスポンシブデザインのブレイクポイントを紹介します。

どうぞ、この記事に書いてあるブレイクポイントをテンプレート代わりにし、ご使用くださいませ。m(_ _)m

[box class=”box30″ title=”本記事のもくじ”]

1. レスポンシブデザインのブレイクポイントのテンプレ
2. モバイルファーストの場合の書き方
3. BoostNoteに書くと、爆速で作業ができる

[/box]

この記事を書いた人

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細＆記事編集ポリシーはこちら

レスポンシブデザインのブレイクポイントのテンプレ

PC用のブレイクポイント

[codebox title=”CSS”]

/* PC用のCSS */
@media (min-width: 1200px) {

}

[/codebox]

タブレット用のブレイクポイント

[codebox title=”CSS”]

/* タブレット用のCSS */
@media (min-width:479px) and (max-width:768px) {

}

[/codebox]

スマホ用のブレイクポイント

[codebox title=”CSS”]

/* スマホ用のCSS */
@media (max-width: 479px) {

}

[/codebox]

iPhone12,13mini用のブレイクポイント

[codebox title=”CSS”]

/* スマホ用のCSS */
@media (max-width: 375px;){

}

[/codebox]

iPhone12,13・12,13Pro用のブレイクポイント

[codebox title=”CSS”]

/* スマホ用のCSS */
@media (max-width: 390px;){

}

[/codebox]

iPhone12,13 ProMax用のブレイクポイント

[codebox title=”CSS”]

/* スマホ用のCSS */
@media (max-width: 428px;){

}

[/codebox]

モバイルファーストの場合の書き方

もし、モバイルファーストでブレイクポイントを書く場合でしたらスマホのブレイクポイントは不要で、タブレット・PCのブレイクポイントだけを書けばOKです。

具体的には、max-widthの部分をmin-widthに変えて、下記の記述を先にしてください。

モバイルファースト用のブレイクポイント

[codebox title=”CSS”]

/* タブレット用のCSS */
@media (min-width:481px){

}

[/codebox]

[codebox title=”CSS”]

/* PC用のCSS */
@media (min-width: 1200px) {

}

[/codebox]

web制作などはモバイルファーストで作ると、後々やり直すときの手間が省けたりとメリットがあります。

BoostNoteに書くと、爆速で作業ができる

最後になりますが、今回ご紹介したブレイクポイントのテンプレは、BoostNoteというエンジニア必須アプリに貼っていただくと超絶便利になります。
知らない方のために軽く説明しますと、エンジニアのメモ帳で自分がよく使うコードなどを保存できるアプリです。

詳しい内容や使い方などは、こちら【完全無料】BoostNoteの特徴や使い方を解説で書いていますので参考にしてみてください。

[kanren id=”1399″]