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

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͕΍ͬͯ͘Δʁʂ

9. None