お客さまがご利用のブラウザはサポートされていないため、正常に利用できない可能性があります。 お手数ですが、こちらをご確認いただき推奨環境のブラウザをインストールしてご利用ください。

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

対面 オンライン

ベテランウェブクリエイター生明義秀登壇、利用が常識となったCSSレイアウトモジュールFlexboxを、さらに理解し使いこなすための実践講座。

こんなことを学びます

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

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

--

フレキシブルという名の通り、柔軟なウェブデザインのレイアウトやマルチデバイス対応を可能にする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
続きを読む

開催日程がありません

開催予定エリア

六本木・赤坂

価格(税込)

¥3,800

現在は開催リクエストを受け付けていません
受けたい
18人が受けたい登録しています

対面受講日程

開催日程はありません。

オンライン受講日程

開催日程はありません。

この講座の先生

生明 義秀のプロフィール写真
アートディレクター,ウェブクリエイター,講師

生明 義秀

アートディレクター,グラフィックデザイナー,ウェブクリエイター,クリエイティブコンサルタント,講師。
 
ブランディングやSP広告などのグラフィックデザイン、ウェブサイト制作、UI/UXデザイン、動画編集、eラーニングのオーサリングなど多数のクリエイションに従事。
 
広告戦略や制作システムに関するコンサルテーションも行い、さまざまな企業の研修にプランナー・アドバイザーとして招請されている。
 
最新技術の啓蒙や後進の育成に尽力し専門学校などの教育機関で講師を務めるほか、Adobe MAXなどの大規模イベントをはじめ、宣伝会議やデジタルハリウッドなどの専門講座にも多数登壇。
 
SBテクノロジー株式会社と共同で、定期開催のデザインに関するトークイベント『FONTPLUS DAYセミナー』を企画運営している。
 
AZM Design 代表 
Bau-ya プロデューサー 
学校法人専門学校 東洋美術学校 講師 
公益社団法人 日本グラフィックデザイナー協会(JAGDA) 正会員
 
Twitter
https://twitter.com/g_azami
 
Facebook
https://www.facebook.com/gishuazami

この講座の主催団体

クリエイターの学び舎、Bau-ya。

プロとプロを目指すクリエイターの学び舎、Bau-ya(バウヤ)。
アートやデザイン、ITやウェブなどの、トップクリエイターや著名講師による『いま、伝えたいこと』を、そのまま講座にして催します。


■ Bau-yaが招聘する実力派講師陣

業界の最前線で活躍している、実績や経験が豊富な著名クリエイターを招聘。
人気書籍の執筆者や、有名スクールの講師としてお馴染みの面々も登壇します。
現場主義やベテランだからこそ聴ける情報が満載です。


■ Bau-yaにある『知識講座』『技術講座』『ワークショップ講座』の3つのスタイル

『知識講座』は、ふんだんな資料や図解で解説する座学形式。
業界人として必須の教養や情報を学べます。
スライドや資料などを見ながら、じっくり学ぶスタイル。
提示されるスライドや資料はダウンロードして、何度でも復習いただけます。

『技術講座』は、ふんだんに実演デモを駆使するハイブリッド・ハンズオン形式。
制作の現場で必須のテクニックを学べます。
一緒に実習しながらでも、または聴講のみでも、どちらでも参加できるスタイル。
使... もっと見る >>

