CSS: Flexbox and Custom Property

CSSの新仕様であるFlexboxとCustom Propertyについて

Transcript

1. ࠓͲ͖ͷ$44 'MFYCPYͱΧελϜϓϩύςΟ ۚඌوक
2. nFlexbox nカスタムプロパティ $44ͷ৽࢓༷ Dev Fest Tokyo 2016 Modern CSS : architecture, future specs, and build flow 森下雅章 increments, inc. でも紹介されていました
3. 'MFYCPY
4. = Flexible Box Layout Module 'MFYCPY
5. = Flexible Box Layout Module 'MFYCPY フレキシブルなボックスを 簡単にレイアウトできちゃう 素敵なやつ
6. = Flexible Box Layout Module 'MFYCPY floatなんかもう要らない ※ ちなみにBootstrap3ではfloat、4からFlexboxを採⽤ フレキシブルなボックスを 簡単にレイアウトできちゃう 素敵なやつ
7. 'MFYCPY • display: flex • flex: 1 • flex-direction: column 重要な3つのプロパティ 実際にレイアウトを作りながら説明します
8. 'MFYCPY 今回つくるレイアウト 3カラムレイアウト 別名：Holy-Grail layout
9. 'MFYCPY 今回つくるレイアウト もちろん レスポンシブレイアウトに 対応させます
10. 'MFYCPY このレイアウトを簡潔に説明すると…
11. 'MFYCPY こう ヘッダー フッター 右カラム 左カラム メイン コンテンツ
12. 'MFYCPY ではまずはじめにhtmlの⾻組みだけ (html約50⾏)
13. 'MFYCPY ヘッダーから整えていきます <header> <nav> <ul class="main-nav"> <li><a href="#" class="logo">Logo</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </nav> </header>
14. 'MFYCPY まずは背景と⽂字の⾊を変えてみます background-color:#343434; color:#fefefe;
15. 'MFYCPY <a>をブロック要素へ dispaly:block;
16. 'MFYCPY list-style: none; /*li*/ margin: 10px; text-decoration: none; 点と下線を消して、間隔を広げます
17. 'MFYCPY padding: 0; /*ul*/ border-radius: 5px; padding: 15px; 整えます
18. 'MFYCPY ここで親要素に対してdispaly:flex !! display:flex; /* <ul> */
19. 'MFYCPY ロゴを修正して、メニューとの間をスペーシング margin-right: auto; width: 200px; background-color:#EA5455; text-align: center;
20. 'MFYCPY ヘッダーに背景⾊つけます background-color: #2D4059;
21. 'MFYCPY ヘッダーの周囲に隙間があるので埋める /* <body>, <ul> */ margin:0;
22. 'MFYCPY ヘッダー完成
23. 'MFYCPY 次はコンテンツ <div class="main"> <section class="col-1"> <h1>Column 1</h1> <p>Lorem ipsum dolor sit amet...</p> </section> <section class=“col-2”> ... </section>
24. 'MFYCPY とりあえず背景と⽂字の⾊を変えてみます background-color: #2D4059; color: #EA5455; /* <h1> */ color; #FEFEFE; /* <p> */
25. 'MFYCPY 整えます margin: 10px; padding: 15px; border-radius: 5px;
26. 'MFYCPY /* 親要素に対して */ display:flex; ここで再びdispaly:flex !!
27. 'MFYCPY で、flex:1して 3つ同じ幅にする /* 各カラムに対して */ flex: 1;
28. 'MFYCPY flex:1のようにすると、余⽩を指定した割合で埋めようとする flex:1 flex:1 flex:1
29. 'MFYCPY 真ん中のメインコンテンツの幅を広げる /* .col-2に対して */ flex: 3;
30. 'MFYCPY flex:1 flex:1 flex:3 1:3:1の割合で横いっぱいに広がっている感じ
31. 'MFYCPY コンテンツ完成。
32. 'MFYCPY 最後にフッターをやっていきます <footer> © 2016 Kanao </footer>
33. 'MFYCPY ここでも背景と⽂字の⾊から変えていきます background-color: #343434 color: #FEFEFE;
34. 'MFYCPY 整えます padding: 1% 0; text-align: center;
35. 'MFYCPY 下に空⽩があるのでスティッキーフッターにしたい
36. 'MFYCPY そのまえに… ヘッダー フッター 右 カ ラ ム 左 カ ラ ム メイン コンテンツ ヘッダー フッター コンテンツ 右 カ ラ ム 左 カ ラ ム メイン コンテンツ 90度回転 させただけ 横向き3カラム 縦向き3カラム 今回のレイアウトは2つの 3カラムを単純に合わせたも のです
37. 'MFYCPY なのでやることはさっきのコンテンツとほぼ同じ 固定 固定 flex:1
38. 'MFYCPY ただし、全体にdispaly:flexをやるとこうなる /* body */ dispaly: flex;
39. 'MFYCPY /* body */ flex-direction: column; デフォルト値はrowで横向き。columnを指定することで縦向きになる。 そこで、flex-direction:column
40. 'MFYCPY /* body */ flex: 1; しかしこれでコンテンツに対してflex: 1してもだめ bodyの⾼さ100% = 画⾯の⾼さになっていない 100%
41. 'MFYCPY /* body */ min-height: 100vh; bodyの⾼さを画⾯の⾼さにするとOK (単位はvh) vhについてはViewport unitsで検索
42. 'MFYCPY 最後に全体の背景⾊を付けて、 /* body */ background-color: #FDE9C9;
43. 'MFYCPY とりあえず完成
44. 'MFYCPY このままでは画⾯幅が狭い時横並びのまま メディアクエリで モバイル端末では縦並びに 指定しておきます @media screen and (max-width:700px){ .main { flex-direction: column; } }
45. 'MFYCPY 完成 記述したプロパティ数はたったの35
46. $44
    ΧελϜϓϩύςΟ
