Web Components時代のCSSデザイン/web-components-css-design

HTML5 Experts.jpの対談企画での発表資料です。
https://www.facebook.com/events/831024777036209/

Transcript

1. 8FC
   $PNQPOFOUT࣌୅ͷ$44σβΠϯ %FTJHOFE
   CZ
   'SFFQJL
2. $PNQPOFOUTࢦ޲ʢ࠶ར༻ʣͷઃܭ
3. "UPNJD%FTJHOͱ͍͏ཧ࿦ %F/"
   %&4*(/
   #-0(ΑΓʢIUUQEFTJHOEFOBDPNʣ
4. ‣ $PNQPOFOUT୯ҐͰσβΠϯ͓ئ͍ͯ͠Δͷʹɺඍົʹ࢓ ༷ͷҧ͏$PNQPOFOUT
   ‣ ۠੾Γઢม͑ΔҙຯͲ͜ʹ͋Δͷʁʂ
   ‣ Ͳ͕͜Өڹͯ͘͠Δ͔Θ͔Βͳ͍$44
   ‣ JNQPSUBOUͷཚ༻
   ‣ ৑௕ͳ$44ઃܭʹΑΔDMBTT໊Λ͚ͭΔͨΊ͚ͩͷEJW஍ ࠈ
   ‣ σόΠεຖͷදࣔͰߋʹEJW஍ࠈ
   ‣ ࢖͍ͬͯͳ͍͸ͣͳͷʹࣺ͍͍͔ͯͯ೰ΉDMBTT
   ‣ ͔͠΋ݸਓ͝ͱʹઃܭࢥ૝ඍົʹҧ͍ͬͯͳ͍ʁʂ ݱ࣮
5. ৽ٕज़ʮ8FC
   $PNQPOFOUTʯ %F/"
   %&4*(/
   #-0(ΑΓʢIUUQEFTJHOEFOBDPNʣ <ion-button><ion-icon name="heart"></ion-icon>いいね</ion-button> <button full="" ion-button="" class="button button-md button-default button-default-md button-full button-full-md" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: none;"><span class="button-inner"><ion-icon name="heart" role="img" class="icon icon-md ion-md-heart" aria- label="heart"></ion-icon>いいね</span><div class="button-effect"></ div></button>
6. ৽ٕज़ʮ8FC
   $PNQPOFOUTʯ %F/"
   %&4*(/
   #-0(ΑΓʢIUUQEFTJHOEFOBDPNʣ ͬ͘͟Γ͍͏ͱɺ+BWB4DSJQUΛ࢖ͬͯɺΦϦδφϧ)5.-λάΛ࡞ ΔػೳɻJGSBNFͷΑ͏ʹ$44Λதʹด͡ࠐΊΔ͜ͱ΋Մೳɻ ‣ $VTUPN
   &MFNFOUT
 ΦϦδφϧλάΛͭ͘Δػೳ
   ‣ 5FNQMBUFT
 UFNQMBUFλάΛ࢖ͬͨ)5.-ςϯϓϨʔτػೳ
   ‣ )5.-*NQPSUT
 5FNQMBUFTΛ֎෦ϑΝΠϧԽ͢Δʢ)5.-ϑΝΠϧΛ֎෦ ϑΝΠϧʹͯ͠+BWB4DSJQUͰૢ࡞͢ΔͨΊͷ΋ͷͰ͢ʣ
   ‣ 4IBEPX
   %0.
 $44ͷΧϓηϧԽ 8FC
   $PNQPOFOUT
7. ೥
   #PPUTUSBQ
   ஀ੜ
 #PPUTUSBQ
   ஀ੜɻϨεϙϯγϒσβΠϯΛ࠾༻ ೥
   *&஀ੜɻશͯͷϝδϟʔϒϥ΢βͰ$44͕ར༻Մೳʹ ೥
 J04
   
   
   #PPUTUSBQ
   ͕ϑϥοτσβΠϯΛ࠾༻
 (PPHMFࣾϚςϦΞϧσβΠϯΛൃද
8. 8FC
   $PNQPOFOUT͕΍ͬͯ͘Δʁʂ