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
780
ナウいスマートフォンに対応した 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
9
4.1k
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
3
690
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
DevNexus - Create AI Infused Java Apps with LangChain4j
kdubois
0
160
技術好きなエンジニアが "リーダーへの進化" によって得たものと失ったもの
pospome
4
1.1k
Jasprが凄い話
hyshu
0
260
JAWS Days 2025のインフラ
komakichi
1
390
変化の激しい時代における、こだわりのないエンジニアの強さ
satoshi256kbyte
1
1k
「その気にさせる」エンジニアが 最強のリーダーになる理由
gimupop
3
360
Boost Your Web Performance with Hyperdrive
chimame
1
200
イベントソーシングによってインピーダンスミスマッチから解放された話
tkawae
1
130
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
910
エンジニアに許された特別な時間の終わり
watany
83
70k
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
250
フロントエンドのチューニングに挑戦してみる
jdkfx
0
100
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
4 Signs Your Business is Dying
shpigford
183
22k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Gamification - CAS2011
davidbonilla
80
5.2k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
680
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Facilitating Awesome Meetings
lara
53
6.3k
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 ʂ