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

広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』

井上拓
September 27, 2017

広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』

広島フロントエンド勉強会 Vol.12のスライド

井上拓

September 27, 2017
Tweet

More Decks by 井上拓

Other Decks in Technology

Transcript

  1. • 2016/09/09 Vol.1ʰFlexboxΛ࢖͍͜ͳ͢ʱ • 2016/10/07 Vol.2ʰ։ൃΛศརʹ͢Δπʔϧͨͪʱ • 2016/11/04 Vol.3ʰθϩ͔Β࢝ΊΔReact.jsʱ •

    2016/12/17 Vol.4ʰࠓ೔͔Β࢖͑Δgulp.js ϋϯζΦϯʱ • 2017/01/13 Vol.5ʰώϩϑϩ͓೰Έ૬ஊձ ~ίʔσΟϯάฤ~ʱ • 2017/02/03 Vol.6ʰώϩϑϩ͓೰Έ૬ஊձ ~CSSฤ~ʱ
  2. • 2017/03/03 Vol.7ʰϑϩϯτΤϯυLT with LTۦಈ։ൃ&IoTLT޿ౡʱ • 2016/04/01 Vol.8ʰ࣍ੈ୅CSSΛઌऔΔʮPostCSSʯϋϯζΦϯʱ • 2016/05/13

    Vol.9ʰJavaScriptͷجૅͷ͖ʱ • 2016/06/09 Vol.10ʰPugΛ࢖ͬͨޮ཰తͳίʔσΟϯάʱ • 2016/08/05 ಛผ൛ʰ͜Ε͔Β࢝ΊΔWebVRʱ • 2016/09/08 Vol.12ʰCSS Grid Layout Moduleʱ
  3. άϦουΞΠςϜ 1 2 3 4 1 2 3 4 5

    ίϯςφ τϥοΫ Ϊϟοϓ άϦου
  4. <div class="container"> <div class="item item_header">header</div> <div class="item item_nav">nav</div> <div class="item

    item_main">main</div> <div class="item item_sidebar">sidebar</div> <div class="item item_footer">footer</div> </div> HTML
  5. IFBEFS OBW NBJO TJEFCBS GPPUFS 100px 100px 100px 30px 30px

    30px grid-template-columns grid-template-rows
  6. <div class="container"> <div class="item item_header">header</div> <div class="item item_nav">nav</div> <div class="item

    item_main">main</div> <div class="item item_sidebar">sidebar</div> <div class="item item_footer">footer</div> </div> HTML
  7. fr • ૬ର୯Ґ • 1fr͸ར༻Մೳͳۭؒͷׂ߹ • grid-template-columns: 1fr 2fr 1fr;


    
 ͜ͷྫͩͱ1ྻ໨͕1/4ɺ2ྻ໨͕1/2ɺ3ྻ໨ ͕1/4ʹͳΔ