エンジニアも知れば幸せなCSS基礎

TOWN BASH 2017/11 公開
https://town.connpass.com/event/71098/

Transcript

1. ΤϯδχΞ΋஌Ε͹޾ͤͳ
 $44جૅ ޙ౻
   ࿨ྑ
2. ࣗݾ঺հ ޙ౻
   ࿨ྑ
   $*ࣄۀ෦
   
   
   
   
   
   
   
   
   
   ,B[VZPTIJ(PUP
3. ࠓճͷର৅ 8FCσβΠϯɾϑϩϯτʹ΋ڵຯͷ͋Δਓ
   ϑϩϯτ෼͔ΒΜ͚Ͳ৮ΔՄೳੑͷ͋Δਓ
   ࣮͸$44ΛงғؾͰίϐϖͯ͠Δਓ
4. $44ͱ͸
5. $BTDBEJOH
   4UZMF
   4IFFUT
 ΧεέʔςΟϯάελΠϧγʔτ
   ΢Σϒϖʔδͷݟӫ͑Λ੍ޚ͢Δݴޠɻ
 )5.-ͱซͤͯ࢖ΘΕΔɻ
6. ͳͥ$44Λ࢖͏ͷ͔ )5.-ͷΈͰ΋ଟগݟӫ͑Λ੍ޚͰ͖Δ͕ɺ ϝϯςφϯεੑ͕௿͘࢖͍ճ͠΋ޮ͔ͳ͍ɻ
   ·ͨ)5.-ຊདྷͷจॻߏ଄Λଛͳ͏ͨΊɺ $44Λ࢖͏ɻ
7. $44ͷه๏
8. Q
   \
   GPOUTJ[F
   QY
   ^ ʲηϨΫλʔʳ
   
   ελΠϧΛద༻ͤ͞Δର৅ɻ
   
   ྫ͸Qλά͢΂ͯΛର৅ʹ͢Δɻ ʲϓϩύςΟʳ
   
   ద༻͢ΔελΠϧͷ಺༰ɻ
   
   ྫ͸ϑΥϯταΠζΛQYʹ͢Δɻ
9. Q
   \
   
   
   
   
   GPOUTJ[F
   QY
   
   
   
   
   NBSHJO
   QY
   
   
   
   
   
   DPMPS
   
   ^ ϓϩύςΟ͸ෳ਺ॻ͚Δɻ
   ϓϩύςΟؒ͸ηϛίϩϯ  Ͱ۠੾Δɻ
10. ηϨΫλʔͷछྨ
11. 
    )5.- Q
    \
    DPMPS
    G
    ^
    EJW
    \
    DPMPS
    G
    ^
    Q
    EJW
    \
    GPOUXFJHIU
    CPME
    ^ Q੺͍ଠࣈQ
    EJW੨͍ଠࣈEJW ηϨΫλʔΛΧϯϚ Ͱ۠੾Δͱ
    ෳ਺ͷର৅ʹಉ͡ελΠϧΛద༻Ͱ͖Δɻ
12. ֊૚Խ
    ΧεέʔσΟϯά VM
    MJ
    \
    DPMPS
    G
    ^
    PM
    MJ
    \
    DPMPS
    G
    ^ VM
    
    
    MJVMҎԼͷMJ಺͸੺͍ࣈMJ
    VM
    PM
    
    
    MJPMҎԼͷMJ಺͸੨͍ࣈMJ
    PM ηϨΫλʔΛεϖʔεͰ۠੾Γ࿈ͶΔͱ
 ର৅ΛߜΕΔɻʢΧεέʔσΟϯάʣ
13. DMBTT SFE
    \
    DPMPS
    G
    ^
    EJWCMVF
    \
    DPMPS
    G
    ^ Q
    DMBTTSFE
    ΫϥεSFEͰ੺ࣈ
    Q
    EJW
    DMBTTCMVF
    EJWʹΫϥεCMVFͰ੨ࣈ
    Q
    Q
    DMBTTCMVF
    Կ΋มΘΒͳ͍Αɻ
    TQBO EJWλάʹΫϥεCMVFΛ෇༩ͨ࣌͠ʹ
    ελΠϧΛద༻͢Δɻ υοτ  ͱ޷͖ͳ໊લͰ
    ελΠϧΛఆٛͰ͖Δɻ
14. *%
    ʢඇਪ঑ʣ JEOBNF
    \
    DPMPS
    
    ^ Q
    JEJEOBNF
    άϨʔͷࣈʹͳΔΑɻ
    Q )5.-ͷ࢓্༷ɺ*%͸ϖʔδʹ͔ͭ͠࢖͑ͳ͍ɻ
    Ϋϥεͱར༻ײ͸มΘΒͳ͍͕൚༻ੑ͕௿͘ɺ*%͸+BWB4DSJQUͰѻ͏͜ͱ΋ ଟ͍ͨΊɺׯবΛආ͚ΔҙຯͰ΋$44͸ΫϥεͷΈ࢖͏͜ͱ͕޷·͍͠ɻ γϟʔϓ  ͱ޷͖ͳ໊લͰ
    ελΠϧΛఆٛͰ͖Δɻ
