新・HTML/CSS入門編16:縦/横方向のグリッドアイテムの位置ぞろえ(align-items/justify-items)

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 100px);
    grid-template-columns: repeat(3, 100px);
    width: 300px;
    height: 200px;
    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);
    width: 300px;
    height: 200px;
    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);
    width: 300px;
    height: 200px;
    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);
    width: 300px;
    height: 200px;
    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

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

演習課題「グリッドアイテムの位置を変更しよう-その1」

現在、ブラウザでは、2行3列のグリッドアイテムが各グリッドトラックのサイズに合わせて表示されています。
ここで、コンテンツ幅のグリッドアイテムが各グリッドトラックの右上に表示されるようにしてください。

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

※justify-itemsプロパティを記述すると警告が表示されることがありますが、実行上は問題ありません。
※align-itemsプロパティにキーワードstartやendを指定すると警告が表示されることがありますが、実行上は問題ありません。
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。

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

演習課題「グリッドアイテムの位置を変更しよう-その2」

現在、ブラウザでは、2行3列のグリッドアイテムが各グリッドトラックのサイズに合わせて表示されています。
ここで、グリッドコンテナの横方向において、グリッドアイテムをグリッドトラックのサイズに合わせて表示してください。また、グリッドコンテナの縦方向において、コンテンツ幅のグリッドアイテムを各グリッドトラックの中央に表示されるようにしてください。

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

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

Tips

動画へ戻る

前のチャプターへ

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

詳しい説明を読む

＃10:縦/横方向のグリッドアイテムの位置ぞろえ(align-items/justify-items)

このチャプターでは、縦/横方向のグリッドアイテムの位置ぞろえについて学習します。

align-itemsプロパティとjustify-itemsプロパティ

justify-itemsプロパティとalign-itemsプロパティは、グリッドアイテムとグリッドトラックのサイズ差で生まれる余白を活用し、アイテムの位置を細かく調整するために使われます。
justify-itemsプロパティはグリッドアイテムを横方向に沿って位置を揃える際に使います。
一方で、align-itemsプロパティはグリッドアイテムを縦方向に沿って位置を揃える際に使います。

これらのプロパティには共通の値があり、アイテムの配置方法を柔軟に指定できます。
・start: グリッドアイテムを先頭に寄せて表示します。
・end: グリッドアイテムを末尾に寄せて表示します。
・center: グリッドアイテムを中央に寄せて表示します。
・stretch: グリッドトラックのサイズに合わせて、グリッドアイテムを引き伸ばして表示します。

グリッドアイテムが各グリッドトラックの左下に配置されるコード

justify-itemsプロパティを記述すると警告が表示されることがありますが、実行上は問題ありません。
また、align-itemsプロパティにキーワードstartやendを指定すると警告が表示されることがありますが、実行上は問題ありません。

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(3, 150px);
    justify-items: start;
    align-items: end;
    width: 450px;
    height: 300px;
    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;}

グリッドアイテムが各グリッドトラックの中央に配置されるコード

justify-itemsプロパティを記述すると警告が表示されることがありますが、実行上は問題ありません。

@charset "UTF-8";
.grid_container{
    display: grid;
    grid-template-rows: repeat(2, 150px);
    grid-template-columns: repeat(3, 150px);
    justify-items: center;
    align-items: stretch;
    width: 450px;
    height: 300px;
    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 - justify-items
https://developer.mozilla.org/ja/docs/Web/CSS/justify-items

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

プログラミング学習 > 新・HTML/CSS入門編 > 新・HTML/CSS入門編16: グリッドレイアウトを理解しよう > 縦/横方向のグリッドアイテムの位置ぞろえ(align-items/justify-items)