Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ナウいスマートフォンに対応した
Webサイトデザイン (CAMPHOR- DAY 2021)

ナウいスマートフォンに対応した
Webサイトデザイン (CAMPHOR- DAY 2021)

2021/3/27に開催されたCAMPHOR- DAY 2021での発表資料です
https://camphor.connpass.com/event/206786/

0063efb4c7066273b877fdabcdcd15b3?s=128

Minoru Takeuchi

March 27, 2021
Tweet

Transcript

  1. φ΢͍εϚʔτϑΥϯ ʹରԠͨ͠ 
 WebαΠτσβΠϯ CAMPHOR- DAY 2021 (2021/3/27) ͲΒ t

    d0ra1998 g dora1998
  2. ͲΒ t d0ra1998ɹ g dora1998 • ژେ޻ֶ෦ిؾిࢠ޻ֶՊ 4ճੜ • WebϑϩϯτΤϯυͱ🍨͕޷͖

    • ڈ೥͸CSSͷ࿩Λ͠·ͨ͠ → • ແྨͷΨδΣοτ޷͖ • ࠷ۙ͏·ͽΐ͍఻આຖ೔ௌ͍ͯΔ
  3. WebαʔϏεͷεϚϗରԠɺ Ͳ͏΍ͬͯ։ൃ͍ͯ͠·͔͢ʁ

  4. ʮ։ൃऀπʔϧͰ֬ೝͯ͠ऴΘΓʂʯ ʹͳ͍ͬͯ·ͤΜ͔ʁ

  5. εϚʔτϑΥϯͷมભ • ը໘αΠζ͕େ͖͘ͳΓɺຊମ͕େܕԽ • ը໘͕֯ۂઢΛඳ͘Α͏ʹͳΓɺϊον͕ొ৔ https://support.apple.com/ja-jp/HT201296

  6. εϚʔτϑΥϯͷมભ • iOS 13 / Android 10 ͔Β͸μʔΫϞʔυ͕ొ৔ https://www.android.com/android-10/#q-dark-theme

  7. WebαʔϏε΋ 
 εϚϗͷຊମ΍OSͷਐԽʹ ରԠ͍ͯ͘͠ඞཁ͕͋Δ

  8. SafariԼ෦ͷσοτκʔϯΛҙࣝ͢Δ • ηʔϑΤϦΞ • ࠷Լ෦ͷφϏήʔγϣϯͱͷׯব๷ࢭ 
 ͷͨΊʹઃ͚ΒΕ͍ͯΔ • 44pxͷσουκʔϯ •

    ΞΫγϣϯόʔ͕ӅΕ͍ͯΔͱ͖ʹ 
 ԡͯ͠΋ClickΠϕϯτ͕ൃՐ͠ͳ͍ cf) https://blog.umeru.ma/post/ios-safaris-action-bar-area-block-tap-event/
  9. SafariԼ෦ͷσοτκʔϯΛҙࣝ͢Δ

  10. μʔΫϞʔυରԠ

  11. μʔΫϞʔυରԠ

  12. μʔΫϞʔυରԠ ݕূʹ͸ɺChrome Dev Tools ͷ Rendering ύωϧΛ࢖͏

  13. Breakpoint͸Ͳ͜ʹஔ͘ʁ ػछ໊ J1IPOFT J1IPOF J1IPOF1SP.BY 8JEUI QY QY QY )FJHIU

    QY QY QY ػछ໊ J1BENJOJ .BD#PPL1SP 
 Πϯν ࢀߟ 8JEUI QY QY )FJHIU QY QY
  14. Breakpoint͸Ͳ͜ʹஔ͘ʁ Tailwind CSS Bootstrap 4 QYΛڥʹεϚϗλϒϨοτ QYΛڥʹλϒϨοτ1$ʜʁ

  15. ػछ໊ 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/ ඞͣ͠΋ରԠ͢Δඞཁ͸ͳ͍͕ɺ ಛघ୺຤ͷଘࡏΛ஌Δ͜ͱ͸େ੾
  16. ·ͱΊ • Webͱ͍͑Ͳ΋ɺ୺຤΍OSͷมԽʹ߹Θͤͯ 
 ඞཁͳ࣮૷͸มԽ͢Δ • ։ൃϚγϯͷσϕϩούʔπʔϧͰຬ଍ͤͣʹɺ 
 ੵۃతʹӾཡ୺຤Ͱૢ࡞͔ͯ֬͠ΊΑ͏ •

    ࣮ػ͕ͳ͍৔߹͸ɺΤϛϡϨʔλΛ࢖͏ͷ΋ख • iOS͸MacͷΈ͕ͩɺAndroid͸OSؔ܎ͳ͘࢖͑Δ ࣭໰ɾײ૝͸ɺYouTube ͷίϝϯτཝ or #camphor_day ΁ʂ