CSSのFlexboxの使い方勉強会

CSSのFlexboxの使い方勉強会

Flexboxとは、複雑なレイアウトをシンプルなコードで実装することができるレイアウト方法の一つです。

Flexboxを使えばより少ないコードで配置や表示順序を変えることができ、高さや幅の指定はもちろん、余白設定も簡単なので、より少ない時間で柔軟なレイアウトを組むことができます。

この動画では、CSS勉強会の第二弾としてレイアウトの基本となるFlexboxの基礎知識はもちろん、便利なプロパティの使い方などを初心者の方でもわかりやすいように図を用いて解説しています。

この動画を見れば、Flexboxを使ったレイアウトの実装方法を視覚的に理解ができ、さらにFlexboxの活用法も学べるので是非ご覧ください。

目次

  • 00:00:00 CSS勉強会第1回の復習
  • 00:05:35 displayの使い方
  • 00:08:30 flex-directionの使い方
  • 00:13:54 orderの使い方
  • 00:20:30 flex-wrapの使い方
  • 00:22:40 justify-contentの使い方
  • 00:27:13 align-itemsの使い方
  • 00:35:50 DiviにカスタムCSSを追加
  • 00:37:54 displayとflex-directionでできること
  • 00:40:20 gapでできること
  • 00:44:07 Flexboxでさまざまなレイアウトを実演
  • 00:58:52 質疑応答(Flexboxの概念を理解するメリット etc…)
  • 01:09:45 質疑応答(Elementorの内部セクションを縦並びにする方法 etc…)
  • 01:26:00 宿題の説明