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

Transcript

2.  ϑϦʔϥϯε
   
   ϞϯΩʔϨϯν
   
   ௕࡚
   
    4OPX
   .POLFZ
   ͷ։ൃ
   
   ൢച
    .8
   81
   'PSN
   ΞυΦϯͷൢച ΩλδϚλΧγ
   
   
   !JOD
   
5. ৴भ
   8PSE1SFTT
   .FFUVQ
   JO
   দຊ ϞϯΩʔϨϯν
 ΩλδϚλΧγ
   !JOD 4OPX
   .POLFZ
   ʹ͓͚Δ
 ࢲͷٕज़తภѪ
6. w ϨΠΞ΢τϏϡʔίϯτϩʔϥʔ
   w ςϯϓϨʔτಡΈࠐΈػೳͷ֦ு
   w ΧελϚΠβʔϑϨʔϜϫʔΫ
   w ςʔϚΞοϓσʔτ
   "1* ΞδΣϯμ
7. ϨΠΞ΢τϏϡʔίϯτϩʔϥʔ
8. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSTJOHMFQIQ
9. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ
10. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSTJOHMFQIQ
11. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ
12. IUUQTHJUIVCDPN8PSE1SFTTUXFOUZTFWFOUFFOCMPCNBTUFSQBHFQIQ
13. 
    $POUSPMMFSMBZPVU
 ϨΠΞ΢τϑΝΠϧͷࢦఆ
    
    ΧϥϜ
    
    ӈαΠυόʔ
    FUD
    
    $POUSPMMFSSFOEFS
 ϏϡʔϑΝΠϧͷࢦఆ
    
    DPOUFOUQPTU
    
    DPOUFOUQBHF
    
14. ςϯϓϨʔτಡΈࠐΈػೳͷ֦ு
15. HFU@UFNQMBUF@QBSU
    TMVH
    OBNF
    
16. VTF
    'SBNFXPSLa)FMQFS
    )FMQFSHFU@UFNQMBUF@QBSU
    TMVH
    OBNF
    WBST
    
17. VTF
    'SBNFXPSLa)FMQFS
    )FMQFSHFU@UFNQMBUF@QBSU
    TMVH
    OBNF
    WBST
     σʔλΛ౉ͤΔ
18. BEE@pMUFS 

    
    
    
    TOPX@NPOLFZ@HFU@UFNQMBUF@QBSU@BSHT 

    
    
    
    GVODUJPO
    BSHT
    
    \

    
    
    
    
    
     

    
    
    
    
    
    
    
    <

    
    
    
    
    
    
    
    
    
    TMVH
    
    
    
    TMVH 

    
    
    
    
    
    
    
    
    
    OBNF
    
    OBNF 

    
    
    
    
    
    
    
    
    
    WBST
    
    
    
    WBST 

    
    
    
    
    
    
    
    >

    
    
    
    
    
    
    

    
    
    
    
    
    SFUVSO
    BSHT

    
    ^
 
19. BEE@pMUFS 

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

    
    
    
    GVODUJPO
    OBNF
    WBST
    
    \

    
    
    
    
    
    

    
    
    
    
    
    EJW
    DMBTTlGPPz

    
    
    
    
    
    
    
    
    
    ͍͋͏͓͑

    
    
    
    
    
    EJW

    
    
    
    
    
     QIQ

    
    
    
    ^ 

    
    
    
     

    
    
    
    
 
