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

by Minoru Takeuchi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ͲΒ t d0ra1998ɹ g dora1998 • ژେ޻ֶ෦ిؾిࢠ޻ֶՊ 4ճੜ • WebϑϩϯτΤϯυͱ🍨͕޷͖ • ڈ೥͸CSSͷ࿩Λ͠·ͨ͠ → • ແྨͷΨδΣοτ޷͖ • ࠷ۙ͏·ͽΐ͍఻આຖ೔ௌ͍ͯΔ

Slide 3

Slide 3 text

WebαʔϏεͷεϚϗରԠɺ Ͳ͏΍ͬͯ։ൃ͍ͯ͠·͔͢ʁ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

SafariԼ෦ͷσοτκʔϯΛҙࣝ͢Δ • ηʔϑΤϦΞ • ࠷Լ෦ͷφϏήʔγϣϯͱͷׯব๷ࢭ   ͷͨΊʹઃ͚ΒΕ͍ͯΔ • 44pxͷσουκʔϯ • ΞΫγϣϯόʔ͕ӅΕ͍ͯΔͱ͖ʹ   ԡͯ͠΋ClickΠϕϯτ͕ൃՐ͠ͳ͍ cf) https://blog.umeru.ma/post/ios-safaris-action-bar-area-block-tap-event/

Slide 9

Slide 9 text

SafariԼ෦ͷσοτκʔϯΛҙࣝ͢Δ

Slide 10

Slide 10 text

μʔΫϞʔυରԠ

Slide 11

Slide 11 text

μʔΫϞʔυରԠ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Breakpoint͸Ͳ͜ʹஔ͘ʁ ػछ໊ J1IPOFT J1IPOF J1IPOF1SP.BY 8JEUI QY QY QY )FJHIU QY QY QY ػछ໊ J1BENJOJ .BD#PPL1SP   Πϯν ࢀߟ 8JEUI QY QY )FJHIU QY QY

Slide 14

Slide 14 text

Breakpoint͸Ͳ͜ʹஔ͘ʁ Tailwind CSS Bootstrap 4 QYΛڥʹεϚϗλϒϨοτ QYΛڥʹλϒϨοτ1$ʜʁ

Slide 15

Slide 15 text

ػछ໊ 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/ ඞͣ͠΋ରԠ͢Δඞཁ͸ͳ͍͕ɺ ಛघ୺຤ͷଘࡏΛ஌Δ͜ͱ͸େ੾

Slide 16

Slide 16 text

·ͱΊ • Webͱ͍͑Ͳ΋ɺ୺຤΍OSͷมԽʹ߹Θͤͯ   ඞཁͳ࣮૷͸มԽ͢Δ • ։ൃϚγϯͷσϕϩούʔπʔϧͰຬ଍ͤͣʹɺ   ੵۃతʹӾཡ୺຤Ͱૢ࡞͔ͯ֬͠ΊΑ͏ • ࣮ػ͕ͳ͍৔߹͸ɺΤϛϡϨʔλΛ࢖͏ͷ΋ख • iOS͸MacͷΈ͕ͩɺAndroid͸OSؔ܎ͳ͘࢖͑Δ ࣭໰ɾײ૝͸ɺYouTube ͷίϝϯτཝ or #camphor_day ΁ʂ