次によく再生されている動画

入れ子のレイアウトがもっと楽に！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部構成の前半であり、後半では横方向のサブグリッドの活用方法に焦点を当てています。

関連する動画リスト

もっとみる