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

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

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

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

Takafumi Yoshida

December 17, 2016
Tweet

More Decks by Takafumi Yoshida

Other Decks in Technology

Transcript

  1. <div class="form-checkbox"> <input type="checkbox" value="0" id="song1"> <label for="song1"> 君のこころは輝いてるかい? </label>

    </div> 2.labelͷ֎ଆʹinputλάΛઃஔ͢Δ 3.forଐੑͰνΣοΫର৅ͷidΛࢦఆ 1.શମΛద੾ͳΫϥεΛ෇͚ͨdivͰғΉ
  2. .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ཁૉͱͯ͠ϘοΫεΛඳը͢Δ
  3. .form-checkbox { input[type="checkbox"] { display: none; &:checked + label:after {

    font-family: FontAwesome; content: '\f00c'; color: #59b200; } } } 1.νΣοΫ͕ೖͬͯɺ͔ͭɺ௚ޙͷlabel༻ͷafterʹඳը 2.νΣοΫϚʔΫͱͯ͠FontAwesomeͷνΣοΫΛ࢖͏
  4. .flex-container { display: flex; justify-content: flex-start; align-items: stretch; } ਌ίϯςφʹʮdisplay:flexʯΛࢦఆ

    Ϥίํ޲ͷϨΠΞ΢τΛʮjustify-contentʯͰࢦఆ λςํ޲ͷϨΠΞ΢τΛʮalign-itemsʯͰࢦఆ