Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブレイクポイントをちゃんと考え直そう@2021
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
ErinaTakei
June 09, 2021
0
2k
ブレイクポイントをちゃんと考え直そう@2021
ErinaTakei
June 09, 2021
Tweet
Share
More Decks by ErinaTakei
See All by ErinaTakei
ディレクター向けCMS案件の進め方 -WordPress中心-
skyguild
1
2.8k
GoogleAnalyticsの集計について ~中級編~
skyguild
0
2.4k
Googleタグマネージャーの概要
skyguild
1
2.4k
コーディング外注時の進行ポイント
skyguild
0
2.3k
GoogleAnalyticsの集計について ~入門編~
skyguild
0
2.3k
Featured
See All Featured
How to build a perfect <img>
jonoalderson
1
4.9k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
90
We Are The Robots
honzajavorek
0
160
A better future with KSS
kneath
240
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
160
Test your architecture with Archunit
thirion
1
2.1k
エンジニアに許された特別な時間の終わり
watany
106
230k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
160
Deep Space Network (abreviated)
tonyrice
0
47
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
79
Facilitating Awesome Meetings
lara
57
6.8k
Transcript
ブレイクポイントを ちゃんと考え直そう 2021.06.09 By ErinaTakei
ブレイクポイント レスポンシブWebサイトの制作に不可欠。 画面幅に合わせてCSSを切り替える時に使用する、切り替えポイントのこと。 メディアクエリと併用し、レイアウトが可変するポイントを設定することで、各デバイスに最適化した Webサイトを実現。
ブレイクポイント といえば768pxでしょ? うんうん、知ってる知ってる。
思考停止していませんか? 何故768pxなのでしょうか?
768pxって何? タブレットの最小幅 → iOS(iPad)の縦持ち時の最小幅 Androidのタブレットは600pxとか更に 小さいのもある しかし、タブレットの中でも、 768 × 1024が6割以上のシェア率
実際のところ タブレット = ほぼ768px とも言える
つまり、768pxをブレイクポイントにすると? 768px以上をPC表示 → タブレットをPCビューにする 768px以下をSP表示 → タブレット(768px)をSPビューにして、大きいサイズのタブレットはPCビューにする そもそもタブレットビューをどっちにしたいのか? ということがポイントになってくる
タブレットビューを作らないのか? そりゃタブレット用に最適化したレイアウトにするのが一番きれい しかし、 多くの案件の既存アクセスデータを見てみても、 タブレットでのアクセスは1〜2割程度のケースが多い ビューを1つ増やすには、デザインも実装も工数がその分増える・・・ しかし、PCビューにしてもSPビューにしても、 やっぱりタブレットサイズで見るとレイアウトが微妙で部分最適化する必要がある
タブレットビューのブレイクポイントは? iPadの縦持ち最小サイズは768px(iPad mini)、最大サイズは1024px(iPad Pro) Androidタブレットの最小サイズは600px iPhoneの縦持ち最小サイズは320px(SE)、最大サイズは428px(iPhone 12ProMax) iPhoneの横持ち最小サイズは568px(SE) タブレット最小の600px以上をタブレットビューとして、 iPhoneSEの横持ちはSPビュー、それ以上のサイズの横持ちはタブレットビュー
600px〜1024pxをタブレットビューの範囲とする のが良さそう
結局PCとSPのブレイクポイントは? 今までタブレットをPC表示にした際に、 ビューポートで1024px相当のレイアウトに固定する、という手段があった → UAによる操作が出来なくなるため、ビューポートの書き換えは出来なくなる 何も最適化せずに、768px幅でPCビューに すると、3カラム、4カラムのレイアウトが かなり厳しい。。。 小さいタブレットはSPビューにするのがよ いのではないか?
結局PCとSPのブレイクポイントは? 1024px以下がスマホビューでも良いのではないか? → そもそもPCでのアクセス率自体が低くなっている(サイトによるが大半は) → PCでの小さいブラウザに最適化していくコストが割りに合わない さすがに、、 1024px以下だと切り替え早すぎる・・・、1024pxはPCの方が多いだろう。 という場合は、 やはり768px以下をスマホビューにして、PCビューは1024pxを最小幅固定がよい。
少し大きいiPadを考えて820px以下辺りでも可。 PC1024px以下のアクセス率は低い。 「1920px×1080px」と「1366px×768px」がダントツでシェアが多い。 900pxという意見もある https://www.6666666.jp/html/20200213/
ありがとうございました!