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

極めて使いこなす 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
続きを読む

7月14日(火)

19:30 - 21:30

オンライン

予約締切日時

7月13日(月) 19:30

参加人数

7/20人

開催場所

オンライン

価格(税込)

¥3,800

こちらのお申し込みは、『Zoom』によるオンライン参加となります。 Zoom オフィシャルサイト https://zoom.us
  • 7月14日(火)

    19:30 - 21:30

    オンライン

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

対面受講日程

開催日程はありません。

オンライン受講日程

7月14日(火) 19:30 - 21:30

¥3,800
参加人数 7/20人

オンライン受講料に含まれるもの

参加費に教材費などはすべて含まれています。
参加費の他に一切費用はかかりません。
※ オンラインで講座に参加いただく場合の通信費などは、参加者さまのご負担になります。
※ 参加費の領収書は、ストリートアカデミーから発行・印刷することができます。
  https://support.street-academy.com/hc/ja/articles/201345225

この講座の先生

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

生明 義秀

アートディレクター,グラフィックデザイナー,ウェブクリエイター,クリエイティブコンサルタント,講師。
 
ブランディングや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にある『技術系講座』と『知識系講座』の2つのスタイル

『技術系講座』は、ふんだんに実演デモを駆使するハイブリッド・ハンズオン講座。

制作の現場で必須のテクニックを学べます。

一緒に実習しながらでも、または聴講のみでも、どちらでも参加できるスタイル。
使用する学習サンプルは、受講後でもダウンロードして何度でも練習いただけます。

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


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

クリエイティブ業界の最前線で活躍している、経験豊富なクリエイターを招聘。
人気書籍の執筆者や、有名スクールの講師としてお馴染みの... もっと見る >>

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

    ■ 開場時間
    開演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やウェブブラウザー、各種アプリケーションなどは、最新のバージョンのものをご使用ください。
      ※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。
      □ 来場での受講で電源を使われる方は、電源タップをご持参ください。
      □ 来場での受講の場合、メモを取るための筆記用具やデバイスはご持参ください。

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

    レビュー

    • 2
    • 楽しかった!( 1 )
    • 勉強になった!( 2 )
    • 行く価値あり!( 1 )
  • W2

    女性 40代

    この講座は「しっかりと理解できる講座」でした

    体系的に分かりやすくご説明くださり、
    とてもとても勉強になりました。
    今まで自分でネットで調べても、
    良く分からず苦労してきたのが嘘みたいに、
    いろいろなことがクリアになりました。

    本当に良い講座を開いていただいて
    感謝でいっぱいです。
    すぐに実践に活かしたいです。

    ありがとうございました。

  • M3

    男性 50代

    この講座は「Flexbox 現代必須CSSレイアウトを学べる講座」でした

    Flexboxを使うための事例紹介を豊富にしてもらい勉強になりました。昔からのレイアウトで悩む問題がすっきりとできるのでお勧めの講座だと思います。
    なかなかネットの記事や書籍だけ読んでも理解できないflexboxの使い方がわかります。合わせてBootstrap4も合わせて勉強すると効率的かもしれません。時間内で解説いただける部分には限りもあるので、概念的な説明を理解したら自習することで理解が深まると思います。

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

    33

    開催リクエスト受付中

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

    開催リクエスト受付中

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

    開催リクエスト受付中

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

    開催リクエスト受付中

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

    開催リクエスト受付中

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

    関連講座

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

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