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

CSS Nite公式サイト - 2017年1月2日(月) 10:48
このページは、外部サイト CSS Nite公式サイト の情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
完全な状態のオリジナル記事は 「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/

メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

ROI
広告関連の指標。「投資収益率」「投資対効果」のこと。投資したコストに対して得られ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]