FLEXBOX-MEN: Apocalypse
-
Upload
fuminori-mori -
Category
Technology
-
view
217 -
download
2
Transcript of FLEXBOX-MEN: Apocalypse
FLEXBOX-MEN: Apocalypse~display: flex で柔軟にレイアウトしよう!~@HTML Party かごんま 2016コーディングデザイン 森 史憲1 © Coding Design, 2016
目次• 自己紹介• FLEXBOX-MEN: Apocalypse
• レイアウト方法の比較• 便利ポイント• Flexbox
• 地雷ポイント• フレームワーク• まとめ
2 © Coding Design, 2016
自己紹介3 © Coding Design, 2016
自己紹介(1/3)
• 名前森 史憲(もり ふみのり)
• 生年月日昭和51年6月9日
• 出身・現住所鹿児島県鹿児島市
• 容姿丸メガネ
4 © Coding Design, 2016
自己紹介(2/3)
• Webサイト制作• Web関連技術講師• Web関連書籍執筆• イベント運営
5 © Coding Design, 2016
自己紹介(3/3)
• カレーLOVE!!⭐カレー屋 匠#匠盛
• ビールLOVE!!⭐城山観光ホテル#スタウトエール黒糖
• チョコレートLOVE!!⭐パティスリーヤナギムラ#薩摩チョコチップス
6 © Coding Design, 2016
Webのレイアウトは悩ましい
7 © Coding Design, 2016
怪獣のように暴れまくる
8 © Coding Design, 2016
果たして攻略できる日は来るのか…
9 © Coding Design, 2016
10 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse
11 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse
Webのレイアウトはひと筋縄ではいかない!そう、あいつは大怪獣…
Webzilla!!
12 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse
レイアウト方法の比較
13 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > レイアウト方法の比較
Webzilla を攻略する様々なレイアウト方法が使われた!14 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > レイアウト方法の比較
1. table2. float3. inline-block4. position15 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > レイアウト方法の比較
どれも帯に短したすきに長し…
16 © Coding Design, 2016
うーむ、Webzillaは手強い!
17 © Coding Design, 2016
助けて!FLEXBOX-MEN!
18 © Coding Design, 2016
19 © Coding Design, 2016
呼んだかい!
20 © Coding Design, 2016
Flexboxを使って
21 © Coding Design, 2016
一緒に攻略しよう
22 © Coding Design, 2016
ぜっ23 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse
便利ポイント
24 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > 便利ポイント
Flexboxの便利ポイントと実際の使い方を見ていこう!
25 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > 便利ポイント
• HTMLが荒れない• 上下真ん中寄せができる• 要素の並べ替えができる• 要素の改行時に隙間ができない• スクロールバーが表示される
26 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > 便利ポイント
これまでの問題が一挙に解決!では使い方を見てみよう!
27 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse
Flexbox
28 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
Flexboxの基本
29 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
Flexboxの基本Flexboxは親要素と子要素が必要だ!<div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div></div>
30 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
Flexboxの基本display: flex; で親要素にFlexboxを設定する!.container { display: flex; }
31 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
Flexboxの基本flex-direction で子要素のレイアウトを制御できるぞ!値は row, row-reverse, column, column-reverse だ!.container { display: flex; flex-direction: column-reverse;}
32 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素の水平方向の揃え
33 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素の水平方向の揃えjustify-content で子要素の水平方向の揃えを制御できるわ!値は flex-start, flex-end, center, space-between, space-around よ!.container { display: flex; justify-content: center;}
34 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素の垂直方向の揃え
35 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素の垂直方向の揃えalign-items で子要素の垂直方向の揃えを制御できるっちよ!値は flex-start, flex-end, center, baseline, stretch じゃっど!.container { display: flex; align-items: center;}
36 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素の折返し
37 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素の折返しflex-wrap で子要素の折り返しを制御できるぜ!値は nowrap, wrap, wrap-reverse だべ!.container { display: flex; flex-wrap: wrap-reverse;}
38 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素が縦に複数並んだ時の揃え
39 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素が縦に複数並んだ時の揃えalign-content で子要素が縦に複数並んだ時の揃えを制御できる!値は flex-start, flex-end, center, space-between, space-around を使いやんせ!.container { display: flex; align-content: flex-end;}
40 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素ごとに指定
41 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素ごとに指定flex-basis で個別の子要素の最小幅を制御できったっど!値は widthプロパティに指定するような値 やっでな!.item:nth-child(2) { flex-basis: 200px;}
42 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素ごとに指定align-self で個別の子要素の垂直方向の揃えを制御できっち!値は flex-start, flex-end, center, baseline, stretch を入れもんそ!.item:nth-child(2) { align-self: flex-end;}
43 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > Flexbox
子要素ごとに指定order で個別の子要素の順番を制御できるぞ!たまがっが!値は 数値 じゃっど!.item:nth-child(2) { order: -1;}
44 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse
地雷ポイント
45 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse
地雷ポイント実はまだ危ういところがあるFlexbox!少しだけ抜粋してみた!
46 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > 地雷ポイント
ブラウザサポート• Can I use - Flexible Box Layout Modulehttp://caniuse.com/#feat=flexbox
47 © Coding Design, 2016
48 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > 地雷ポイント
ブラウザサポート• IEは10以上サポート
• 対策: IE9以下はfloatでレイアウトするか、 flexibility.js を使うか、サポート外にするか
• 森はflexibility.js未使用。おすすめはしません
49 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > 地雷ポイント
ブラウザサポート• Android4.3以前は古い仕様での実装
• 例)Android4.4以降 display: flex; → Android4.3以前 display: -webkit-box;
• 対策: Sass flexbox mixin を使うか、サポート外にするか
50 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > 地雷ポイント
バグ• IE10, IE11
• 親要素にmin-heightを指定するとalign-itemsが効かない• 対策: 親要素のさらに親要素にdisplay: flex; flex-direction:
column;を設定
51 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > 地雷ポイント
バグ• IE10, IE11
• 子要素にflex-basisを設定しないと長い文章を折り返さない• 対策: 幅に合わせて子要素にflex-basisとmax-widthを設定• max-widthを指定するのはbox-sizing: border-box;に対応させるため
52 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > 地雷ポイント
バグ• IE10, IE11
• 子要素にimg要素を入れると画像の縦横比が崩れる• 対策: 子要素はdiv要素などを入れ、その中にimg要素を入れる
53 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > 地雷ポイント
バグ詳しくは Flexbugs をチェック!主にIE10, 11が多い!バグ・解決策のデモがあるよ!• Flexbugs
54 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > 地雷ポイント
JavaScriptでの操作• flex-directionやorderで順番を変えてもDOMの順番は変わっていない• CSSで順番を変える前のHTMLがベースに念頭に置く。
55 © Coding Design, 2016
flex-directionflex-wrapjustify-contentalign-itemsflex-basis…56 © Coding Design, 2016
ブラウザサポートバグJavaScriptの対応…
57 © Coding Design, 2016
ああ、もう頭がいっぱいだぁぁぁ!!!!
58 © Coding Design, 2016
ぴんぽーん
59 © Coding Design, 2016
そんなあなたに朗報。
60 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse
フレームワーク
61 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse
フレームワークこんにちは。長官です。バグ対策もされてたりするので、フレームワークを使おうね!
62 © Coding Design, 2016
FLEXBOX-MEN: Apocalypse > フレームワーク
• Flexboxの自由に使いたい人向け• Sass flexbox mixin• Autoprefixer
• 既存のFlexboxグリッドを使いたい人向け(CSS)
• Flexbox Grid
• Flexboxグリッドをカスタマイズして使いたい人向け(Sass)
• Flexbox Grid Sass63 © Coding Design, 2016
まとめ64 © Coding Design, 2016
Flexboxはレイアウトするのにすごーく便利!65 © Coding Design, 2016
ただし、対象ブラウザには注意!
66 © Coding Design, 2016
ブラウザごと(主にIE10,11)のバグにも注意!
67 © Coding Design, 2016
さあ最後の対決だ!Webzillaを動かして洞窟に入れよう!68 © Coding Design, 2016
ありがとう!君の活躍で世界は救われたよ!
69 © Coding Design, 2016
これからもFlexboxを使って世界を救ってね!
70 © Coding Design, 2016
ご清聴ありがとうございましたッッ!
71 © Coding Design, 2016