Snow Monkey における私の技術的偏愛

Transcript

1. View Slide

2. ϑϦʔϥϯε ϞϯΩʔϨϯν௕࡚
   
   4OPX.POLFZͷ։ൃൢച
   .881'PSNΞυΦϯͷൢച
   ΩλδϚλΧγ
   !JOD
   
   

   View Slide

3. View Slide

4. View Slide

5. ৴भ8PSE1SFTT.FFUVQJOদຊ
   ϞϯΩʔϨϯν

   ΩλδϚλΧγ!JOD
   4OPX.POLFZʹ͓͚Δ

   ࢲͷٕज़తภѪ
   

   View Slide

6. w ϨΠΞ΢τϏϡʔίϯτϩʔϥʔ
   w ςϯϓϨʔτಡΈࠐΈػೳͷ֦ு
   w ΧελϚΠβʔϑϨʔϜϫʔΫ
   w ςʔϚΞοϓσʔτ"1*
   ΞδΣϯμ
   

   View Slide

7. ϨΠΞ΢τϏϡʔίϯτϩʔϥʔ
   

   View Slide

8. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSTJOHMFQIQ
   

   View Slide

9. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ
   

   View Slide

10. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSTJOHMFQIQ
    

    View Slide

11. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ
    

    View Slide

12. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ
    

    View Slide

13. 
    $POUSPMMFSMBZPVU

    ϨΠΞ΢τϑΝΠϧͷࢦఆ ΧϥϜӈαΠυόʔFUD
    
    $POUSPMMFSSFOEFS

    ϏϡʔϑΝΠϧͷࢦఆ DPOUFOUQPTUDPOUFOUQBHF
    
    

    View Slide

14. ςϯϓϨʔτಡΈࠐΈػೳͷ֦ு
    

    View Slide

15. HFU@UFNQMBUF@QBSU TMVH OBNF
    
    

    View Slide

16. VTF'SBNFXPSLa)FMQFS
    )FMQFSHFU@UFNQMBUF@QBSU TMVH OBNF WBST
    
    

    View Slide

17. VTF'SBNFXPSLa)FMQFS
    )FMQFSHFU@UFNQMBUF@QBSU TMVH OBNF WBST
    
    σʔλΛ౉ͤΔ
    

    View Slide

18. BEE@pMUFS 

    TOPX@NPOLFZ@HFU@UFNQMBUF@QBSU@BSHT 

    GVODUJPO BSHT
    \

    

    <

    TMVHTMVH 

    OBNFOBNF 

    WBSTWBST 

    >

    

    SFUVSOBSHT

    ^

    
    
    

    View Slide

