プログラマが知っておくといいかもしれないCSSのハナシ

合同勉強会 in 大都会岡山 -2016 Winter-

Transcript

1. ϓϩάϥϚ͕஌͓ͬͯ͘ͱ
   ͍͍͔΋͠Εͳ͍
   $44ͷϋφγ 
   ߹ಉษڧձd8JOUFSd
   ٢ాوจʢ![FQIJSBOTBT
   
   Ԭࢁ+BWBϢʔβձ
2. 8IP
   BN
   * w ٢ాوจ ![FQIJSBOTBT
   w Ԭࢁ+BWBϢʔβձɹ୅ද
   w גࣜձࣾϦκʔϜॴଐ
   w 3VCZ 3VCZ
   PO
   3BJMT ͕ϝΠϯ
5. ࠓ೔͸+BWBͷ
   ࿩୊͡Όͳ͍
6. ࠓ೔࿩͢͜ͱ w #PPUTUSBQͬΆ͞ΛऔΖ͏
   w σβΠϯ͞ΕͨνΣοΫϘοΫεϥδΦϘλϯ
   w qFYCPY͸ศར
7. #PPUTUSBQͬΆ͞Λ
   औΖ͏
8. ΤϯδχΞେ޷͖
   #PPUTUSBQ w $44ৄ͘͠ͳͯ͘΋ɺΠϚυΩͬΆ͍ϖʔδ͕࡞Ε Δ
   w σβΠϯࡁͷίϯϙʔωϯτ͕͋ΔͷͰָ
   w ྲྀߦͬͨނʹɺͲ͔͜ͰΈͨΑ͏ͳαΠτʹ
   w ๞͖Δ
9. #PPUTUSBQΆ͞Λফ͢ w ࢖͏ͷ͸άϦουγεςϜ͚ͩ
   w ϑΥϯτʹ೔ຊޠ༻ϑΥϯτΛࢦఆ͢Δ
   w CPPUTUSBQͷίϯϙʔωϯτΛ΍ΊΔ
   w ͍ΖΜͳαΠτͷؾʹೖͬͨίϯϙʔωϯτΛࢀ ߟʹ͢Δ
10. σβΠϯ͞Εͨ
    νΣοΫϘοΫεͱ
    ϥδΦϘλϯ
11. σϑΥϧτͷ··ʂ
12. νΣοΫϘοΫε΍
    ϥδΦϘλϯ͸
    σβΠϯͰ͖ͳ͍
13. CFGPSF BGUFSٙࣅཁૉͰ
    ࣗલͰඳը͢Δ
14. <div class="form-checkbox"> <input type="checkbox" value="0" id="song1"> <label for="song1"> 君のこころは輝いてるかい？ </label> </div> 2.labelͷ֎ଆʹinputλάΛઃஔ͢Δ 3.forଐੑͰνΣοΫର৅ͷidΛࢦఆ 1.શମΛద੾ͳΫϥεΛ෇͚ͨdivͰғΉ
15. ී௨ͷνΣοΫϘοΫεΛফͯ͠ɺ৽ͨʹνΣο ΫϘοΫεͷʮΑ͏ͳ΋ͷʯΛඳը͢Δ
16. .form-checkbox { input[type="checkbox"] { display: none; } label { &:before { content: ''; width: 20px; height: 20px; border: 2px solid darken(#ddd, 15%); border-radius: 3px; background: #ddd; } } } 1.ී௨ͷνΣοΫϘοΫεΛফ͢ 2:labelͷbeforeཁૉͱͯ͠ϘοΫεΛඳը͢Δ
17. νΣοΫϚʔΫΛͲ͏͢Δʁ
18. BGUFSͱDIFDLFEٙࣅཁૉ
    Λ૊Έ߹Θͤͯඳը
19. .form-checkbox { input[type="checkbox"] { display: none; &:checked + label:after { font-family: FontAwesome; content: '\f00c'; color: #59b200; } } } 1.νΣοΫ͕ೖͬͯɺ͔ͭɺ௚ޙͷlabel༻ͷafterʹඳը 2.νΣοΫϚʔΫͱͯ͠FontAwesomeͷνΣοΫΛ࢖͏
20. Ϣχίʔυͷจࣈίʔυ͕͋Δ
22. w ಉ༷ͷखޱͰɺϥδΦϘλϯ΋Ͱ͖Δ
    w εϥΠυͷ$44͸ϨΠΞ΢τपΓΛলུͯ͠ΔͷͰɺ ࣮ࡍ͸(JU)VCͷαϯϓϧΛͲ͏ͧ
23. qFYCPY͸ศར
24. ΤϯδχΞ͕
    $44Ͱ೰Ήͷ͸ϨΠΞ΢τ w ಛʹԣฒͼͷϨΠΞ΢τ
    w EJTQMBZͷCMPDL JOMJOF JOMJOFCMPDLͷҧ͍
    w qPBUͰϨΠΞ΢τ่͕ΕΔ
    w UFYUBMJHOɺWFSUJDBMBMJHOޮ͔ͳ͍ɾɾɾFUD
25. qFYCPY͕ศར
26. ରԠঢ়گ
27. .flex-container { display: flex; justify-content: flex-start; align-items: stretch; } ਌ίϯςφʹʮdisplay:flexʯΛࢦఆ Ϥίํ޲ͷϨΠΞ΢τΛʮjustify-contentʯͰࢦఆ λςํ޲ͷϨΠΞ΢τΛʮalign-itemsʯͰࢦఆ
28. KVTUJGZDPOUFOU w ԣํ޲ͷϨΠΞ΢τΛࢦఆ
    w qFYTUBSU
    EFGBVMU
    w DFOUFS
    w qFYFOE
    w TQBDFCFUXFFO
    w TQBDFBSPVOE
29. qFYTUBSU
30. DFOUFS
31. qFYFOE
32. TQBDFCFUXFFO
33. TQBDFBSPVOE
34. BMJHOJUFNT w ॎํ޲ͷϨΠΞ΢τΛࢦఆ
    w TUSFUDI EFGBVMU
    w qFYTUBSU
    w DFOUFS
    w qFYFOE
35. TUSFUDI
36. qFYTUBSU
37. DFOUFS
38. qFYFOE
39. ·ͱΊ w #PPUTUSBQ͸άϦου͚ͩ࢖͏
    w ϑΥϯτΛͪΌΜͱࢦఆ͢Δ
    w #PPUTUSBQͷίϯϙʔωϯτΛ΍ΊͯΈΔ
    w BGUFS CFGPSFͰνΣοΫϘοΫεɾϥδΦϘλϯ΋ ͔ͬ͜Α͘
    w qFYCPYศར
40. αϯϓϧ w σβΠϯ͞ΕͨνΣοΫϘοΫεͱϥδΦϘλϯͷ αϯϓϧ
    w IUUQTHJUIVCDPN[FQIJSBOTBT HCEBJUPLBJ
41. ͓ΘΓ