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

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 ΁ʂ