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

  • マンツーマン
    個別講義開催中!

    エラーの解消から、
    実装方法まで丁寧に教えます!
    講師が答えられるなら、
    基本的にどんな内容でも
    OK!

    詳細はこちら!
  • 質問し放題プラン!
  • スクール形式講義も

    プロを目指したい方
    講義を何回も受けたい方はこちら!
    個別のカリキュラムを作成し、
    長期的にサポート!

    詳細はこちら!
動画内で説明していたaspect-ratioの動画はこちら
https://factory-programming-mv.com/video/jeaRVM9_HS4/

動画内で説明していたobject-fitの動画はこちら
https://factory-programming-mv.com/video/XnnDcr7iYIg/

動画内で説明していたCSS Gridの動画リストはこちら
https://factory-programming-mv.com/playlistDetails/PLv7E5OqNAIPxTDBvGfJ_46aoZ7PLV3m5n/

後編の動画はこちら
https://factory-programming-mv.com/video/2FQAfMhC4vY/


この動画では、Subgridについて説明しています。CSSグリッド(CSS Grid)は、Webページのレイアウトを柔軟に制御するための強力なツールですが、サブグリッドはその応用として、グリッド内のグリッドをさらに細かく制御することが可能です。

サブグリッドを使用しない場合、例えば複数行にわたる記事タイトルが1行のものと高さが揃わないため、レイアウトが不揃いになります。これを解決するためにサブグリッドを活用することで、高さを揃えて美しいレイアウトを実現できます。サブグリッドは、縦方向だけでなく横方向にも効果的に利用でき、動画ではこれを適用する例が示されています。

最後に、サブグリッドの利用により、記事のタイトル、画像、内容、ボタンが縦方向に揃えられることで、一貫性と整頓された外観が実現されています。

この動画は2部構成の前半であり、後半では横方向のサブグリッドの活用方法に焦点を当てています。

関連する動画リスト

もっとみる