新・HTML/CSS入門編16:グリッドアイテムの間隔(gap)

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 100px);
    grid-template-columns: repeat(3, 100px);
    outline: dashed 5px #006400
}
.grid_A{background-color:#ffa500;}
.grid_B{background-color:#87ceeb;}
.grid_C{background-color:#f0e68c;}
.grid_D{background-color:#ee82ee;}
.grid_E{background-color:#9acd32;}
.grid_F{background-color:#ffc0cb;}

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 100px);
    grid-template-columns: repeat(3, 100px);
    outline: dashed 5px #006400
}
.grid_A{background-color:#ffa500;}
.grid_B{background-color:#87ceeb;}
.grid_C{background-color:#f0e68c;}
.grid_D{background-color:#ee82ee;}
.grid_E{background-color:#9acd32;}
.grid_F{background-color:#ffc0cb;}

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 100px);
    grid-template-columns: repeat(3, 100px);
    outline: dashed 5px #006400
}
.grid_A{background-color:#ffa500;}
.grid_B{background-color:#87ceeb;}
.grid_C{background-color:#f0e68c;}
.grid_D{background-color:#ee82ee;}
.grid_E{background-color:#9acd32;}
.grid_F{background-color:#ffc0cb;}

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 100px);
    grid-template-columns: repeat(3, 100px);
    outline: dashed 5px #006400
}
.grid_A{background-color:#ffa500;}
.grid_B{background-color:#87ceeb;}
.grid_C{background-color:#f0e68c;}
.grid_D{background-color:#ee82ee;}
.grid_E{background-color:#9acd32;}
.grid_F{background-color:#ffc0cb;}

この動画を見るには

paiza会員登録のうえ

有料会員登録が必要です

演習1
演習2

問題ログインすると模範解答や入力を見ることができます

演習課題「グリッドアイテムの間に余白を挿入しよう」

現在、ブラウザでは、2行3列のグリッドアイテムが隙間なく並んでいます。
ここで、gapプロパティに1つの値を指定することで、グリッドアイテムの間に15pxの余白を挿入してください。

採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！

※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。

問題ログインすると模範解答や入力を見ることができます

演習課題「グリッドアイテムの行と列の余白の幅を個別に指定しよう」

現在、ブラウザでは、2行3列のグリッドアイテムが隙間なく並んでいます。
ここで、gapプロパティを用いて、上下のグリッドアイテム間の余白を15pxに、左右のグリッドアイテム間の余白を30pxに指定してください。

採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！

※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

※有料会員になるとこの動画をご利用いただけます

詳しい説明を読む

＃08:グリッドアイテムの間隔(gap)

このチャプターでは、グリッドアイテムの間隔について学習します。

グリッドアイテムの間隔を調整するプロパティ

gapプロパティをグリッドコンテナに使うと、グリッドアイテム間の間隔を簡単に設定できます。このプロパティは、グリッドレイアウトの見た目を整える上で非常に便利です。

gapプロパティは、以下の2通りの方法で値を指定できます。
・1つの値を指定する: 行と列の両方に同じ大きさの余白が適用されます。
・半角スペースで区切って2つの値を指定する: 1つ目の値が行の間隔、2つ目の値が列の間隔になります。

gapプロパティの他にも、行と列のそれぞれの間隔を個別に指定するプロパティがあります。
・row-gapプロパティ: 行間の余白の幅を指定します。
・column-gapプロパティ: 列間の余白の幅を指定します。

ただし、これらのプロパティで指定する余白のサイズは、グリッドトラックのサイズには含まれません。これにより、グリッドアイテムのサイズ計算がしやすくなります。

gapプロパティに値を1つ指定するコード

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(3, 150px);
    gap: 10px;
    outline: dashed 5px greenyellow;
}
.grid_A{background-color:lime;}
.grid_B{background-color:aqua;}
.grid_C{background-color:yellow;}
.grid_D{background-color:fuchsia;}
.grid_E{background-color:blue;}
.grid_F{background-color:red;}

gapプロパティに値を2つ指定するコード

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(3, 150px);
    gap: 40px 10px;
    outline: dashed 5px greenyellow;
}
.grid_A{background-color:lime;}
.grid_B{background-color:aqua;}
.grid_C{background-color:yellow;}
.grid_D{background-color:fuchsia;}
.grid_E{background-color:blue;}
.grid_F{background-color:red;}

参考サイト

MDN web docs - gap
https://developer.mozilla.org/ja/docs/Web/CSS/gap

MDN web docs - row-gap
https://developer.mozilla.org/ja/docs/Web/CSS/row-gap

MDN web docs - column-gap
https://developer.mozilla.org/ja/docs/Web/CSS/column-gap

プログラミング学習 > 新・HTML/CSS入門編 > 新・HTML/CSS入門編16: グリッドレイアウトを理解しよう > グリッドアイテムの間隔(gap)