47. = CSS Custom Properties for Cascading Variables $44
    ΧελϜϓϩύςΟ
48. = CSS Custom Properties for Cascading Variables $44
    ΧελϜϓϩύςΟ 変数が使えるようになる
49. :root { --bg-color: #343434; --border-radius: 4px; --box-padding: 10px; --txt-color: white; } $44
    ΧελϜϓϩύςΟ 使い⽅は簡単 • -- から始まるカスタムプロパティを定義する • 変数を使いたい場所で var(--hoge) という形で呼び出す .btn { display: inline-block; background-color: var(--bg-color); border-radius: var(--border-radius); color: var(--txt-color); padding: var(--box-padding); } :root…グローバル変数に定義するようなもの。普通はセレクタで定義する。 定義 呼び出し
50. :root { --base-font-size: 8px; --base-line-height: 15px; } .sample { font-size: calc( var(--base-font-size) / 2); line-height: calc( var(--base-line-height) * 4); } $44
    ΧελϜϓϩύςΟ calc()と組み合わせるとさらに便利
51. /* CSS */ :root { --key-color: red; } /* JavaScript */ var styles = getComputedStyle(document.documentElement); var value = String(styles.getPropertyValue('--key-color')); console.log(value); // => red $44
    ΧελϜϓϩύςΟ JavaScriptから変数を読み込むこともできる
52. ॴײ Flexbox 楽に思い通りのレイアウトにできる。 Bootstrap 4がFlexboxを採⽤したので、 今後FlexboxによるCSSレイアウトが普及しそう。 CSS Variables (CSSカスタムプロパティ) Sassのようなプリプロセッサと違い、動的な変数。 つまり実⾏時に変更が可能になる。すごい。
53. ॴײ しかしブラウザの未対応問題やバグでまだまだ… ※ SafariやIE10ではベンダープレフィックスが必要 ※ Flexboxは特にIEやSafariでバグが多い→flexbugsにまとめ
54. ͦ͜Ͱ PostCSS 次世代CSS (と⾔われてから1年ほど経つ) がなんか今すごい注⽬されている (bootstrap 5ではPostCSSが採⽤されるという話も) { css processor }
55. OFYU PostCSS
56. A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ floatより⾟くない「flexbox」でざっくりレイアウト http://qiita.com/hashrock/items/939684b9207dbab1d59e カスケード変数のための CSS カスタムプロパティ ̶ CSS Custom Properties for Cascading Variables Module Level 1 https://triple-underscore.github.io/css-variables-ja.html CSS Variables （CSS カスタムプロパティ） の使い⽅ https://hyper-text.org/archives/2014/07/css_variables.shtml CSS Variables(カスタムプロパティ)： なぜ、関⼼を持つべきか？ http://postd.cc/css-variables-why-should-you-care/ 参考