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

グリッドレイアウト これまでとこれから

グリッドレイアウト これまでとこれから

2017年4月22日「CSS Talk vol.3」でのセッション「グリッドレイアウト これまでとこれから」のスライドです。

もりてつ

April 22, 2017
Tweet

More Decks by もりてつ

Other Decks in Technology

Transcript

  1. $44(SJE-BZPVUσϞ 
 αϯϓϧɾඞཁͳ)5.-ͷهࡌ <div class="main"> <p class="area1"><span>Area 1</span></p> <p class="area2"><span>Area

    2</span></p> <p class="area3"><span>Area 3</span></p> <p class="area4"><span>Area 4</span></p> </div>
  2. $44(SJE-BZPVUσϞ 
 αϯϓϧɾ$44Ͱ਌ཁૉ΁ͷࢦఆ .main{ display: grid; grid-template-columns: 100px 100px 100px;

    grid-template-rows: 100px 100px; grid-gap: 6px; } $44(SJE-BZPVUΛ࢖͍·͢Αͱએݴ ྻͷ෯ɻࠨ͔Βॱʹࢦఆ ߦͷߴ͞ɻ্͔Βॱʹࢦఆ ֤ྻɺ֤ߦͷִؒ
  3. $44(SJE-BZPVUσϞ 
 αϯϓϧɾ$44Ͱࢠཁૉ΁ͷࢦఆ .area3{ background-color: #c4ff91; grid-column: 1/3; grid-row: 2;

    } ྻͷ։࢝ҐஔɺऴྃҐஔͷࢦఆ ʢ෼ͷͰ͸ͳ͍ʣ ߦͷ։࢝Ґஔͷࢦఆ
  4. ͜Ε͔ΒͷάϦουϨΠΞ΢τ 
 $44(SJE-BZPVUWT'MFYCPY 'MFYCPY ˠॎ·ͨ͸ԣͷํ޲     

    ʜʜ $44(SJE-BZPVU ˠॎԣ྆ํ޲     ͏·͘࢖͍෼͚͍ͯ͘͜ͱ͕ॏཁ
  5. άϦουϨΠΞ΢τ࢖༻࣌ͷ৺͕͚ 
 σβΠφʔɺσΟϨΫλʔͷํ΁     ྻͷ෯ ߦͷߴ͞ ྻɺߦͷִؒ

    QY QY QY QY QY QY QY QY QY ۩ମతͳࢦࣔΛԼ͍͞ ແ͍ͱΤϯδχΞ͕ࠔΓ·͢