20. ΧελϚΠβʔϑϨʔϜϫʔΫ
21. GVODUJPO
    NZUIFNF@DVTUPNJ[F@SFHJTUFS
    XQ@DVTUPNJ[F
    
    \
    
    XQ@DVTUPNJ[FBEE@TFUUJOH
    
    
    IFBEFS@UFYUDPMPS
    
    
    <
    
    
    
    bEFGBVMU`
    
    b`
    
    
    >
    
    
    
    XQ@DVTUPNJ[FBEE@TFDUJPO
    
    
    bNZUIFNF@OFX@TFDUJPO@OBNF`
    
    
    
    <
    
    
    
    bUJUMF`
    
    @@
    b7JTJCMF
    4FDUJPO
    /BNF
    bNZUIFNF`
    
    
    
    >
    
    
    
    XQ@DVTUPNJ[FBEE@DPOUSPM
    
    
    OFX
    81@$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`
    
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`
    
    @@
    b7JTJCMF
    4FDUJPO
    /BNF`
    bNZUIFNF`
    
    
    
    >
    
    
    
    DPOUSPMKPJO
    TFDUJPO
    
    ^
23. GVODUJPO
    NZUIFNF@DVTUPNJ[F@DTT
    \
    
    IFBEFS@DPMPS
    
    HFU@UIFNF@NPE
    bIFBEFS@UFYUDPMPS`
    b`
    
    
    
    
    TUZMF
    
    I
    \
    
    
    DPMPS
     QIQ
    FDIP
    IFBEFS@DPMPS
    
    
    ^
    
    TUZMF
    
     QIQ
    ^
    BEE@BDUJPO
    bXQ@IFBE`
    bNZUIFNF@DVTUPNJ[F@DTT`
    
24. VTF
    *ODa81@$VTUPNJ[FS@'SBNFXPSLa4UZMF
    4UZMFSFHJTUFS
    
    bI`
    
    bDPMPS
    b
    
    HFU@UIFNF@NPE
    bIFBEFS@UFYUDPMPS`
    
    
25. MJHIUFO
    \
    
    
    DPMPS
    MJHIUFO 
     
    ^
    EBSLFO
    \
    
    
    DPMPS
    EBSLFO 
     
    ^
    SHCB
    \
    
    
    DPMPS
    SHCB 
     
    ^
26. VTF
    *ODa81@$VTUPNJ[FS@'SBNFXPSLa4UZMF
    VTF
    *ODa81@$VTUPNJ[FS@'SBNFXPSLa$PMPS
    4UZMFSFHJTUFS
    
    bMJHIUFO`
    
    bDPMPS
    b
    
    $PMPSMJHIUFO
    b`
    
    
    
    4UZMFSFHJTUFS
    
    bEBSLFO`
    
    bDPMPS
    b
    
    $PMPSEBSLFO
    b`
    
    
    
    4UZMFSFHJTUFS
    
    bSHCB`
    
    bDPMPS
    b
    
    $PMPSSHCB
    b`
    
    
    
27. CUO
    \
    
    
    CPSEFSDPMPS
    
    ^
    QSJNBSZCUO
    \
    
    
    !FYUFOE
    CUO
    ^
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`
    >
    
29. ςʔϚΞοϓσʔτ
    "1*
30. 8PSE1SFTT
    ςʔϚ XPSEQSFTTPSH 
    ߋ৽͕͋Γ·͢Α 
    ߋ৽͠·͢ 
    Ͱ͸࠷৽൛ͷ
    [JQ
    ΛͲ͏ͧ 
    ࠷৽൛ͷ
    [JQ
    Λ
 Ξοϓϩʔυ
31. 8PSE1SFTT
    ςʔϚ 
    ߋ৽͕͋Γ·͢Α 
    ߋ৽͠·͢ 
    Ͱ͸࠷৽൛ͷ
    [JQ
    ΛͲ͏ͧ 
    λά෇ίϛοτ 
    ίϛοτ͕͔͋ͬͨΒ
 ςετϏϧυΛཔΉ 
    ໰୊ͳ͍͔Β
 [JQ
    ΛϦϦʔε (JU)VC 5SBWJT
    $*
34. 8PSE1SFTT
    ςʔϚ 
    ߋ৽͕͋Γ·͢Α 
    ߋ৽͠·͢ 
    Ͱ͸࠷৽൛ͷ
    [JQ
    ΛͲ͏ͧ 
    λά෇ίϛοτ 
    ίϛοτ͕͔͋ͬͨΒ
 ςετϏϧυΛཔΉ 
    ໰୊ͳ͍͔Β
 [JQ
    ΛϦϦʔε (JU)VC 5SBWJT
    $* ࣗαʔόʔ 
    "1*
    ͷϨεϙϯεͱ
 [JQ
    Λอଘ 
    (JU)VC
    ͷ
    [JQ
    ͸ফ͢
35. ͓·͚
36. MJOFIFJHIU
37. MJOFIFJHIU GPOUTJ[F IBMGMFBEJOH IBMGMFBEJOH
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; } }
40. /* จࣈαΠζͱͦΕʹԠͨ͡࠷దͳline-height */ @include _font-size-line-height(16px); /* margin */ @include _margin-bottom(1); /* padding */ @include _padding(.5);