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
1.9k
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
450
TypeScriptで 負荷テストを書こう 〜k6のシングルバイナリの秘密〜
dora1998
9
4.6k
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
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
はじめてのMaterial3 Expressive
ym223
2
890
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.3k
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
rage against annotate_predecessor
junk0612
0
170
速いWebフレームワークを作る
yusukebe
5
1.7k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
530
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Designing for humans not robots
tammielis
253
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Agile that works and the tools we love
rasmusluckow
330
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Why Our Code Smells
bkeepers
PRO
339
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Practical Orchestrator
shlominoach
190
11k
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 ʂ