『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

【Webデザイン勉強会の一部公開】CSSのFlexboxを使った実用レイアウト5選!(動画13分)

【Webデザイン勉強会の一部公開】Flexboxを使った実用レイアウト5選!

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デザインとビジネス力を身につける体験型スクール&コミュニティ

この記事が気に入ったら
いいね ! しよう

Pocket
LINEで送る

関連記事

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!