15. ಛघͳηϨΫλʔ
16. YIPWFSʢϚ΢εΦϯʣ BIPWFS
    \
    DPMPS
    G
    ^ B
    ISFG 
    Χʔιϧ৐ͤΔͱ੺͘ͳΔΑ
    B
17. Y
    
    ZʢYͱྡ઀͢ΔZʣ I
    
    Q
    \
    DPMPS
    G
    ^ IλΠτϧI
    Q੺͍จࣈQ
    Qී௨ͷจࣈQ
    
18. Y
    
    ZʢY௚ԼͷZʣ EJW
    
    Q
    \
    DPMPS
    G
    ^ Qී௨ͷจࣈQ
    EJW
    
    
    Q੺͍จࣈQ
    
    
    Q੺͍จࣈQ
    
    
    TFDUJPO
    
    
    
    
    Qී௨ͷจࣈQ
    
    
    TFDUJPO
    EJW
19. Y
    d
    ZʢYͷޙͷZʣ I
    d
    Q
    \
    DPMPS
    G
    ^ IλΠτϧI
    Qී௨ͷจࣈQ
    Qී௨ͷจࣈQ
    Iݟग़͠I
    Q੺͍จࣈQ
    Q੺͍จࣈQ
20. YpSTUDIJMEʢ࠷ॳͷཁૉʣ QpSTUDIJME
    \
    DPMPS
    G
    ^ Q੺͍จࣈQ
    Qී௨ͷจࣈQ
    EJW
    
    
    Q੺͍จࣈQ
    
    
    Qී௨ͷจࣈQ
    EJW
21. YMBTUDIJMEʢ࠷ޙͷཁૉʣ MJMTUDIJME
    \
    DPMPS
    G
    ^ VM
    
    
    MJී௨ͷจࣈMJ
    
    
    MJී௨ͷจࣈMJ
    
    
    MJ੺͍จࣈMJ
    VM
    PM
    
    
    MJී௨ͷจࣈMJ
    
    
    MJී௨ͷจࣈMJ
    
    
    MJ੺͍จࣈMJ
    PM
22. YpSTUMFUUFSʢ࠷ॳͷҰจࣈʣ QpSTUMFUUFS
    \
    DPMPS
    G
    ^ Q੺͍จࣈQ
    Q੺͍จࣈQ
23. ·ͩෳࡶͳ΋ͷ΋͋Γɺ
 ηϨΫλʔ͸Ԟ͕ਂ͍ɻ
24. $44ͷద༻ํ๏͸
 छྨ
25. 
    )5.-λάʹ௚઀ॻ͘ ϋʔυίʔσΟϯά/(
    Ұ࣌తʹදࣔΛ੍ޚ͢Δ৔߹ʹ
 +BWB4DSJQUͰ%0.Λૢ࡞ͯ͠ ࢖͏͜ͱ͕ଟ͍ɻ Q
    TUZMFDPMPS
    G
    ੺͍ࣈʹͳΔΑɻ
    Q
26. 
    TUZMFλάʹॻ͘ ϋʔυίʔσΟϯάඇਪ঑ɻ
    ͦͷϖʔδ͚ͩͰద༻͍ͤͨ͞ ελΠϧ͕͋Δ࣌ʹ࢖͏ɻ TUZMF
    SFE
    \DPMPS
    G^
    CMVF
    \DPMPS
    G^
    TUZMF
    Q
    DMBTTSFE੺ࣈQ
    Q
    DMBTTCMVF੨ࣈQ ˞ಛఆ৚݅Ͱڀۃతʹ͸͜Ε͕ϕετͳ৔߹΋
27. 
    DTTϑΝΠϧΛಡΈࠐΉ جຊͷద༻ํ๏ɻ
    )5.-ͱ$44ͷ؅ཧΛ෼཭͠ɺ αΠτશମͷελΠϧΛҰݩ؅ ཧͰ͖ΔͨΊɻ MJOL
    SFMTUZMFTIFFU
    ISFGTUZMFDTT
