grid

grid-area

grid-template

<div class="parent">
  <div class="child1">ヘッダー</div>
  <div class="child2">左サイドバー</div>
  <div class="child3">メイン</div>
  <div class="child4">右サイドバー</div>
  <div class="child5">フッター</div>
</div>


.parent div {
  display: inline-block;
  padding: 10px;
}

.child1 {
  background-color: red;
  /* 問題1. 各々の子要素に名前を指定してください */
  grid-area: header;
}

.child2 {
  background-color: blue;
  /* 問題1. 各々の子要素に名前を指定してください */
  grid-area: left;
}

.child3 {
  background-color: yellow;
  /* 問題1. 各々の子要素に名前を指定してください */
  grid-area: main;
}

.child4 {
  background-color: green;
  /* 問題1. 各々の子要素に名前を指定してください */
  grid-area: right;
}

.child5 {
  background-color: pink;
  /* 問題1. 各々の子要素に名前を指定してください */
  grid-area: footer;
}

.parent {
  width: 500px;
  /* 問題2. 一括で配置を指定して、3行3列の聖杯レイアウトを実装してください */
  display: grid;
  grid-template:
    'header header header' 50px
    'left main right' auto
    'footer footer footer' 100px /
    100px 1fr 10%;
}


.parent div {
  display: inline-block;
  padding: 10px;
}

.child1 {
  background-color: red;
  /* 問題1. 各々の子要素に名前を指定してください */
}

.child2 {
  background-color: blue;
  /* 問題1. 各々の子要素に名前を指定してください */
}

.child3 {
  background-color: yellow;
  /* 問題1. 各々の子要素に名前を指定してください */
}

.child4 {
  background-color: green;
  /* 問題1. 各々の子要素に名前を指定してください */
}

.child5 {
  background-color: pink;
  /* 問題1. 各々の子要素に名前を指定してください */
}

.parent {
  width: 500px;
  /* 問題2. 一括で配置を指定して、3行3列の聖杯レイアウトを実装してください */
}


グリッドの一括指定

grid-row,grid-column

子要素の開始位置と終了位置の指定

grid-auto-rows,-columns

grid-template-rows

grid-template-columns

暗黙的グリッドによる子要素の高さの指定

grid-auto-flow

子要素の配置方法の指定

スペースを埋めるように配置

演習問題

grid-template-areas

子要素のエリアの指定

CSS Gridレイアウトによるウェブページの設計方法を学びます。
グリッドシステムを用いてさまざまな要素の配置を学習し、現代のWebデザイン技術を習得します。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【応用編📚】高度なCSSテクニックを習得しよう

「Gridを使って、要素を自由自在に配置しよう」レッスンの総復習クイズです。