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

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