極めて使いこなす Flexbox CSS現代標準レイアウト

全国の方がご参加可能な、「オンライン受講」に対応している講座です。

ご参加のすべての方が、講座開催後でもお好きなときに収録動画をご視聴可能な「見逃し配信」も用意しています。

--

フレキシブルという名の通り、柔軟なウェブデザインのレイアウトやマルチデバイス対応を可能にするCSSの機能、Flexible Box Layout Module、通称『Flexbox』。
主要ウェブブラウザの現行バージョンではすでに十分サポートされ、現代のウェブデザインにおいて欠かすことのできない、レイアウトを制御する重要なモジュールとなっています。
http://caniuse.com/#search=Flexible%20Box

しかし、Flexboxの高度な機能や関連するプロパティの多機能さゆえに、その基本仕様や適切な使用方法を学習しきれず、Flexbox本来の利便性やスマートさを活かしきれていないウェブクリエイターの方が少なくありません。
例えば、display: flexの宣言のみを利用し、あとは旧来同様にwidthやmargin、paddingを使ってレイアウトするなどは、とても残念な事例と言えます。

ブロックボックス本来の仕様概念やあり方をしっかり認識し、Flexbox化することの変貌、そして、『flex』に代表する関連プロパティのバリエーションを知ることで、まったく違うCSSレイアウトの構成をすることが可能になります。

この講座では、2017年に開催された『Adobe MAX Japan』にて、いち早くFlexboxを紹介するセッションで大きな注目を集めた、ベテランウェブクリエイターの生明義秀が登壇。
ブロックボックスの基本からFlexboxの基礎、各種関連プロパティの機能、そして、実際のウェブデザインでの設定や、レスポンシブウェブデザインでの利用方法を解説します。

あらかじめ配布します『実際にFlexboxをコーディングしたサンプル』のソースと、それをブラウジングで確認しながら学習を進めます。
Flexboxをちゃんと学習する機会がなかった方、これから学習する方、Bootstrap 4以降を使う方などにおすすめの講座です。

Flexboxの本来のポテンシャルと利便性、潔い記述、そして、その可能性を掴み取ってください。

ところで、floatでレイアウトなんて、もうやっていませんよね？


※ この講座は、以前に催しました「徹底的に使いこなす Flexbox 現代必須CSSレイアウト」を改訂・ブラッシュアップした内容となっています。

Keywords: ウェブ, ウェブデザイン, CSS, レイアウト, Flexbox, Flexible Box Layout Module


● この講座で学べること
○ ブロックボックスの基本概念・仕様
○ Flexible Box Layout Module（Flexbox）化することで変貌する状態の分析
○ flexプロパティの機能詳細と使用方法
○ その他さまざまなFlexbox関連プロパティの機能
○ Flexboxの実践的なレイアウト例
○ Flexboxのレスポンシブウェブデザインへの応用例

● この講座で得られること
○ 旧来のfloatやClearfixなどによるCSSレイアウトの方法に代わる、現代的レイアウト技法
○ ウェブの要素の基本概念
○ ウェブの要素の並び順やその方向、伸縮などのサイジングをフレキシブルに実現する方法
○ さまざまリキッドレイアウトを可能にする方法
○ 少なくシンプルな記述で、レスポシブウェブデザインに対応する方法
※ 学習教材や資料がある場合は、お持ち帰りいただけます。
※ 講座内で利用するデモなどのサンプルファイルがある場合は、ダウンロード可能です。
※ 各種受講証明書への署名・発行に対応します。

● この講座の特徴
○ ハンズオンでも、聴講でも、お好きなスタイルで受講可能な『技術講座』です。
○ 実践的な技術や方法を、要点をまとめて具体的にわかりやすくお伝えします。
○ 操作の解説は、デモンストレーションを実演して解説します。
○ 講座開催の後でも1週間、講義の様子をすべて収録した動画の視聴ができ、グループメッセージで登壇者宛に質問が可能です。

● 協賛企業・ブランド
AZM Design

#bauya110