menu
menu

キーワード検索

 

前月(10月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 8 ↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  6. (10 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  7. ( 5 ↓) 【PHP】PHPでシンプルなメールフォーム
  8. ( 6 ↓) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. ( - ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  10. ( - ↑) 【Mac】iMovieの保存場所を変更する
このエントリーをはてなブックマークに追加

【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️

【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️

こんにちは(・∀・)

以前【CSS】レスポンシブデザインのブレークポイントは⁉️でブレークポイントをいくつも作ると管理が大変だからメジャーブレークポイントを一つ作って...

という投稿をしましたが、

全部じゃなくてもいいので、現在市販されているデバイスサイズをなるべくカバーしたい...というお願いを受けることもあると思います。

ブレークポイント

今日はそんなオーダーを受けた時にピッタリ、ブレークポイントを細かく設定してみます。

細かくと言っても今回作ったブレークポイントはたったの10個です。

あ、やっぱりちょっと多いですか⁉️

必要に応じて調整してください。

 

それでは最初にサンプルをご覧ください。

ブラウザサイズを変えると見出しの後ろに指定してある画面サイズが表示されます。

Result

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
QRコード

 

それではコードを見ていきましょう。

ブラウザサイズを変えたときわかりやすいと思うので、CSSは画面サイズによって見出しにコメントを挿入する形にします。

また、モバイルファーストでCSSの記述していきますので@mediaで囲われていない部分に書いたCSSがデザインの基本形になります。

 

最初に現れる@mediaがmin-width:321pxなので、@mediaで囲われていない部分は0〜320pxまでとなります。

このサイズは主にiPhone SE 縦画面向けのデザインになります。


/*0〜320px*/
.sample-demo h3:after {
  content: "0〜320px";
}

320pxまでの画面サイズの場合、ここまでに設定したCSSが反映されます。


 

最初のブレークポイントです。

Android端末で多いサイズ、321px〜360px。


@media (min-width: 321px) {
  .sample-demo h3:after {
  content: "321px〜360px";
  }
/* ** */}

min-widthが321pxなので321px以上の画面サイズには、ここで指定したCSSが上書きされます。


 

次はiPhone 8 縦画面iPhone XS 縦画面のサイズ、361px〜375px。


@media (min-width: 361px) {
  .sample-demo h3:after {
  content: "361px〜375px";
  }
/* ** */}

min-widthが361pxなので361px以上の画面サイズには、ここで指定したCSSが上書きされます。


 

次もAndroid端末向けサイズ、376px〜412px。


@media (min-width: 376px) {
  .sample-demo h3:after {
  content: "376px〜412px";
  }
/* ** */}

min-widthが376pxなので376px以上の画面サイズには、ここで指定したCSSが上書きされます。


 

次はiPhone 8 Plus 縦画面iPhone XR 縦画面iPhone XS Max 縦画面のサイズ、413px〜414px。


@media (min-width: 413px) {
  .sample-demo h3:after {
  content: "413px〜414px";
  }
/* ** */}

min-widthが413pxなので413px以上の画面サイズには、ここで指定したCSSが上書きされます。


 

次はiPhone SE 横画面iPhone 8 横画面iPhone 8 Plus 横画面iPhone XS 横画面、Android系横画面、iPad 9.7" 縦画面iPad Pro 10.5" 縦画面のサイズ、415px〜834px。


@media (min-width: 415px) {
  .sample-demo h3:after {
  content: "415px〜834px";
  }
/* ** */}

min-widthが415pxなので415px以上の画面サイズには、ここで指定したCSSが上書きされます。


 

次からはPC向けの画面サイズ、835px〜959pxですが、iPhone XR 横画面iPhone XS Max 横画面もここのレンジに入ります。


@media (min-width: 835px) {
  .sample-demo h3:after {
  content: "835px〜959px";
  }
/* ** */}

min-widthが835pxなので835px以上の画面サイズには、ここで指定したCSSが上書きされます。


 

同じくPC向けの画面サイズ、960px〜1023px。


@media (min-width: 960px) {
  .sample-demo h3:after {
  content: "960px〜1023px";
  }
/* ** */}

min-widthが960pxなので960px以上の画面サイズには、ここで指定したCSSが上書きされます。


 

次はiPad 9.7" 横画面iPad Pro 12.9" 縦画面及びPC向けの画面サイズ、1024px〜1059px。


@media (min-width: 1024px) {
  .sample-demo h3:after {
  content: "1024px〜1059px";
  }
/* ** */}

min-widthが1024pxなので1024px以上の画面サイズには、ここで指定したCSSが上書きされます。


 

次は、iPad Pro 10.5" 横画面及びPC向けの画面サイズ、1060px〜1199px。


@media (min-width: 1060px) {
  .sample-demo h3:after {
  content: "1060px〜1199px";
  }
/* ** */}

min-widthが1060pxなので1060px以上の画面サイズには、ここで指定したCSSが上書きされます。


 

最後はiPad Pro 12.9" 横画面及びPC向けの画面サイズ、1200px以上。


@media (min-width: 1200px) {
  .sample-demo h3:after {
  content: "1200px〜";
  }
/* ** */}

min-widthが1200pxなので1200px以上の画面サイズには、ここで指定したCSSが上書きされます。


 

まとめて記述すると、


/*ここから*/
ここに基本デザインと0〜320pxの記述/*iPhone SE*/
/*ここまで*/
@media (min-width: 321px) {/*Android*/
/*ここに321px〜360pxの記述*/
/* ** */}
@media (min-width: 361px) {/*iPhone 8 縦画面・iPhone XS 縦画面*/
/*ここに361px〜375pxの記述*/
/* ** */}
@media (min-width: 376px) {/*Android*/
/*ここに376px〜412pxの記述*/
/* ** */}
@media (min-width: 413px) {/*iPhone 8 Plus 縦画面・iPhone XR 縦画面・iPhone XS Max 縦画面*/
/*ここに413px〜414pxの記述*/
/* ** */}
@media (min-width: 415px) {/*iPhone SE 横画面・iPhone 8 横画面・iPhone 8 Plus 横画面・iPhone XS 横画面・ Android系横画面・iPad 9.7" 縦画面・iPad Pro 10.5" 縦画面*/
/*ここに415px〜834pxの記述*/
/* ** */}
@media (min-width: 835px) {/*PC向け画面・iPhone XR 横画面・iPhone XS Max 横画面*/
/*ここに835px〜959pxの記述*/
/* ** */}
@media (min-width: 960px) {/*PC向け画面*/
/*ここに960px〜1023pxの記述*/
/* ** */}
@media (min-width: 1024px) {/*PC向け画面・iPad 9.7" 横画面・iPad Pro 12.9" 縦画面*/
/*ここに1024px〜1059pxの記述*/
/* ** */}
@media (min-width: 1060px) {/*PC向け画面・iPad Pro 10.5" 横画面*/
/*ここに1060px〜1199pxの記述*/
/* ** */}
@media (min-width: 1200px) {/*PC向け画面・iPad Pro12.9" 横画面*/
/*ここに1200px〜の記述*/
/* ** */}

こんな感じになります。


デザイン次第ですが、ブレークポイントを細かく分けても更新に手間がかからないようにすることはできます。

デザインとコーディングが兼任の方はその辺を考えてデザインすると良いと思います。

デザインとコーディングが分業の場合、デザイナーとコーダーで話し合う必要はありますね。

関連リンク

【CSS】レスポンシブデザインのブレークポイントは⁉️

  • CSS3 ブレークポイント メディアクエリ レスポンシブデザイン
このエントリーをはてなブックマークに追加