19. BEE@pMUFS 

    bTOPX@NPOLFZ@HFU@UFNQMBUF@QBSU@TMVH` 

    GVODUJPO OBNF WBST
    \

    

    EJWDMBTTlGPPz

    ͍͋͏͓͑

    EJW

    QIQ

    ^ 

    

    

    
    
    

    View Slide

20. ΧελϚΠβʔϑϨʔϜϫʔΫ
    

    View Slide

21. GVODUJPONZUIFNF@DVTUPNJ[F@SFHJTUFS XQ@DVTUPNJ[F
    \
    XQ@DVTUPNJ[FBEE@TFUUJOH
    IFBEFS@UFYUDPMPS
    <
    bEFGBVMU`b`
    >
    
    
    XQ@DVTUPNJ[FBEE@TFDUJPO
    bNZUIFNF@OFX@TFDUJPO@OBNF`
    <
    bUJUMF`@@ b7JTJCMF4FDUJPO/BNF bNZUIFNF`
    
    >
    
    
    XQ@DVTUPNJ[FBEE@DPOUSPM
    OFX81@$VTUPNJ[F@$PMPS@$POUSPM
    XQ@DVTUPNJ[F
    bIFBEFS@UFYUDPMPS`
    <
    bMBCFM`@@ b)FBEFS$PMPS` bNZUIFNF
    
    bTFDUJPO`bNZUIFNF@OFX@TFDUJPO@OBNF`
    bTFUUJOHT`bIFBEFS@UFYUDPMPS`
    >
    
    
    
    
    ^
    BEE@BDUJPO bDVTUPNJ[F@SFHJTUFS` bNZUIFNF@DVTUPNJ[F@SFHJTUFS`
    
    

    View Slide

22. VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa'SBNFXPSL
    DPOUSPM'SBNFXPSLDPOUSPM
    bDPMPS`
    bIFBEFS@UFYUDPMPS`
    <
    bMBCFM`@@ b)FBEFS$PMPS` bNZUIFNF`
    
    >
    
    
    JG JT@DVTUPNJ[F@QSFWJFX
    
    \
    TFDUJPO'SBNFXPSLTFDUJPO
    bNZUIFNF@OFX@TFDUJPO@OBNF`
    <
    bUJUMF`@@ b7JTJCMF4FDUJPO/BNF` bNZUIFNF`
    
    >
    
    
    DPOUSPMKPJO TFDUJPO
    
    ^
    

    View Slide

23. GVODUJPONZUIFNF@DVTUPNJ[F@DTT
    \
    IFBEFS@DPMPSHFU@UIFNF@NPE bIFBEFS@UFYUDPMPS` b`
    
    
    TUZMF
    I\
    DPMPS QIQFDIPIFBEFS@DPMPS
    ^
    TUZMF
    QIQ
    ^
    BEE@BDUJPO bXQ@IFBE` bNZUIFNF@DVTUPNJ[F@DTT`
    
    

    View Slide

24. VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa4UZMF
    4UZMFSFHJTUFS
    bI`
    bDPMPSbHFU@UIFNF@NPE bIFBEFS@UFYUDPMPS`
    
    
    
    

    View Slide

25. MJHIUFO\
    DPMPSMJHIUFO
    
    ^
    EBSLFO\
    DPMPSEBSLFO
    
    ^
    SHCB\
    DPMPSSHCB
    
    ^
    

    View Slide

26. VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa4UZMF
    VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa$PMPS
    4UZMFSFHJTUFS
    bMJHIUFO`
    bDPMPSb$PMPSMJHIUFO b`
    
    
    
    4UZMFSFHJTUFS
    bEBSLFO`
    bDPMPSb$PMPSEBSLFO b`
    
    
    
    4UZMFSFHJTUFS
    bSHCB`
    bDPMPSb$PMPSSHCB b`
    
    
    
    

    View Slide

27. CUO\
    CPSEFSDPMPS
    ^
    QSJNBSZCUO\
    !FYUFOECUO
    ^
    

    View Slide

28. VTF*ODa81@$VTUPNJ[FS@'SBNFXPSLa4UZMF
    BEE@BDUJPO
    bJOD@XQ@DVTUPNJ[FS@GSBNFXPSL@BGUFS@MPBE@TUZMFT`
    GVODUJPO
    \
    4UZMFQMBDFIPMEFS
    bCUO`
    GVODUJPO TFMFDUPST
    \
    4UZMFSFHJTUFS TFMFDUPST bCPSEFSDPMPS`
    
    ^
    
    
    ^
    
    
    4UZMFFYUFOE bCUO` <bQSJNBSZCUO`>
    
    

    View Slide

29. ςʔϚΞοϓσʔτ"1*
    

    View Slide

30. 8PSE1SFTTςʔϚ
    XPSEQSFTTPSH
    ߋ৽͕͋Γ·͢Α
    ߋ৽͠·͢
    Ͱ͸࠷৽൛ͷ[JQΛͲ͏ͧ
    ࠷৽൛ͷ[JQΛ

    Ξοϓϩʔυ
    

    View Slide

31. 8PSE1SFTTςʔϚ
    ߋ৽͕͋Γ·͢Α
    ߋ৽͠·͢
    Ͱ͸࠷৽൛ͷ[JQΛͲ͏ͧ
    λά෇ίϛοτ
    ίϛοτ͕͔͋ͬͨΒ

    ςετϏϧυΛཔΉ
    ໰୊ͳ͍͔Β

    [JQΛϦϦʔε
    (JU)VC
    5SBWJT$*
    

    View Slide

32. View Slide

33. View Slide

34. 8PSE1SFTTςʔϚ
    ߋ৽͕͋Γ·͢Α
    ߋ৽͠·͢
    Ͱ͸࠷৽൛ͷ[JQΛͲ͏ͧ
    λά෇ίϛοτ
    ίϛοτ͕͔͋ͬͨΒ

    ςετϏϧυΛཔΉ
    ໰୊ͳ͍͔Β

    [JQΛϦϦʔε
    (JU)VC
    5SBWJT$*
    ࣗαʔόʔ
    "1*ͷϨεϙϯεͱ

    [JQΛอଘ
    (JU)VCͷ[JQ͸ফ͢
    

    View Slide

35. ͓·͚
    

    View Slide

36. MJOFIFJHIU
    

    View Slide

37. MJOFIFJHIU GPOUTJ[F IBMGMFBEJOH
    IBMGMFBEJOH
    

    View Slide

38. View Slide

39. @function _vertical-rhythm($font-size, $coefficient: 1) {
    $between-lines : _strip-unit(_rem2px($_between-lines));
    $base-line-height: _strip-unit(_rem2px($_base-line-height));
    $base-font-size : _strip-unit(_rem2px($_base-font-size));
    $font-size : _strip-unit($font-size);
    $line-height: $font-size + ($between-lines * $coefficient);
    @if ($line-height < $font-size + ($between-lines * 2)) {
    @return _vertical-rhythm($font-size, ($coefficient + 1));
    } @else {
    @if ($font-size % $base-font-size == 0 and $font-size > $base-font-size) {
    @return $line-height - ($between-lines / 2);
    }
    @return $line-height;
    }
    }
    

    View Slide

40. /* จࣈαΠζͱͦΕʹԠͨ͡࠷దͳline-height */
    @include _font-size-line-height(16px);
    /* margin */
    @include _margin-bottom(1);
    /* padding */
    @include _padding(.5);
    

    View Slide

41. View Slide