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

Transcript

1. ϓϩάϥϚ͕஌͓ͬͯ͘ͱ
   ͍͍͔΋͠Εͳ͍
   $44ͷϋφγ 
   ߹ಉษڧձd8JOUFSd
   ٢ాوจʢ![FQIJSBOTBT
   
   Ԭࢁ+BWBϢʔβձ

2. 8IP
   BN
   * w ٢ాوจ ![FQIJSBOTBT
   w Ԭࢁ+BWBϢʔβձɹ୅ද
   w גࣜձࣾϦκʔϜॴଐ
   w

   3VCZ 3VCZ
   PO
   3BJMT ͕ϝΠϯ
3. None
4. None

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. Ϣχίʔυͷจࣈίʔυ͕͋Δ

21. None

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. ͓ΘΓ