menu
menu

キーワード検索

 

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

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 5 ↑) 【jQuery】jQueryでドロップダウンメニュー
  3. ( 2 ↓) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 8 ↑) 【CSS】レスポンシブデザインのブレークポイントは⁉
  5. ( 3 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
  6. ( 6 - ) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 7 - ) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 9 ↑) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  9. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
  10. (10 - ) 【HTML5】スマホサイトの作成・基本編
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

以前【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) {/*Android*/
  .sample-demo h3:after {
  content: "321px〜360px";
  }
/* ** */}

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

 

次はiPhone 8・iPhone Xのサイズ、361px〜375px。


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

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

 

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


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

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

 

次はiPhone 8+のサイズ、413px〜414px。


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

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

 

次はiPhone SE・iPhone 8・iPhone 8+・iPhone X横 Android系横 iPad縦のサイズ、415px〜834px。


@media (min-width: 415px) {/*iPhone SE・iPhone 8・iPhone 8+・iPhone X横 Android系横 iPad縦*/
  .sample-demo h3:after {
  content: "415px〜834px";
  }
/* ** */}

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

 

次からはPC向けの画面サイズ、835px〜959px。


@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横画面、iPad Pro縦画面及びPC向けの画面サイズ、1024px〜1059px。


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

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

 

次もPC向けの画面サイズ、1060px〜1199px。


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

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

 

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


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

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

 

まとめて記述すると、


/*ここから*/
ここに基本デザインと0〜320pxの記述
/*ここまで*/
@media (min-width: 321px) {/*Android*/
/*ここに321px〜360pxの記述*/
/* ** */}
@media (min-width: 361px) {/*iPhone 8・iPhone X*/
/*ここに361px〜375pxの記述*/
/* ** */}
@media (min-width: 376px) {/*Android*/
/*ここに376px〜412pxの記述*/
/* ** */}
@media (min-width: 413px) {/*iPhone 8+*/
/*ここに413px〜414pxの記述*/
/* ** */}
@media (min-width: 415px) {/*iPhone SE・iPhone 8・iPhone 8+・iPhone X横 Android系横 iPad縦*/
/*ここに415px〜834pxの記述*/
/* ** */}
@media (min-width: 835px) {
/*ここに835px〜959pxの記述*/
/* ** */}
@media (min-width: 960px) {
/*ここに960px〜1023pxの記述*/
/* ** */}
@media (min-width: 1024px) {/*iPad横 iPad Pro縦*/
/*ここに1024px〜1059pxの記述*/
/* ** */}
@media (min-width: 1060px) {
/*ここに1060px〜1199pxの記述*/
/* ** */}
@media (min-width: 1200px) {/*iPad Pro横*/
/*ここに1200px〜の記述*/
/* ** */}

こんな感じになります。


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

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

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

関連リンク

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

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