主催団体に質問する 教室ページをみる
  • 当日の流れとタイムスケジュール

    ■ 開場時間
    開演15分前から

    ■ 所要時間
    約1.5–2時間程度(途中参加、途中退出も可能です)

    ■ 講座の流れ(予定)
    1. オープニング(BAU-YAおよび講座について説明,登壇者紹介など 約5分)
    2. 講義(約35–50分)
    3. 休憩(約5分)
    4. 講義(約35–50分)
    5. 質疑応答(約5分)
    6. エンディング(約5分)
    ※ 講義時間や時間割は、変更する可能性があります。
    ※ 予定よりも早く終了、または長引く可能性があります。
    • こんな方を対象としています

      □ ウェブ制作関連職の方
      □ 現代のCSSレイアウトの方法を学びたい方
      □ floatを使うレイアウトにうんざりしている方
      □ Flexboxの可能性をもっと知りたい方
      □ 現代的なウェブデザインを行いたい方
    • 受講する際は以下をお読み下さい

      ■ ご用意いただくもの
      □ オンラインで受講いただく場合は、インターネット環境とコンピュータなどのデバイスおよびウェブブラウザ。
      □ ハンズオンスタイルで受講の方は、以下のアプリケーションがインストールされたコンピュータ。
      ・Visual Studio Code®やAdobe Dreamweaver®など、使い慣れたソースコードエディタやウェブオーサリングツール。
      ※ OSやウェブブラウザー、各種アプリケーションなどは、最新のバージョンのものをご使用ください。
      ※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。
      □ 来場での受講で電源を使われる方は、電源タップをご持参ください。
      □ 来場での受講の場合、メモを取るための筆記用具やデバイスはご持参ください。

      ■ その他
      □ 講義中の録画や録音などの一切の収録行為を禁じます。
      □ 講座内で配布する資料やファイルなどの一切の二次利用や再配布、無断転載を禁じます。
      □ 来場での受講の際、お名刺をお持ちでしたら講座終了後に登壇者や主宰者とご交換ください。
    ※ストアカでは講座に適用される保険を用意しています。詳しくはストアカ補償制度をご覧ください。

    レビュー10

    • 楽しかった!( 6 )
    • 勉強になった!( 10 )
    • 行く価値あり!( 7 )
  • M3

    男性 60代

    この講座は「再認識させられた内容」でした

    改めて、Webサイトをデザインするための基本的な考え方を再認識させられました。
    まだまだ勉強を続けなければと再認識させられました。
    ありがとうございます。

  • W2

    女性 40代

    この講座は「Flexboxの活用法が理解できる講座」でした

    Flexbox、活用してみたいと思います。
    ソースが綺麗って説得力あるなって思いました。
    配布された資料を参考に作ってみます。
    ありがとうございました。

  • W3

    女性 40代

    この講座は「最新のモダンWebマークアップのしくみが確認できる」でした

    非デザイナー、非エンジニアのクライアントがRWDをデフォルト条件として発注してくる。デザインする自分もアップデート情報や工数までは追っていないことが多い(説明できない、見積もりできない)。定期的にこういった講座を受けてリアルタイムに刷新していきたいと思いました。復習用に録画やdemoソースがもらえるので自分の理解スピードに合わせて触ることができて助かります。

  • M1

    男性 40代

    この講座は「Flexbox便利〜」でした

    Flexboxの理解がなんとなく曖昧だったので、
    理解して実制作で使えると変わってくるな〜。
    丁寧な授業でわかりやすかったです。

  • W2

    女性 40代

    この講座は「実践で役に立つFlexboxの知識が身につく講座」でした

    実例を用いながら、とても分かりやすくご説明いただき、
    実際の制作にすぐに役に立てることができました。

    理論的と実演を適度に交えての図説で、
    しっかりと理解することができました。

    講座で得られた知識は自分にとって大切な財産になりました。

    惜しげもなく、いろいろと教えてくださることに
    感謝でいっぱいです。ありがとうございました!

  • この主催団体の他の講座

    10

    開催リクエスト受付中

    六本木・赤坂 / オンライン
    11

    開催リクエスト受付中

    六本木・赤坂 / オンライン
    10

    開催リクエスト受付中

    六本木・赤坂 / オンライン
    47

    開催リクエスト受付中

    六本木・赤坂 / オンライン
    26

    開催リクエスト受付中

    六本木・赤坂 / オンライン
    11

    開催リクエスト受付中

    六本木・赤坂 / オンライン

    関連講座

    この講座を見た人は、こんな講座も見ています

    お探しの講座が見つかりませんでしたか?