CSS Nite LP47「Coder's High 2016」フォローアップ(5)阿部 正幸さん(KDDIウェブコミュニケーションズ)

2016年9月24日(土)TKPガーデンシティPREMIUM神保町で開催したCSS Nite LP47「Coder's High 2016」のフォローアップとして、阿部 正幸さん(KDDIウェブコミュニケーションズ) の『「Good bye~~ floats and “clearfix” hacks」これからはFlexboxの時代』セッションのスライドなどを公開します。

CSS Nite LP47に参加いただきました皆様ありがとうございました。
「Good bye~~ floats and “clearfix” hacks」これからはFlexboxの時代に登壇したKDDIウェブコミュニケーションズの阿部です。

セミナー当日のアンケートでFlexboxを使ったことがある方が8割を超えていて、Flexboxが普及していることを実感したのと共に、本当にセッションを止めて帰ろうかと悩んだ次第です^^;

------Flexboxを学習するために-------

さて、Flexboxを触ったことが無い方もおりましたので、これから学ぶという方は以下を参考にしていただければと思います。

Flexboxのプロパティは12種類あります。今回配布するスライドに全てのプロパティとデモコードを添付していますので、どのような動作をするか試してみてください。

全てのプロパティがどのような動作をするか理解した上で、サンプルプログラムや、下記であげます、Flexboxのサンプルサイトを見てどのようなことに活用ができるか確認をしてください。12種類のプロパティがどうのような動作をするか、Flexboxの活用例を知ることで、格段にレベルがあがるかと思います。

------デモ中のCMSの環境について-------

デモの途中でFlexboxのコードをCMSのWYSIWYGに反映をしました。その環境は以下で構築をしております、興味のある方は参照してみてください。

CMS Core:
 Drupal7

Drupal Module:
CKEditor - WYSIWYG HTML editor
 https://www.drupal.org/project/ckeditor

 Wysiwyg API template plugin
 https://www.drupal.org/project/wysiwyg_template

 Ckeditorの設定変更(エディターの設定を一部変更する必要があります)
 http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.removeDialogTabs
 (例)
 // リプレイスのデフォルト上書きOFF
 config.templates_replaceContent = false;
 // class、IDなどのAttributesを全て許可
 config.allowedContent = true;

------Flexbox参考サイト-------

○ 当日使用したスライド
  http://shared-blog.kddi-web.com/sandbox/lp47

○ Flexboxサンプルサイト

 Flexbox Patterns
 http://www.flexboxpatterns.com/home

 Masonry Layout(参考にはなるが実運用ではちょっと微妙かも)
 http://codepen.io/lucprincen/pen/PZPEby

 Pure CSS Radios with Flexbox
 (クリック判定にJSを使っていません)
 http://codepen.io/oknoblich/pen/mnlKi

○Flexbox CSSフレームワーク

 BULMA
 http://bulma.io/

 Bootstrap4 (現在Alpha版です)
 https://v4-alpha.getbootstrap.com/

○Flexboxのバグ

 https://github.com/philipwalton/flexbugs

------最後に-------

長くなりましたがセミナーに参加いただきました皆様、フォローアップメッセージを最後まで読んでいただきありがとうございました。またみなさまにお会いできることを楽しみにしております。

下記は私のソーシャルアカウントです。LINE@ではセミナーの無料招待チケットなどもお配りしておりますので、ぜひお気軽にフォローいただけると幸いです。

Facebook
https://www.facebook.com/chiyo.abe

LINE@
http://line.me/ti/p/@gkv8736o

CPIスタッフブログ
http://shared-blog.kddi-web.com/

Shift10:Webデザイン行く年来る年(CSS Nite LP49)

CSS Nite LP51「Reboot Dreamweaver」を3月11日に開催。1月20日までを「早割50」として、半額にて参加いただけます。