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

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

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

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

7ce46cdba50db99f3403024fe2519c91?s=128

Masahiko Sakakibara

April 05, 2017
Tweet

Transcript

  1. 8FC$PNQPOFOUT࣌୅ͷ$44σβΠϯ %FTJHOFECZ'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͕΍ͬͯ͘Δʁʂ

  9. None