CSS最新レイアウト Flexbox 徹底解説|生明塾

もはや常識となった便利なレイアウトモジュール Flexbox を、プロの現役クリエーター兼講師が解説する平日夜のセミ・ハンズオン講座。

learn

こんなことを学びます

その名の通り、フレキシブルなwebデザインのレイアウトを可能にするFlexible Box Layout Module(Flexbox)。
幾多の仕様変更を遂げてきたCSSのモジュールですが、現在ではほとんどのwebブラウザーからサポートされています。
floatに代わるレイアウトの方法として、その実用性と利便性、パフォーマンスの良さなどが注目を集め、もはやFlexboxの採用は常識となりつつあります。
http://caniuse.com/#search=Flexible%20Box

この講座では、実際にソースやwebブラウザーの表示を見ながら、Flexboxの機能と使い方を徹底解説します。

■ 当講座で学べること
○ Flexible Box Layout Module(Flexbox)の概要と基本
○ Flexboxの記述方法とベンタープリフィックス
○ さまざまなFlexboxコンテナ・アイテムの種類と機能
○ Flexboxの便利な使い方

■ 当講座で得られること
○ 旧来のfloatやClearfixなどを駆使するCSSレイアウトの方法に代わる、新しく便利な技法
○ webの要素の並び順やその方向、伸縮などのサイジングを、フレキシブルに実現
○ 少なくシンプルな記述でレスポシブwebデザインに対応するレイアウト設定
○ これからのCSSデザインのレイアウト方法
※ 各種受講証明書への署名・発行に対応します。

■ 当講座の特徴
○ 手ぶらの座学受講も可能な、セミ・ハンズオン形式です。
○ 実践的な知識や方法を、要点をまとめて、わかりやすく解説します。
○ 講義後に、質疑応答の時間を設けます。

■ 会場へのアクセス
[デジタルハリウッド 東京本校]
○ JR「御茶ノ水駅」聖橋口より徒歩1分
○ 東京メトロ千代田線「新御茶ノ水駅」B2出口直結
○ 丸ノ内線「御茶ノ水駅」より徒歩4分
所在地:〒101-0062 東京都千代田区神田駿河台4-6 御茶ノ水ソラシティ アカデミア 4F
会場:デジタルハリウッド 東京本校 W15教室
   ※ 御茶ノ水ソラシティ アカデミア用のエレベーターをご利用ください。
デジタルハリウッド 東京本校 Webサイト:http://school.dhw.co.jp/school/tokyo/index.html
デジタルハリウッド 東京本校の校舎内(一部)を体験:https://goo.gl/maps/MPs3tdNStG82

■ ご持参いただくもの
○ ハンズオン受講の方は、コンピューター(任意)
  ※ セミ・ハンズオン講座なので、座学受講での参加も可能です。
○ メモを取るための筆記用具やデバイスなど
○ お名刺があれば、ぜひ、交換をさせてください。
※ 会場の電源をご利用いただけます。
※ ご利用いただく椅子に、幅30cmほどのテーブルが設置されています。
※ 講義中の録音などは、ご遠慮ください。

■ 主催者
生明塾 by AZM Design
128人が受けたい追加しています

開催予定の日程一覧

過去に開催した日程一覧

生明 義秀 さんの他の講座

teacher

この講座の先生

生明 義秀

グラフィックデザインとwebデザインの現役プロ講師

東京で活動するアートディレクター,グラフィックデザイナー,webクリエーター,クリエイティブコンサルタント,講師。

ブランディングやSP広告などのグラフィックデザイン、webサイト、UI/UX、動画、eラーニングなど多数のクリエーションを手掛ける。

広告戦略や制作シ... もっと見る >>

detail

講座詳細

  • 当日の流れとタイムスケジュール

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

    ■ 講座の流れ(予定)
    1. 講座概要説明(約5分)
    2. 解説(約35〜50分)
    3. 休憩(約5分)
    4. 解説(約35〜50分)
    5. 質疑応答(約10分)
    ※ 講義時間や時間割は、変更する可能性があります。
    ※ 予定よりも早く終了、または長引く可能性があります。
  • こんな方を対象としています

    □ web制作関連職の方
    □ webデザイン学習者の方
    □ 新しいCSSの機能を学びたい方
    □ floatを使うレイアウトにうんざりしている方
    □ 現代的なwebデザインを行いたい方
  • 受講料の説明

    参加費に、場所代は含まれています。
    参加費の他に、一切費用はかかりません。
  • 受講する際は以下をお読み下さい

    □ お名刺があれば、ぜひ、交換をさせてください。
    □ 筆記用具などは、ご持参ください。
    □ 筆記用具だけで受講は可能ですが、コンピュータのご持参・使用も自由です。
    □ 会場内の電源をご利用いただけます。
    □ 講義中の録音などは、ご遠慮ください。

