5月更新・前月(4月)の人気記事トップ10 05/02/2023
- ( 02 ↑) 【Mac】MacにGoogle Driveをインストール
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 07 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 04 ↓) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- (圏外↑) 【2022年7月】Mac画面解像度まとめ
- (圏外↑) 【GIMP】線を真っ直ぐ引く方法
- ( 08 ↓) 【Labs】マウスオーバーでボタンの色が変わるロールオーバー
【Labs】レスポンシブデザインのブレークポイントは！？
こんにちは（・∀・）
昔見たザ・インターネットという映画で、主演のサンドラ・ブロックがPCでピザを頼んでいたのを見て、おースゴーいなんて思っていましたが、今ではiPadで普通にピザを注文していることに気づき、そのスゴいと思ったことが普通のことになっているなんて、なんとも時代の流れを感じるところです。
ところで、レスポンシブデザインでWebサイトを作る際のブレークポイントはみなさんどうなさっていらっしゃいますか？？
【Labs】レスポンシブデザインのブレークポイントはこれで決まり！【決定版】
メジャーブレークポイント
レスポンシブデザインでWebサイトを作る際のターゲットデバイスはスマホとPC、予算次第でタブレットといったところでしょうか。
メジャーブレークポイントを一つ作ってモバイルとPCを分けるのが一番簡単なレスポンシブデザインなのかと思いますが、その場合のブレークポイントはいくつがいいのでしょうか。
スマホでもiPhoneやAndroidなど画面解像度の違う端末はたくさんあります。ちなみにiPhoneとiPadの画面解像度はこちらです。
- iPhone SE
- 568x320(1136x640)
- iPhone 6・7
- 667x375(1334x750)
- iPhone 6 Plus・7 Plus
- 736x414(1920x1080)
- iPhone X
- 2436x1125
- iPad・iPad mini
- 1024x768
- iPad Pro(12.9)
- 1366x1024
この一覧はiPhoneだけですがAndroidや大概のスマホの画面は縦横768px以内で画面サイズは収まります。
こちらのサイトがわかりやすい表を使って解説されていました。
レスポンシブWebデザインのブレイクポイント、何ピクセルにすればいいの？
結論としてはスマホサイトとPCサイトで振り分ける場合のブレークポイントは768px辺りでいいと言うことがわかります。
ところでタブレットはどうなるのでしょうか。
ブレークポイントを上記の通り768px辺りで振り分けているような場合、min-width:768pxにするとiPadの縦画面も横画面もPC向け画面という感じになります。
縦画面もPC向け画面だとちょっと狭いという場合は、min-width:769pxにするとiPadの縦画面はモバイル向け画面になり横画面はPC向け画面という感じになります。
更にmin-width:1025pxのブレークポイントを作るとiPadの横画面用のレイアウトができます。
768pxまでがスマホとiPad縦画面、769pxから1024pxまでがiPad横画面、1025px以上がPC画面というような感じです。
タブレット用のブレークポイントを持たずにスマホ向け画面かPC向け画面かのどちらかで表示させるような場合、できればタブレットはPC向け画面で見たいというのが個人的な意見です。
最後に、レスポンシブデザインについて学びたい場合、こちらのWebサイトがとてもわかりやすくてオススメです。
レスポンシブ ウェブデザインの基本
関連リンク
【Labs】レスポンシブデザインのブレークポイントはこれで決まり！【決定版】
【Guide】画面解像度一覧表