[CSS Nite LP47] Coder's High 2016
横幅も高さも分からないBOX2個並べてさ、
テキストを上下中央に揃えておいてくんね?
あ、さっきのボックスさ
1個かもしれないし、15個かもしれないし、
個数分かんないんだわwwwww
JavaScriptも使わないでね
ちゃちゃっとヨロシクちゃーん
阿部 正幸(あべ まさゆき)
KDDIウェブコミュニケーションズ
Sublime Text 3 + Gulp
難しそうなことがちゃちゃっとできたときや、
すごい便利なライブラリを使いこなしたときに
オレ天才!! ってテンションがあがる
翌日には俺、無能って落ち込んでいますけどね......
本日はそんなテンションが上がる
を紹介します
[ Flexbox Properties ]
order
flex(flex-grow、flex-shrink、flex-basis)
flex-flow (flex-direction、flex-wrap)
justify-content
align-items
align-self
align-content
これだけ覚えたら
複雑なレイアウトが構築できるようになる
order
flex(flex-grow、flex-shrink、flex-basis)
flex-flow (flex-direction、flex-wrap)
justify-content
align-items
align-self
align-content
No scriptのレスポンシブ対応ページネーション
(ソースコード公開します)
ドラック&ロップで順番入れ替え
(ソースコード公開します)
高さの違うボックスの下揃え
(ソースコード公開します)
https://github.com/jonathantneal/flexibility
<script src="flexibility.js"></script>
.flex-container{ -js-display: flex; }
<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; }
flex-flow (flex-direction、flex-wrap)
justify-content
align-items
align-content
order
flex(flex-grow、flex-shrink、flex-basis)
align-self
Flex container内のitemの並びを縦か横に設定します
Value: row | row-reverse | column | column-reverse
Initial: row
.flex-container{ display: flex; flex-direction: column; /* Value: row | row-reverse | column | column-reverse */ }
Flex container内のitemの折り返しの指定
Value: nowrap | wrap | wrap-reverse
Initial: nowrap
.flex-container{ display: flex; flex-wrap: column; /* Value: nowrap | wrap | wrap-reverse */ }
横並びの位置を指定
DEMO.flex-container{ display: flex; justify-content: flex-end; /* Value: flex-start | flex-end | center | space-between | space-around Initial: flex-start */ }
縦並びの位置を指定
DEMO.flex-container{ display: flex; align-items: flex-end; /* Value: flex-start | flex-end | center | baseline | stretch Initial: stretch */ }
複数行にまたがった縦並びの位置を指定
DEMO.flex-container{ display: flex; align-content: flex-end; /* Value: flex-start | flex-end | center | space-between | space-around | stretch Initial: stretch */ }
並びの順番を指定
DEMO.flex-container{ display: flex; } .flex-item{ order:2; /* Value:Initial: 0 */ }
flex-grow、flex-shrink、flex-basisをまとめて指定
各要素の幅を指定
.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 */ }
Flex itemの縦並び位置を指定
DEMO.flex-container{ display: flex; align-items: flex-end; /* Value: auto | flex-start | flex-end | center | baseline | stretch Initial: auto */ }
「Flexbox + CMS + WYSIWYG + Template」で、できます
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
今日のセミナーを聞いて、やっぱりちゃちゃっと
できるんじゃんwwww
って思ったディレクターの皆様へ
5都市で開催(北海道、新潟、東京、大阪、沖縄)
北海道、新潟、東京
京都、奈良、大阪、
徳島、沖縄
詳細はwebで !! https://annai.co.jp/recruit