独学・フリーランス・在宅・SNS疲れのWebデザイナーに
ビジネスの知識が加われば最強。自分の力で生きていけます。

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

CSS Flexbox

こんにちは。フクモト学長(@WebcreatorsTips)です。未経験からフリーランス歴15年のWebデザイナーです。スクール運営 8年目になります。
詳しいプロフィールはこちら

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

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

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

勉強会動画 一部紹介

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

勉強会内容紹介

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

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

受講者の感想

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

Webクリエイターズスクール 学長 フクモトトモコ

【Webクリエイターズスクール】
学長 福本 智子

Webもデザインも未経験からいきなりフリーランス歴15年。
『仕事は自分で創りだす』をモットーに生きてきた50代。
Photoshop・WordPress・Webマーケティングが得意。

独学・Webスクールを卒業したのに仕事に繋げられない学習迷子さん、在宅・フリーランス希望の人を対象に「学んだ事を安定的な収入にする方法」をお伝えしてサポートしています。

関連記事

受講者の声

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

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

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