menu
menu

キーワード検索

 

10月更新・前月(9月)の人気記事トップ10 - 10/01/2019

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 4 ↑) 【jQuery】jQueryでドロップダウンメニュー
  4. (圏外↑) 【制作Tips】iPhone画面解像度まとめ
  5. ( 6 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. ( 5 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  7. ( 8 ↑) 【Mac】Safariでソースコードを見る方法
  8. ( 9 ↑) 【制作Tips】画面解像度一覧表
  9. ( 7 ↓) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  10. ( 10 - ) 【jQuery】入門2. jQueryをHTMLに組み込む
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

昨年【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️という内容の記事を投稿しました。

基本的な考えは変わってません。細かな指定で表示したい場合は前回ご紹介した通りの設定が良いと思っています。

しかし、管理することを考えると前回ご紹介したブレークポイントの数では手間が掛かってしまうのも事実。

なので今回、ちょっと多かったブレークポイントを少し減らしてみることにしました。

ブレークポイント

前回投稿した記事では作ったブレークポイントの数は10個。

10個と言っても考え方としてはメジャーブレークポイントはモバイルとPCの境目の835pxの1つです。

しかし、10個あるのに変わりはなく、また管理の手間を考えるとやはりブレークポイントは少ない方が良い。

ということで今回、ブレークポイントは415px960pxに決定しました。

0px 〜 414px

@media (min-width: 415px) {/*415px 〜 959px*/}

@media (min-width: 960px) {/*960px 〜*/}

以上の3スタイルのビューになります。

今回2つのブレークポイントを用意して3つのビューを作りましたが、最初は835pxの1つのブレークポイントだけでも良いかなと思ってました。

モバイル用が834pxまで、835px以上をPC用として使用する考えです。

しかし、モバイル端末で834pxまであるのは広すぎるかなというのと、PC用で835pxは狭いかなという思いもあって、415pxと960pxのブレークポイントを用意しました。

414pxまでをスマホ縦画面用、415px〜959pxをスマホ横画面及びタブレット縦画面用、960px以上をタブレット横画面とPC用として使用します。

sample

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

ブラウザサイズを変えるか、開発者モードでブラウザサイズを変更してみてください。見出しの後ろにCSSで指定してある画面サイズが表示されます。

demo

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

最初のブレークポイントは@mediaがmin-width:415pxなので、@mediaで囲われていない部分は0〜414pxまでとなります。

このサイズは主に、
iPhone SE 縦画面
Pixel 2 縦画面
Pixel 2XL 縦画面
iPhone 678 縦画面
iPhone 678 Plus 縦画面
iPhone XS 縦画面
iPhone XR 縦画面
iPhone XS Max 縦画面
向けのデザインになります。


/*0〜414px*/
h2:after {
  content: "0〜414px";
}

414pxまでの画面サイズのデザインはここで指定します。


1つ目のブレークポイントです。
iPhone SE 横画面
Pixel 2 横画面
Pixel 2XL 横画面
iPhone 678 横画面
iPhone 678 Plus 横画面
iPhone XS 横画面
iPad 縦画面
iPad mini 縦画面
iPad Air 縦画面
iPad Pro 10.5" 縦画面
iPad Pro 11" 縦画面
iPhone XR 横画面
iPhone XS Max 横画面
向けのデザインになります。


@media (min-width: 415px) {
h2:after {
  content: "415px〜959px";
}
/*415px〜959px*/}

min-widthが415pxなので415px以上の画面サイズのデザインはここで指定します。


2つ目のブレークポイントです。
タブレット横画面とPC向けの画面サイズ960px〜です。
iPad 横画面
iPad mini 横画面
iPad Air 横画面
iPad Pro 10.5" 横画面
iPad Pro 11" 横画面
iPad Pro 12.9" 縦画面
iPad Pro 12.9" 横画面
がここの範囲に入ります。


@media (min-width: 960px) {
h2:after {
  content: "960px〜";
}
/*960px〜*/}

min-widthが960pxなので960px以上の画面サイズのデザインはここで指定します。

CSSピクセルサイズ

最後に現在市販されている代表的な端末のCSSピクセルサイズの一覧をご紹介します。基本的にこれらの端末のCSSピクセルサイズはなるべくカバーするということを前提としました。

0〜414px 415px〜959px 960px〜
 
Portrait x Landscape
iPhone SE
320 x 568
Galaxy S5
360 x 640
Pixel 2
411 x 731
Pixel 2XL
411 x 823
iPhone 678
375 x 667
iPhone 678 Plus
414 x 736
iPhone XS
375 x 812
iPhone XR
414 x 896
iPhone XS Max
414 x 896
iPad
iPad mini
768 x 1024
 Portrait Split View
  320 x 1024
  438 x 1024
 Landscape Split View
  320 x 768
  694 x 768
  507 x 768
iPad Air
iPad Pro 10.5"
834 x 1112
 Portrait Split View
  320 x 1112
  504 x 1112
 Landscape Split View
  320 x 834
  782 x 834
  551 x 834
iPad Pro 11"
834 x 1194
 Portrait Split View
  320 x 1194
  504 x 1194
 Landscape Split View
  320 x 834
  782 x 834
  551 x 834
iPad Pro 12.9"
1024 x 1366
 Portrait Split View
  375 x 1366
  639 x 1366
 Landscape Split View
  375 x 1024
  981 x 1024
  678 x 1024

上記の表はChromeとSafariの開発者モードで出てくるCSSピクセルのサイズ一覧です。


ブレークポイントを少なくして管理の手間を省きたいという場合、今回ご紹介するブレークポイントが良いのではないかと思います。

今回のサンプルのようにPC用のデザインを可変にするのであれば必要ありませんが、固定のデザインにする場合、PC用のブレークポイントをもう一つ位追加しても良いと思います、それでも全部で3つです。

いえいえ、メジャーブレークポイント1つとマイナーブレークポイントを分けて細かく設定したい、という方は前回の投稿【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️を参考になさってください。

関連リンク

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

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