CSSのFlexboxでどんなレイアウトができるの？
これからFlexboxをマスターしたいという方へ。
先月（2019.9月）のスクール恒例の勉強会は「Flexboxを使った実用レイアウト5選！」というテーマで行いました。
その一部を動画でアップしましたので、ぜひ、ご覧下さい。
全体が60分の勉強会から10分ちょっとの内容を抜き出していますが、このチラ見せ動画でも以下のことが得られます。
- Flexboxの基本
- Flexboxで実現できるレイアウト例
- Web制作の現場でよくあるレイアウト例
- 配布しているFlexboxチートシートの内容
- レスポンシブWebデザインの基本タグ
Flexboxは子要素の並べ方を柔軟に指定でき、今後のCSSレイアウトの主流となっていきますが、できることが豊富過ぎて混乱しがち。
でも、実際には使うパターンは限られているので、基本を整理しながら、実用的なレイアウトに絞って覚えていくと習得が早いですよ。
動画13分
スクール恒例のWebデザインZOOMグループ勉強会はこんな感じでやっています！
勉強会 本編内容紹介
- Flexbox実用レイアウトパターン01
（ボックスを並べる）- Flexbox実用レイアウトパターン02
（ボックスを並べる・複数行の場合）- Flexbox実用レイアウトパターン03
（「詳細はこちら」ボタンの位置を合わせる方法。Flexboxの入れ子テクニックを覚えよう！）- Flexbox実用レイアウトパターン04
（内容の表示順を変更する）- Flexbox実用レイアウトパターン05
（ヘッダー・グローバルナビゲーションを整える。Flexboxの主軸と交差軸が理解できるよ！）- 質問・感想
（widthとflexbasisの使い分けはどうしてる？他）
・・などなど。
今回の勉強会の内容を踏まえて、課題やFlexboxチートシートも配布しています。
過去の勉強会動画も全て閲覧できます。
気になる方は、こちらでご案内しています。
⇒ Webデザインとビジネス力を身につける体験型スクール＆コミュニティ
フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール＆コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。
