Webデザインとビジネス力を磨く!体験型Webデザインスクール・オンラインサロン

Flexboxを使った実用レイアウト5選!(2019.09.18)

今回の勉強会テーマはFlexboxを使った実用レイアウト5選!

Flexboxは子要素の並べ方を柔軟に指定でき、今後のCSSレイアウトの主流となっていきますが、できることが豊富過ぎて混乱しがち。

でも、実際には使うパターンは限られているので、この辺りの実用的なコーディングのコツなども一緒に学習しつつ、同時にレスポンシブ対応も確認しました。

勉強会動画 一部紹介

スクール会員になると、この収録動画をいつでも閲覧でき、質問・添削・サポートできます。

勉強会内容紹介

  • 実用レイアウトパターン01(ボックスを並べる)
  • 実用レイアウトパターン02 (ボックスを並べる・複数行の場合)
  • 実用レイアウトパターン03 (「詳細はこちら」ボタンの位置を合わせる方法。 Flexboxの入れ子テクニックを覚えよう!)
  • 実用レイアウトパターン04(内容の表示順を変更する)
  • 実用レイアウトパターン05 (ヘッダー・グローバルナビゲーションを整える。 Flexboxの主軸と交差軸が理解できるよ!)
  • 質問・感想(widthとflexbasisの使い分けはどうしてる?)

・・などなど。
今回の勉強会の内容を踏まえて課題やFlexboxチートシートも配布しています。

受講者の感想

Flexboxを使ったナビゲーションの事例はとても実践的ですぐにでも使えそうです。
細かいところですが、縦に入れ子にした時に、スペースが均一すぎて気持ちが悪い時の対処法は目から鱗でした!
こうやって工夫していくんだなぁととても勉強になりました。

関連記事

受講者の声

「動き出せない
あなたの背中を押します!」

組織に依存しない自由な働き方を
手に入れるためのオンラインスクール・オンラインサロンです。

スクール最新情報、フクモト学長の活動はメルマガで配信中~。