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
ナウいスマートフォンに対応した Webサイトデザイン (CAMPHOR- DAY 2021)
Search
Minoru Takeuchi
March 27, 2021
Programming
0
830
ナウいスマートフォンに対応した Webサイトデザイン (CAMPHOR- DAY 2021)
2021/3/27に開催されたCAMPHOR- DAY 2021での発表資料です
https://camphor.connpass.com/event/206786/
Minoru Takeuchi
March 27, 2021
Tweet
Share
More Decks by Minoru Takeuchi
See All by Minoru Takeuchi
1から理解するWeb Push
dora1998
7
2.2k
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
460
TypeScriptで 負荷テストを書こう 〜k6のシングルバイナリの秘密〜
dora1998
9
4.7k
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
3
750
Web MIDI APIを使ってDDJ-400で遊ぼう (p1ass生誕LT会)
dora1998
0
4.5k
うじまるくんをつくろう! / うじまる生誕LT会 (2020/6/1)
dora1998
0
5k
Other Decks in Programming
See All in Programming
チームの境界をブチ抜いていけ
tokai235
0
230
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
290
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
130
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
560
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.6k
Introduce Hono CLI
yusukebe
6
3.1k
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
CSC305 Lecture 08
javiergs
PRO
0
280
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.5k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
How STYLIGHT went responsive
nonsquared
100
5.9k
Rails Girls Zürich Keynote
gr2m
95
14k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
A better future with KSS
kneath
239
18k
BBQ
matthewcrist
89
9.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Facilitating Awesome Meetings
lara
57
6.6k
Making Projects Easy
brettharned
120
6.4k
It's Worth the Effort
3n
187
28k
Transcript
φ͍εϚʔτϑΥϯ ʹରԠͨ͠ WebαΠτσβΠϯ CAMPHOR- DAY 2021 (2021/3/27) ͲΒ t
d0ra1998 g dora1998
ͲΒ t d0ra1998ɹ g dora1998 • ژେֶ෦ిؾిࢠֶՊ 4ճੜ • WebϑϩϯτΤϯυͱ🍨͕͖
• ڈCSSͷΛ͠·ͨ͠ → • ແྨͷΨδΣοτ͖ • ࠷ۙ͏·ͽΐ͍આຖௌ͍ͯΔ
WebαʔϏεͷεϚϗରԠɺ Ͳ͏ͬͯ։ൃ͍ͯ͠·͔͢ʁ
ʮ։ൃऀπʔϧͰ֬ೝͯ͠ऴΘΓʂʯ ʹͳ͍ͬͯ·ͤΜ͔ʁ
εϚʔτϑΥϯͷมભ • ը໘αΠζ͕େ͖͘ͳΓɺຊମ͕େܕԽ • ը໘͕֯ۂઢΛඳ͘Α͏ʹͳΓɺϊον͕ొ https://support.apple.com/ja-jp/HT201296
εϚʔτϑΥϯͷมભ • iOS 13 / Android 10 ͔ΒμʔΫϞʔυ͕ొ https://www.android.com/android-10/#q-dark-theme
WebαʔϏε εϚϗͷຊମOSͷਐԽʹ ରԠ͍ͯ͘͠ඞཁ͕͋Δ
SafariԼ෦ͷσοτκʔϯΛҙࣝ͢Δ • ηʔϑΤϦΞ • ࠷Լ෦ͷφϏήʔγϣϯͱͷׯবࢭ ͷͨΊʹઃ͚ΒΕ͍ͯΔ • 44pxͷσουκʔϯ •
ΞΫγϣϯόʔ͕ӅΕ͍ͯΔͱ͖ʹ ԡͯ͠ClickΠϕϯτ͕ൃՐ͠ͳ͍ cf) https://blog.umeru.ma/post/ios-safaris-action-bar-area-block-tap-event/
SafariԼ෦ͷσοτκʔϯΛҙࣝ͢Δ
μʔΫϞʔυରԠ
μʔΫϞʔυରԠ
μʔΫϞʔυରԠ ݕূʹɺChrome Dev Tools ͷ Rendering ύωϧΛ͏
BreakpointͲ͜ʹஔ͘ʁ ػछ໊ J1IPOFT J1IPOF J1IPOF1SP.BY 8JEUI QY QY QY )FJHIU
QY QY QY ػछ໊ J1BENJOJ .BD#PPL1SP Πϯν ࢀߟ 8JEUI QY QY )FJHIU QY QY
BreakpointͲ͜ʹஔ͘ʁ Tailwind CSS Bootstrap 4 QYΛڥʹεϚϗλϒϨοτ QYΛڥʹλϒϨοτ1$ʜʁ
ػछ໊ J1BENJOJ .BD#PPL1SP Πϯν ࢀߟ (BMBYZ'PME ดͨ࣌͡ (BMBYZ'PME
։͍ͨ࣌ 8JEUI QY QY QY QY )FJHIU QY QY QY QY BreakpointͲ͜ʹஔ͘ʁ ػछ໊ J1IPOFT J1IPOF J1IPOF1SP.BY 8JEUI QY QY QY )FJHIU QY QY QY https://kakaku.com/keitai/smartphone/model/M0000000722/ ඞͣ͠ରԠ͢Δඞཁͳ͍͕ɺ ಛघͷଘࡏΛΔ͜ͱେ
·ͱΊ • Webͱ͍͑ͲɺOSͷมԽʹ߹Θͤͯ ඞཁͳ࣮มԽ͢Δ • ։ൃϚγϯͷσϕϩούʔπʔϧͰຬͤͣʹɺ ੵۃతʹӾཡͰૢ࡞͔ͯ֬͠ΊΑ͏ •
࣮ػ͕ͳ͍߹ɺΤϛϡϨʔλΛ͏ͷख • iOSMacͷΈ͕ͩɺAndroidOSؔͳ͑͘Δ ࣭ɾײɺYouTube ͷίϝϯτཝ or #camphor_day ʂ