CSS Nite LP47「Coder's High 2016」フォローアップ（5）阿部 正幸さん（KDDIウェブコミュニケーションズ） | CSS Nite公式サイト

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

• スライド（HTML）
• 音声
• 動画

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/