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

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

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͸Ͳ͜ʹஔ͘ʁ ػछ໊ J1IPOF
    T J1IPOF
     J1IPOF
    
    1SP
    .BY 8JEUI 
    QY 
    QY 
    QY )FJHIU 
    QY 
    QY 
    QY ػछ໊ J1BE
    NJOJ .BD#PPL
    1SP 
 Πϯν
    ࢀߟ 8JEUI 
    QY 
    QY )FJHIU 
    QY 
    QY
14. Breakpoint͸Ͳ͜ʹஔ͘ʁ Tailwind CSS Bootstrap 4 
    QYΛڥʹεϚϗλϒϨοτ 
    QYΛڥʹλϒϨοτ1$ʜʁ
15. ػछ໊ J1BE
    NJOJ .BD#PPL
    1SP 
 Πϯν
    ࢀߟ (BMBYZ
    'PME 
 ดͨ࣌͡ (BMBYZ
    'PME
    ։͍ͨ࣌ 8JEUI 
    QY 
    QY 
    QY 
    QY )FJHIU 
    QY 
    QY 
    QY 
    QY Breakpoint͸Ͳ͜ʹஔ͘ʁ ػछ໊ J1IPOF
    T J1IPOF
     J1IPOF
    
    1SP
    .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 ΁ʂ