[CSS Nite LP47] Coder's High 2016

「Good bye ~~ floats and “clearfix” hacks」これからはFlexboxの時代

仕事をしていてテンションが
上がることはなんですか?

少し意地悪なディレクター

横幅も高さも分からないBOX2個並べてさ、
テキストを上下中央に揃えておいてくんね?

あ、さっきのボックスさ
1個かもしれないし、15個かもしれないし、
個数分かんないんだわwwwww
JavaScriptも使わないでね

ちゃちゃっとヨロシクちゃーん

Flexbox
簡単に構築できます

自己紹介

阿部 正幸(あべ まさゆき)
KDDIウェブコミュニケーションズ
Sublime Text 3 + Gulp

  • ACE01 / SmartRelease プロダクトマネージャー
  • CPI エバンジェリスト 統括
  • KDDIウェブ 公認 CPI スタッフブログ 編集長
  • TechAcademy講師
  • ANNAI株式会社 社外取締役(CMO)

仕事をしていてテンションが
上がることはなんですか?

私の場合

難しそうなことがちゃちゃっとできたときや、

すごい便利なライブラリを使いこなしたときに

オレ天才!! ってテンションがあがる

翌日には俺、無能って落ち込んでいますけどね......

本日はそんなテンションが上がる

Flexbox

を紹介します

Flexboxとは
CSS Flexible Box Layout Module


https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/

対応ブラウザ(Can I Use)


  • IE10以降のブラウザから動作する
  • Androidは4.4 以降はBlinkベースで動作するが、4.3以下はDraft版の動作となるので、実質動作しない
  • CPIフタッフブログ IE9以下の割合:0.7%

Flexboxプロパティ
いくつあると思いますか?

  1. 12個
  2. 18個
  3. 24個
  4. 30個
  5. 分からない

正解は12個です

[ Flexbox Properties ]
order
flex(flex-grow、flex-shrink、flex-basis)
flex-flow (flex-direction、flex-wrap)
justify-content
align-items
align-self
align-content

Flexbox Properties

これだけ覚えたら
複雑なレイアウトが構築できるようになる

order
flex(flex-grow、flex-shrink、flex-basis)
flex-flow (flex-direction、flex-wrap)
justify-content
align-items
align-self
align-content

こんなレイアウトもラクになる

No scriptのレスポンシブ対応ページネーション
(ソースコード公開します)

こんなレイアウトもラクになる

ドラック&ロップで順番入れ替え
(ソースコード公開します)

こんなレイアウトもラクになる

高さの違うボックスの下揃え
(ソースコード公開します)

IE8・9対応

https://github.com/jonathantneal/flexibility

  1. flexibility.jsをロード
<script src="flexibility.js"></script>
  1. flex-containerに対して -js-を指定します。
.flex-container{
   -js-display: flex;
}

Flex container

<div class="flex-container">
</div>
.flex-container{
   display: flex;
}

「display: flex」を指定した配下がFlex itemになる

<div class="flex-container">
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
.flex-container{
   display: flex;
}

Flexbox Properties

flex container

flex-flow (flex-direction、flex-wrap)
justify-content
align-items
align-content

flex item

order
flex(flex-grow、flex-shrink、flex-basis)
align-self

flex-direction

Flex container内のitemの並びを縦か横に設定します

Value: row | row-reverse | column | column-reverse
Initial: row

DEMO

.flex-container{
	display: flex;
	flex-direction: column;
	/*
		Value: row | row-reverse | column | column-reverse
	*/
}

flex-wrap

Flex container内のitemの折り返しの指定

Value: nowrap | wrap | wrap-reverse
Initial: nowrap

DEMO

.flex-container{
	display: flex;
	flex-wrap: column;
	/*
		Value:	nowrap | wrap | wrap-reverse
	*/
}

justify-content

横並びの位置を指定

DEMO
.flex-container{
	display: flex;
	justify-content: flex-end;
	/*
		Value: flex-start | flex-end | center | space-between | space-around
		Initial: flex-start
	*/
}

align-items

縦並びの位置を指定

DEMO
.flex-container{
	display: flex;
	align-items: flex-end;
	/*
		Value: flex-start | flex-end | center | baseline | stretch
		Initial: stretch
	*/
}

align-content

複数行にまたがった縦並びの位置を指定

DEMO
.flex-container{
	display: flex;
	align-content: flex-end;
	/*
		Value: flex-start | flex-end | center | space-between | space-around | stretch
		Initial: stretch
	*/
}

order

並びの順番を指定

DEMO
.flex-container{
	display: flex;
}
.flex-item{
	order:2;
	/*
		Value:	
		Initial:	0
	*/
}

flex

flex-grow、flex-shrink、flex-basisをまとめて指定
各要素の幅を指定

DEMO
.flex-container{
	display: flex;
}
.flex-item{
	flex:1 0 auto;
	/*
		Initial : flex:0 1 auto;
		flex:auto -> flex:1 1 auto;
		flex:none -> flex: 0 0 auto;
		flex: <positive-number> -> flex: <positive-number> 1 0
	*/

}

align-self

Flex itemの縦並び位置を指定

DEMO
.flex-container{
	display: flex;
	align-items: flex-end;
	/*
		Value: auto | flex-start | flex-end | center | baseline | stretch
		Initial: auto
	*/
}

Flexboxを活用できるところ

引用:https://www.kagoya.jp/howto/wordpress/about/

CMS使うと簡単に更新できるんだ

http://www.mamas-papas.jp/
http://mamas-papas.jp/blog/

う、うん

できてるけど........

素人が更新しても
かっこよく記事を更新したい

Flexbox + CMS + WYSIWYG + Template」で、できます

ckeditorの設定を一部変更

ckeditor.config.js

CKEDITOR.editorConfig = function(config) {

  // リプレイスのデフォルト上書きOFF
  config.templates_replaceContent = false;

  // class、IDなどのAttributesを全て許可
  config.allowedContent = true;

  // 一部を許可:h1 class="fuga hoge" 、 p style="text-align:center"
  config.extraAllowedContent = 'h1(fuga,hoge),p{text-align}'

}
参照:http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.removeDialogTabs

DEMO

さいごに

  • 未対応のブラウザもあるので、ページ全体の
    レイアウトに使うのではなく、 パーツ単位の利用が
    現状だと無難かも
  • FlexboxのDEMOを各ページからダウンロードし、実際に値を変更しどのような動作になるか確認してみよう
  • 少し慣れてきたら、今回のデモ用に作成したコードを見てみよう
    プライスリスト
    ページネーション
    ドラック&ロップで要素入れ替え

さいごに2

今日のセミナーを聞いて、やっぱりちゃちゃっと
できるんじゃんwwww って思ったディレクターの皆様へ

圧倒的に忘れてくださいッ!!

Drupal Meetupやっています


https://meetup.drupaljapan.org/

5都市で開催(北海道、新潟、東京、大阪、沖縄)

ANNAI - エンジニア募集中 -

  • 募集職種
    • フロントエンジニア
    • ソフトウェアエンジニア
  • リモートワーク可
  • 北海道、新潟、東京
    京都、奈良、大阪、
    徳島、沖縄

    詳細はwebで !! https://annai.co.jp/recruit

KDDIウェブ - 人材募集中 -

詳細はwebで !!
http://www.kddi-webcommunications.co.jp/recruit

ありがとうございました

Special Thanks