CSS Grid(グリッド)徹底解説!の動画リスト
この再生リストでは、CSS Grid(グリッド)の徹底解説を通して、モダンなレイアウトデザインを習得する方法を学びます。CSS Gridは、ウェブページのレイアウトを簡単にかつ柔軟に制御できる強力なCSSモジュールです。
まずは、CSS Gridの基本概念と使い方を学びます。グリッドコンテナとグリッドアイテムの概念、行と列の作成、各要素の配置方法など、グリッドレイアウトの基本を把握することができます。
次に、再生リストでは、CSS Gridの各プロパティを詳しく解説します。grid-template、grid-column、grid-row、grid-area、justify-items、align-itemsなど、レイアウトを細かく調整するためのプロパティを習得します。
再生リストを活用して、CSS Gridを習得し、モダンなレイアウトデザインを実現できるスキルを身につけましょう。
-
06:02
CSS Grid(グリッド)解説!CSS Gridとはなんなのか?どういう場面で使われるのか?などを紹介します! #1
今回からいくつかの動画でCSS Gridのシリーズを配信していきます。第1回目のこちらの動画では、CSS Grid(グリッド)とはなんなのか?どういった部分で使われるのか?を紹介していきます。要素を…
-
08:52
CSS Grid(グリッド)の各用語と考え方の解説!グリッドコンテナー・グリッドアイテムとは? #2
今回の動画では、CSS Gridを検証しやすいFirefoxを使って、各用語の解説をおこなっています。・コンテナー・アイテム・ライン・セルについて解説しています。CSS Gridの記事などを調べる時…
-
23:39
CSS Gridで横幅や縦幅を指定できる、grid-template-columnsとgrid-template-rows について紹介!その他特殊な単位や関数も! #3
この動画では、CSS gridで列と行の数やサイズを定義できる以下プロパティを紹介しています。・grid-template-columns・grid-template-rows・grid-templ…
-
07:02
CSS Gridで要素(アイテム)の間に余白をgapで設定する! #4
これまで格子状に並べてある要素と要素の間に余白を設定する場合はmarginなどが主流でしたが、gapという簡単に余白を指定できるものを使って、簡単に設定できるようになりました。この動画では使い方と、…
-
18:31
CSS Gridでライン番号を指定して、要素を自由に配置する方法と様々な指定方法を紹介! #5
CSS Gridには、順番に要素を配置する以外に、自由に配置する方法があります。今回は番号を指定して、要素を配置する方法を紹介していきます。プロパティは以下について紹介しています。- grid-ro…
-
12:11
CSS Gridでエリア名を指定して、要素を自由に配置する方法! #6
この動画では、CSS Gridのエリア名を指定することができるプロパティを使って、自由に要素を配置することについて紹介しています。様々な指定の1つですが、覚えておくと便利な機能です!
-
11:34
CSS Gridで範囲外(コンテナーの外)の幅を指定する、grid-auto-rowsとgrid-auto-columnsについて解説! #7
grid-template-rowsやgrid-template-columnsで指定した外側に要素が配置されることがあります。もしくは、表示される要素の数が決まっていなくて、何列になるのか分からな…
-
07:45
CSS Gridで配置した要素の順番を任意の順にする、order(オーダー)について解説! #8
Flexboxでも使うことができますが、CSS Gridでも要素の順番を任意に変更することができる、orderを指定することができます。この動画では、設定の方法と実際の動きについて見ていきます。
-
08:15
CSS Gridのgrid-auto-flowで配置方向を変える方法と、空いたセルを埋める方法 について #9
CSS Gridで要素を配置した場合、基本的には横方向に並びますが、grdi-auto-flowのcolumnを使うことで縦方向に並べることができます。この動画では、使い方と実際の動きを見ていきます…
-
27:31
CSS Gridでalign-contentやplace-itemsなど、要素の配置を指定する様々なプロパティを紹介! #10
この動画では、CSS Gridによって並べたアイテムのレイアウトを変更できる以下のプロパティについて説明しています。・justify-content・align-content・justify-it…
-
15:31
CSS Gridで折り返しの処理を自動でする、auto-fitとauto-fillについて #11
Flexboxでアイテムを折り返す際は、flex-wrap: wrapという処理をしていましたが、Gridでも似たような処理をおこなうことができます。今回はそのような処理ができるauto-fitとa…
-
15:20
CSS Grid 実践!メディアサイトのようなレイアウトを組んでみましょう!レスポンシブにも対応! 全2回(第1回目)
この動画では、CSS Gridを活用した実践的な内容を紹介しています。いくつかの記事が並ぶようなサイトを想定したコーディングをしながら、レスポンシブ対応を考慮した上で2回に分けて解説していきます。動…
-
04:44
CSS Grid 実践!メディアサイトのようなレイアウトを組んでみましょう!レスポンシブにも対応! 全2回(第2回目)
この動画では、CSS Gridを活用した実践的な内容を紹介しています。いくつかの記事が並ぶようなサイトを想定したコーディングをしながら、レスポンシブ対応を考慮した上で2回に分けて解説していきます。1…
-
20:22
入れ子のレイアウトがもっと楽に!subgrid(サブグリッド)解説。CSS Gridの新機能を使いましょう。前編
動画内で説明していたaspect-ratioの動画はこちらhttps://factory-programming-mv.com/video/jeaRVM9_HS4/動画内で説明していたobject-…
-
12:48
入れ子のレイアウトがもっと楽に!subgrid(サブグリッド)解説。CSS Gridの新機能を使いましょう。後編
動画内で説明していた、CSSのカウンター(counter)の動画はこちらhttps://factory-programming-mv.com/video/G3kvmKeJsl8/前編の動画はこちらh…