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
740
ナウいスマートフォンに対応した 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
TypeScriptで 負荷テストを書こう 〜k6のシングルバイナリの秘密〜
dora1998
7
3.5k
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
3
620
Web MIDI APIを使ってDDJ-400で遊ぼう (p1ass生誕LT会)
dora1998
0
4.4k
うじまるくんをつくろう! / うじまる生誕LT会 (2020/6/1)
dora1998
0
4.9k
Other Decks in Programming
See All in Programming
Identifying User Idenity
moro
6
7.8k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
130
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
Outline View in SwiftUI
1024jp
1
110
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
330
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
Featured
See All Featured
Writing Fast Ruby
sferik
626
61k
Building Your Own Lightsaber
phodgson
102
6k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Facilitating Awesome Meetings
lara
49
6k
BBQ
matthewcrist
85
9.3k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Building Applications with DynamoDB
mza
90
6.1k
4 Signs Your Business is Dying
shpigford
180
21k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
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 ʂ