Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Ab963de01b53e635d6e699d6d7d162b1?s=128

Takafumi Yoshida

December 17, 2016
Tweet

Transcript

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

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

    3VCZ 3VCZPO3BJMT ͕ϝΠϯ
  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. ͓ΘΓ