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デザインを学びながらビジネス力も身につける体験型スクール&オンラインサロン】を運営する50代のWebデザイナー。 元スタイリスト→パソコン初心者→子育てしながらWebでお小遣い稼ぎ考える→ネットショップ運営→アフィリエイター→Webデザイナー→未経験でいきなりフリーランス。 こんな経歴を辿り2013年からWebデザインのオンラインスクールをプラットフォームに頼らず、ほぼ自力で運営しています。 「仕事は自分で創りだすもの」がモットー☆