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
ErinaTakei
June 09, 2021
0
1.4k
ブレイクポイントをちゃんと考え直そう@2021
ErinaTakei
June 09, 2021
Tweet
Share
More Decks by ErinaTakei
See All by ErinaTakei
ディレクター向けCMS案件の進め方 -WordPress中心-
skyguild
1
2.3k
GoogleAnalyticsの集計について ~中級編~
skyguild
0
2k
Googleタグマネージャーの概要
skyguild
1
2.1k
コーディング外注時の進行ポイント
skyguild
0
2k
GoogleAnalyticsの集計について ~入門編~
skyguild
0
2k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Into the Great Unknown - MozCon
thekraken
30
1.4k
KATA
mclloyd
27
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Navigating Team Friction
lara
183
14k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
A designer walks into a library…
pauljervisheath
201
24k
Become a Pro
speakerdeck
PRO
24
4.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
RailsConf 2023
tenderlove
28
840
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
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/
ありがとうございました!