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デザイナー→未経験でいきなりフリーランス。 こんな経歴を辿り2013年からWebデザインのオンラインスクールをプラットフォームに頼らず、ほぼ自力で運営しています。 「仕事は自分で創りだすもの」がモットー☆
