2015年の...
Transcript of 2015年の...
![Page 1: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/1.jpg)
2015年のマークアップの話題を総まとめ小山田 晃浩 / 益子 貴寛 / 久保 知己2015年12月26日
![Page 2: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/2.jpg)
ピクセルグリッド
小山田 晃浩@yomotsu
まぼろし
益子 貴寛@takahiromashiko
まぼろし
久保 知己 @kojika17
![Page 3: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/3.jpg)
まぼろしグリッド!
![Page 4: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/4.jpg)
1. ブラウザー の移り変わり
2. CSS の書き方
3. 制作環境 の変化
4. ライブコーディング
![Page 5: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/5.jpg)
1. ブラウザーの移り変わり
![Page 6: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/6.jpg)
2016年1月12日にMicrosoftによるサポート終了、今後はキケンなブラウザーへ
IE8のおわり
![Page 7: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/7.jpg)
https://www.microsoft.com/ja-jp/windows/lifecycle/iesupport/
![Page 8: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/8.jpg)
![Page 9: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/9.jpg)
Windows Vista IE9 のみ
Windows 7 IE11 のみ
Windows 8.1 IE11 のみ
Windows 10 Microsoft Edge と IE11 のみ
![Page 10: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/10.jpg)
https://www.microsoft.com/japan/msbc/Express/ie_support/
![Page 12: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/12.jpg)
http://pro.gnavi.co.jp/magazine/article/info/if2043/
![Page 14: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/14.jpg)
https://site2.sbisec.co.jp/ETGate/WPLETmgR001Control?OutSide=on&getFlg=on&burl=search_home&cat1=home&cat2=none&dir=info&file=home_info151211.html
![Page 15: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/15.jpg)
https://www.ipa.go.jp/security/ciadr/vul/20151215-IEsupport.html
![Page 16: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/16.jpg)
8→9または11
![Page 17: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/17.jpg)
IE9から使える技術• Video / Audio • Canvas • SVG • Data URI
• CSS3擬似クラス • vw, vh (CSSの単位) • calc() (計算式) • Border Radius • CSS3 2D Transforms • メディアクエリー
その他多数
![Page 18: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/18.jpg)
IE11から使える技術• Multiple Columns • Border Image • Flexbox • Animation • Transition • Transform3D • -ms-device-fixed (独自CSS)
• const • WebGL • WebSocket API • WebWorker
その他多数
![Page 20: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/20.jpg)
IE9または11ベースで 新しく「使える」技術を見直しておこう
![Page 21: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/21.jpg)
![Page 22: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/22.jpg)
Windows10向けの IEの後継ブラウザーとして新ブラウザーEdgeをリリース
Microsoft Edgeのリリース
![Page 23: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/23.jpg)
• 古い機能の廃止
• 互換モードの廃止
• 新技術を積極サポート
• 汎用UserAgent文字列
![Page 24: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/24.jpg)
https://dev.windows.com/en-us/microsoft-edge/platform/status/
![Page 25: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/25.jpg)
https://blogs.windows.com/msedgedev/2015/12/05/open-source-chakra-core/
![Page 26: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/26.jpg)
IEとMicrosoft EdgeはSafariとChromeの関係みたいなもの
![Page 27: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/27.jpg)
http://www.okasan-online.co.jp/
![Page 28: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/28.jpg)
![Page 29: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/29.jpg)
Edgeなのに
![Page 30: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/30.jpg)
Microsoft Edgeも検証対象にしよう
![Page 31: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/31.jpg)
縦書きが
全ブラウザ┃で
![Page 32: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/32.jpg)
.vText { writing-mode: tb-rl; /* 旧 IE */ -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
5.5 41 8 5.1
![Page 35: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/35.jpg)
すでに縦書きは可能なテクニック
![Page 37: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/37.jpg)
• EdgeとChromeでFlash以外のプラグインサポート終了
• Firefoxでも終了予定
プラグインのおわり
![Page 38: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/38.jpg)
![Page 40: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/40.jpg)
https://blog.mozilla.org/futurereleases/2015/10/08/npapi-plugins-in-firefox/
![Page 41: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/41.jpg)
Flash以外のプラグインほぼ全滅
![Page 42: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/42.jpg)
https://www.google.co.jp/search?hl=ja&q=まぐろ市場
![Page 43: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/43.jpg)
ただし、スマートフォンではFlashもかなり冷遇
![Page 44: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/44.jpg)
2. CSSの書き方
![Page 45: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/45.jpg)
•BEM
•SMACSS
• ITCSS
CSS設計
![Page 46: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/46.jpg)
CSS設計BEM SMACSS ITCSSBlock Base SettingsElement Layout ToolsModifier Module Generic
State ElementsTheme Objects
ComponentsTrumps
![Page 47: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/47.jpg)
http://docs.yahoo.co.jp/info/msiesp/index.html
![Page 48: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/48.jpg)
http://docs.yahoo.co.jp/info/msiesp/index.html
![Page 49: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/49.jpg)
.howto {}
.howto__detailtxt {}
.howto__group {}
.howto__group--os {}
.howto__order {}
.howto__order--odd {}
.howto__order--first {}
.howto__cap {}
.howto__cap--wrap {}
![Page 50: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/50.jpg)
https://developers.google.com/web/tools/starter-kit/
![Page 51: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/51.jpg)
https://github.com/google/web-starter-kit/blob/master/app/index.html
![Page 52: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/52.jpg)
.mdl-base {}
.mdl-layout {}
.mdl-layout--fixed-header {}
.mdl-layout__header {}
.mdl-layout__header--scroll {}
.mdl-layout--large-screen-only {}
.mdl-layout__header-row {}
.mdl-layout__tab-bar {}
.mdl-layout__tab {}
![Page 53: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/53.jpg)
.mdl-js-layout {}
.mdl-js-ripple-effect {}
.mdl-js-button {}
.is-active {}
.visuallyhidden {}
![Page 54: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/54.jpg)
壊れにくいCSSのための 設計思想が 浸透してきている
![Page 55: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/55.jpg)
SassLESS Stylus
![Page 58: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/58.jpg)
http://v4-alpha.getbootstrap.com/
![Page 59: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/59.jpg)
Bootstrap 4は Sass (libSass) で開発
![Page 60: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/60.jpg)
Sassの種類
Sass libSass
Ruby
C/C++
Node.js, Ruby, Go,
PHP, Javaなど
![Page 61: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/61.jpg)
•Rubyに依存しない
•Ruby Sassよりも4,000倍早い
•v3.2.0(2015年4月27日)Ruby Sassとほぼ同等の機能に
libSassのポイント
![Page 62: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/62.jpg)
来年もlibSassの動向を 要チェック
![Page 63: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/63.jpg)
PostCSS
![Page 64: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/64.jpg)
PostCSS
•分析
•フォールバック(後方互換)
•最適化
•独自拡張
![Page 65: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/65.jpg)
PostCSS
•分析
•フォールバック(後方互換)
•最適化
•独自拡張
![Page 66: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/66.jpg)
autoprefixer
.foo { display: flex;}
Before
![Page 67: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/67.jpg)
autoprefixer
.foo { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}
After
![Page 68: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/68.jpg)
PostCSS
•分析
•フォールバック(後方互換)
•最適化
•独自拡張
![Page 69: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/69.jpg)
CSS MQPacker
@media screen and (min-width: 769px) { .foo { color: #000; }}
@media screen and (min-width: 769px) { .bar { color: #f00; }}
Before
![Page 70: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/70.jpg)
CSS MQPacker
@media screen and (min-width: 769px) { .foo { color: #000; } .bar { color: #f00; }}
After
![Page 71: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/71.jpg)
PostCSSは 後方互換や最適化に 便利なツール
![Page 72: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/72.jpg)
PostCSS
•分析
•フォールバック(後方互換)
•最適化
•独自拡張
![Page 73: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/73.jpg)
PostCSS Nested
.block { img { max-width: 100%; } &_item { padding: 10px; }}
Before
![Page 74: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/74.jpg)
PostCSS Nested
.block img { max-width: 100%;}.block_item { padding: 10px;}
After
![Page 75: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/75.jpg)
独自拡張を行う場合は やりすぎに気をつけよう
![Page 76: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/76.jpg)
3. 制作環境の変化
CC Jordan Dawe, https://www.flickr.com/photos/freedryk/477742788
![Page 77: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/77.jpg)
Grunt gulp
![Page 78: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/78.jpg)
Grunt gulp
Grunt gulp
実体のある一時ファイル ストリーム
1,549,789 DL/月 1,886,470 DL/月
メンテナンスされてない
メンテナンスされている
https://www.npmjs.com/package/grunt https://www.npmjs.com/package/gulp
![Page 79: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/79.jpg)
https://ponyfoo.com/articles/javascript-developer-survey-results#what-s-your-preferred-build-script-solution
24%
15%
26%
35% Gruntgulpnpm runothers
2014年ビルド環境調査
![Page 80: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/80.jpg)
https://ponyfoo.com/articles/javascript-developer-survey-results#what-s-your-preferred-build-script-solution
13%
28%
41%
19%Gruntgulpnpm runothers
2015年ビルド環境調査
![Page 81: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/81.jpg)
ビルド環境はgulpがメジャーに
![Page 82: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/82.jpg)
バージョン0系からバージョン4系、5系へ
Node.jsのバージョンアップ
![Page 83: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/83.jpg)
![Page 84: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/84.jpg)
Node.js v0.x.x 2016年中に終了
Node.js v4.x.x 2018年まで (LTS)
Node.js v5.x.x 2016年中に終了
![Page 85: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/85.jpg)
Node.js v4系に移行する準備を
![Page 86: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/86.jpg)
2年ごとにNode.jsをアップデート
![Page 87: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/87.jpg)
4. ライブコーディング
![Page 88: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/88.jpg)
4. ライブコーディング
![Page 89: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/89.jpg)
まとめ
![Page 90: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/90.jpg)
• 年始にIEのボーダーラインが8 → 9または11に
• プラグインのサポート廃止も
• HTML5の高度な技術が活躍
![Page 91: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/91.jpg)
• CSSの設計がはやっているけど、 とにかく「ちゃんと書こう」
• libSassが注目されているけど、CSSを意識して「ちゃんと書こう」
• PostCSSが話題にあがっているけど、やりすぎずに「ちゃんと書こう」
![Page 92: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/92.jpg)
• Gruntかgulpかで悩むのは終わり、gulpが標準的な時代に
• Node.jsはv4系に移行する
![Page 93: 2015年の マークアップの話題を総まとめcssnite.jp/lp/shift9/followup/CSSNiteLP43-Shift9-s2-markup.pdf · 2015年の マークアップの話題を総まとめ 小山田](https://reader031.fdocuments.net/reader031/viewer/2022011822/5ecd1571381ce046273d90b7/html5/thumbnails/93.jpg)
よいお年を!
@takahiromashiko
@yomotsu
@kojika17