review

レビュー

  • 男性

    この講座は「分かりやすくて楽しい講座!」でした

    事前に用意してくださっていたサンプルデータがとても分かりやすく、復讐の際にもとても役立っています!解説も非常に分かりやすくて楽しかったです!わからない部分については後日グループメッセージで質問してくれれば答えるとおっしゃっていただけたのでとても安心感があります。受講させていただいてとても良かったと思います。ありがとうございました!また新しい講座を開かれる際はぜひ教えていただきたいです!

  • 男性 50代

    この講座は「CSS最新レイアウト Flexbox 徹底解説|生明塾」でした

    非常に分かりやすく丁寧な教え方で非常に勉強になりました。
    機会があれば先生の他の講座も受講できればと思います。
    ありがとうございました。

  • 女性 30代

    この講座は「明日からさっそく使ってみたくなる講座」でした

    すごくわかりやすかったです。
    ところどころ笑いもあり、楽しい雰囲気で親しみやすさを感じる講座でした。

  • 女性

    この講座は「Flexboxの最新記述およびFloatの概念が腹落ちする講座」でした

    グラフィックデザイナーの友達を誘って、久々にあざみ先生の講座に参加いたしました。
    参加者のスキルレベルに応じた講義内容を展開していただけるので、助かります。
    ありがとうございました。

  • 男性

    この講座は「初学者にも分かる最新CSS事情」でした

    分かりやすい詳細なドキュメントが出回っていないFlexboxの仕様や取り扱いについて、実際のコードと動きを見ながら理解するように促してくれます。

    また、合間に説明してくれる基礎的な知識も私のように学校や職場などで体系的に学ぶ経験がなかった人間にとっては恥ずかしながら初耳なものも多く勉強になりました。実際に人に教える仕事に積極的に携わられていることもあり、つまずくポイントや勘違いしやすいポイントを熟知して説明してくれますので何度も授業を受けてみたいと思う先生です。

    今回の授業は実際にコードを見ることもあるので、少し勉強して簡単なページを自分で一度は作ったことがある人以上のレベルを対象にされていたように感じました。初学者の壁をよく理解されている授業だと思います。

  • 女性 40代

    この講座は「初心者でも理解できる、内容ぎっしりの講座」でした

    Flexboxの代表的なパターンを一気に見比べることができたので、それぞれの特徴を理解することができました。先生が明るく、笑いを交えながらのあっという間の講義でした。また受講したく思います。Xd興味あります。

  • 男性 40代

    この講座は「Flexboxの導入に不安のあるwebデザイナー、コーダーは受けるべき講座」でした

    Flexboxは独学で使い始めていましたが、
    具体的なレイアウトのパターンをサンプルファイルを見ながら学べて、
    Flexboxの使い方を整理して理解することが出来ました。

    また、floatの本来の使い方や、marginに関するハマりどころも学べるので、
    コーダーの方はもちろん、デザイナーの方も受けるべき講座だと思います。

    実務的な活用法に近い知識が学べるので、また、他の講座も受講させていただきます。

  • 女性 30代

    この講座は「Flexboxが気になっている人に最適な内容」でした

    具体的なコードと、実際のブラウザ上の動きを見比べながら進んでいく授業でした。

    ベースとしてある程度HTML、CSSの知識がある方向けだと思います。

    実際の使い方をあれこれ想像しながら聞く事ができ、
    新たなデザインやアイディアを実践するモチベーションが上がりました。

    Flexboxを導入する事で実現するデザイン例を、もっとたくさん見てみたかったです。

  • 女性 20代

    この講座は「気軽に受けられるのに充実した講座」でした

    この度はありがとうございました!
    flexboxは検索しても新旧ともに情報量が多く、あやふやにしてしまっていました。今回のセミナーを受けて改めて、"基礎"と"現在の技術"を正しく学べたと感じています。
    float、positionに関しましてもflexboxと合わせて聴くことで各メリット・デメリット(使いどころ)がわかりました。
    大変楽しいセミナーでした。ぜひおっしゃっていたXDのお話、またコーディングを考えた上でのデザイン設計のことなど聴きたく存じます。
    また機会がありましたら、よろしくお願いします。

  • 男性 30代

    この講座は「概要を掴むのに最適」でした

    コードと実際のブラウザ上の画面を比較しながら教えて頂けたので、何を変えるとどうなるということが理解しやすかったです。
    また実務をやっておられる先生の使い方の分類も教えて頂け実践的でした。