28. $44ͷཧղࠩͰΑ͋͘Δ൵ܶ )5.-ʹ௚઀΍Λ΍ͬͯ͠·͏ मਖ਼͞Εͨ$44ͷ৔ॴ͕෼͔Β ͣमਖ਼͕େมˍෛ࠴Խ ΤϯδχΞ͕௚઀)5.-͞ΘΕΔঢ়گ͕ओͳݪҼɻ Engineer Designer
29. $44͸ϒϥ΢β͝ͱʹ
 ղऍ͕ҧ͏
30. ԕ͍ੲɺང͔൴ํͷۜՏܥͰʜ
    ۜՏதͷδΣμΠ σβΠφʔ ͕
 ఇࠃ܉ .JDSPTPGU ͷ։ൃͨ͠
 σεɾελʔ *& ͱಆ͍ͬͯͨɻ
    *&ͷѱຐͷΑ͏ͳ$44όά͸
 σβΠφʔୡΛ௕͍ۤ೉ͷఈʹ
 ୟ͖མͱͨ͠ͷͩͬͨʜ
31. σΟεϓϨΠղऍͷࠩ ༨നͷղऍͷࠩ จࣈͷॲཧͷࠩ ࢖͑ΔηϨΫλͷࠩ ࢖͑ΔϓϩύςΟͷࠩ ϑΥʔϜύʔπͷ
    σβΠϯͷࠩ ͦ΋ͦ΋ະରԠ όά FUD
32. ͜Μͳ࣌୅΋͚͋ͬͨͲɺ
 ݱ୅͸͍ͩͿվળ͞Εͨɻ
33. ༏౳ੜ ਖ਼͘͠ݴ͏͜ͱΛฉ͍ͯ͘ΕΔɻ
    ໰୊ࣇ ੲΑΓϚγ͚ͩͲϠϯνϟͳ఺΋ɻ
    
34. Ϋϩεϒϥ΢βνΣοΫ͕ඞཁ
35. ݱ୅ͷ$44Ͱ
 ٻΊΒΕΔ͜ͱ
36. ʲ࠷ॏཁʳϨεϙϯγϒରԠ ಉҰ)5.-ͷ΢ΣϒϖʔδΛɺσΟεϓϨΠαΠζʹ ΑͬͯϨΠΞ΢τΛ࠷దԽͤ͞Δٕज़ɻ
37. !NFEJB
    TDSFFO
    BOE
    NBYXJEUI
    QY
    \
    
    
    
    
    QYҎԼͷ࣌ʹద༻͞ΕΔελΠϧ
    
    
    
    
    CPEZ
    \
    
    
    
    
    
    
    
    
    GPOUTJ[F
    QY
    
    
    
    
    ^
    
    
    
    
    DMBTTOBNF
    \
    
    
    
    
    
    
    
    
    NBSHJO
    QY
    
    
    
    
    ^
    ^
38. $44Ξχϝʔγϣϯ ૷০ͷΈͳΒͣɺ6*ͷΠϯλϥΫγϣϯ ൓Ԡ ʹར༻ ͢Δ͜ͱͰརศੑΛߴΊΔɻ
39. DMBTTOBNF
    \
    
    
    
    
    BOJNBUJPO
    CMJOL
    T
    JOpOJUF
    ^
    !LFZGSBNFT
    CMJOL
    \
    
    
    
    
    
    \
    PQBDJUZ
    
    ^
    
    
    
    
    
    \
    PQBDJUZ
    
    ^
    
    
    
    
    
    \
    PQBDJUZ
    
    ^
    ^
40. ͜͏ͨ͠දࣔͷ੍ޚ͸
 +BWB4DSJQUΛ࢖͏ΑΓૣ͍ͯܰ͘ɻ
41. ͞Βʹ
42. $44
    % Ґஔ੍ޚͱΞχϝʔγϣϯΛۦ࢖͠$44Ͱ%ۭؒΛ࡞Δٕ๏ɻ
 ࣮༻ੑ͸ʜ·͋ඍົͱ͍͏͔ʜ
43. $44͚ͩͰग़དྷΔ͜ͱ͸ଟ͍ɻ
    +BWB4DSJQU࢖͏લʹࢼͯ͠ΈΑ͏ɻ
44. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