menu
menu

キーワード検索

 

5月更新・前月(4月)の人気記事トップ10 - 05/11/2020

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

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

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

こんにちは(・∀・)

昨年8月に投稿した【2019年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️から約8ヶ月が経ちましたが、その後のレスポンシブデザインのブレークポイントのベストな設定はどうなっているのでしょうか。

ブレークポイント

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

その前に投稿した【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️の10個のブレークポイントからは大幅に減らしました。2つのブレークポイントで3つの表示スタイルを作りましたが、それだけでWebサイトの表示はカバーできていたのでしょうか。

個人的な考えとしては2つのブレークポイントで十分だったのではないかと思っています。

2つのブレークポイントで3つのスタイルを表示。

なので今年のブレークポイントも前回2019年度版のブレークポイント415px960pxを踏襲していきたいと思います。

0px 〜 414px

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

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

上記の設定で、3つのスタイルを表示させます。

なお、2つのブレークポイントで3つのスタイルでも多すぎて管理が大変という方、835px1つのブレークポイント設定もありかなと思います。その場合、1つのブレークポイントで2つのスタイルとなるのでスマホ用とPC用ということになります。モバイル用が834pxまでで835px以上がPC用です。

0px 〜 834px

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

表示は対して気にしない、管理優先、でもスマホサイトは必要という場合は、この835px1つのブレークポイント設定が良いのではないかと思います。

sample

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

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

demo

ちなみに835px1つだけのブレークポイントにするとこんな感じになります。

demo2

今回もモバイルファーストで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ピクセルのサイズ一覧です。


ブレークポイントは少ないに越したことはありませんが、ブレークポイントが少ない分だけデザインを妥協することになります。

管理優先か見栄え優先かは、そのサイトのスタイルで決めることになります。

関連リンク

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

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