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
macOS でできる リアルタイム動画像処理
biacco42
7
1.9k
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
CSC305 Lecture 13
javiergs
PRO
0
130
現場で役立つモデリング 超入門
masuda220
PRO
13
2.9k
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Designing for Performance
lara
604
68k
RailsConf 2023
tenderlove
29
880
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Speed Design
sergeychernyshev
24
570
Become a Pro
speakerdeck
PRO
24
5k
Adopting Sorbet at Scale
ufuk
73
9k
Building Applications with DynamoDB
mza
90
6.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
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 ʂ