プレミアム会員限定動画

入れ子のレイアウトがもっと楽に！subgrid（サブグリッド）解説。CSS Gridの新機能を使いましょう。後編

動画内で説明していた、CSSのカウンター（counter）の動画はこちら
https://factory-programming-mv.com/video/G3kvmKeJsl8/

前編の動画はこちら
https://factory-programming-mv.com/video/r7jUvsb7h0k/


動画では、CSSの「サブグリッド（subgrid）」の使い方を解説しています。サブグリッドは、グリッドレイアウトの機能をさらに細かく制御するための機能で、特に複雑なレイアウトを作成する際に便利です。

まず、HTML要素を整理し、UL要素に複数のリストアイテム（LI要素）を配置します。それぞれのリストアイテムには、画像（IMGタグ）と見出し（H2タグ）が含まれています。ここで、CSSのカウンター機能を利用して、リストアイテムに連番を自動で振り分ける方法を説明しています。この連番は、CSSの「カウンター（counter）」というプロパティを使用して実現されています。カウンターは、指定された要素ごとに数値を増やしていく機能で、リストの各アイテムにユニークな番号を割り当てるのに役立ちます。

画像に関しては、固定のピクセル幅（例えば50ピクセル）を設定し、アスペクト比（aspect ratio）を1:1に保つことで正方形の画像を作成しています。また、object-fit: coverを使用して画像が要素のサイズに合わせて適切に表示されるようにしています。

CSSでグリッドレイアウトを設定する部分では、ディスプレイプロパティ（display property）に「グリッド（grid）」を指定し、各アイテムを網目状に配置しています。サブグリッドを使うことで、親要素のグリッド設定を引き継ぎつつ、さらに細かいレイアウト調整を子要素で行うことが可能です。

この動画では、特にグリッドの「列（column）」と「行（row）」の設定に焦点を当てており、横方向全体にわたる設定や、特定の範囲だけを指定する方法などが紹介されています。例えば、grid-template-columnsを使用して、自動的に幅を調整するように設定することができます。