2017 42 Chapter II 環境マネジメント データ編 環境経営 グリーン … · 環境管理 責任者 (環境本部長) ... 環境行動計画 Chapter I 社会への貢献
新しいマークアップ環境に...
Transcript of 新しいマークアップ環境に...
![Page 1: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/1.jpg)
益子 貴寛、小山田 晃浩
新しいマークアップ環境にキャッチアップ!
2013.12.14CSS Nite LP, Disk 31:Shift7
![Page 2: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/2.jpg)
益子 貴寛
株式会社サイバーガーデン
Twitter: @takahiromashiko
なんでも知っておかないとマズいディレクターという立ち位置
![Page 3: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/3.jpg)
小山田 晃浩
株式会社ピクセルグリッド
Twitter: @yomotsu
バリバリのフロントエンドエンジニアという立ち位置
![Page 4: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/4.jpg)
コンビ3年目
これまでの内容は当たったのか !?
![Page 5: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/5.jpg)
2011年12月13日火曜日
![Page 6: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/6.jpg)
2011年のマークアップは...
HTML5がますます使われるようになった
2011年12月13日火曜日
2011年のマークアップは...
HTML5 Boilerplateが参考になった
2011年12月13日火曜日
2011年のCSSは...
リセット → ノーマライズ
2011年12月13日火曜日
2011年のCSSは...
新しいデバイスでCSS3がどんどんサポートされている
2011年12月13日火曜日
![Page 7: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/7.jpg)
2011年のCSSは...
デスクトップ向けデザインでもCSS3が使われるようになった
2011年12月13日火曜日
2011年のCSSは...
日本ではレスポンシブWebデザインはあまり流行していない
2011年12月13日火曜日
2011年のCSSは...
CSS拡張メタ言語が普及した
2011年12月13日火曜日
2011年のJavaScriptは...
APIsは一部が使われ始めた(storage、history、geolocationなど)
2011年12月13日火曜日
![Page 8: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/8.jpg)
2011年12月13日火曜日
![Page 9: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/9.jpg)
![Page 10: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/10.jpg)
HTML5が当たり前になってきた
1HTML5 新要素以外もつかわれはじめた
2
HTML5 API をつかったサイトもぞくぞく
3HTML5は2014年に勧告に
4
![Page 11: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/11.jpg)
CSS3デザインが広く普及
5HTML.next と CSS4 にも注目
6
進む RWD の普及
7RWDとの向き合い方
8RWDは最適化ではなく最大公約数的なデザイン
![Page 12: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/12.jpg)
Windows 8 の登場とRWD
9CSSプリプロセッサーの普及
Sass、LESS、Stylus
10
ブラウザもプリプロセッサーに対応しはじめた
11JavaScriptプリプロセッサー
の普及CoffeeScript、TypeScript、LiveScript
12
![Page 13: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/13.jpg)
GUI ビルドツールの登場CodeKit、LiveReload、Compass.app、SCOUT
13Graphic User Interface
CUIビルドツールにも注目grunt、Yeoman、Brunch
14Character User Interface
新しい制作環境づくりのポイント
15Internet Explorer 10 の登場
16CSSプリプロセッサーとビルド環境を使おう
![Page 14: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/14.jpg)
古い IE がどんどん対象外に
17ターゲットブラウザと制作の自由度を整理
18
画像はベクターにも注目
19パフォーマンス最適化の
トレンド
20ファイルの結合、minify、
画像の再圧縮など
![Page 15: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/15.jpg)
![Page 16: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/16.jpg)
![Page 17: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/17.jpg)
HTML5の壁
2013年の
ボーダーライン?
モダンなWebづくりの理想10年前と同じ表現
![Page 18: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/18.jpg)
東証一部上場企業約1,700社以上のDOCTYPE調査
![Page 19: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/19.jpg)
DOCTYPE 割合
HTML5 9.4%
XHTML 1.1 0.4%
XHTML+RDFa 1.0 0.1%
XHTML 1.0 61.0%
HTML 4.01 24.8%
HTML 4.0 0.5%
なし 3.7%
![Page 20: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/20.jpg)
HTML5 9.4%のうち、それなりにきちんとセクション要素でマークアップをしているのは、59.4%
![Page 21: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/21.jpg)
CSS Preprocessor
![Page 22: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/22.jpg)
CSS3やマルチデバイスの登場でコードは長く、複雑に...
![Page 23: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/23.jpg)
![Page 24: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/24.jpg)
• 何度も書く色指定や幅指定(コーポレートカラー、リンクカラー)
• ベンダープリフィックス
• 繰り返し使うclearfix
![Page 25: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/25.jpg)
![Page 26: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/26.jpg)
![Page 27: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/27.jpg)
![Page 28: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/28.jpg)
![Page 29: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/29.jpg)
![Page 30: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/30.jpg)
Sassを使ってコードを整理する
![Page 31: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/31.jpg)
詳しくは、2014 年 2 月15日(土)
CSS Nite LP, Disk32でSass3.3にも期待
![Page 32: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/32.jpg)
コンテンツのパーツ化
![Page 33: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/33.jpg)
OOCSS, SMACSS, BEM and others
![Page 34: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/34.jpg)
BEM?
![Page 35: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/35.jpg)
![Page 36: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/36.jpg)
![Page 37: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/37.jpg)
![Page 38: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/38.jpg)
![Page 39: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/39.jpg)
• パーツ化の考え方
• Class名の付け方
![Page 40: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/40.jpg)
パーツ化の考え方
![Page 41: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/41.jpg)
![Page 42: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/42.jpg)
Block
Block
Block
Block
Block
![Page 43: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/43.jpg)
![Page 44: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/44.jpg)
Block
Block
Block
Block
Block
![Page 45: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/45.jpg)
![Page 46: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/46.jpg)
Element Element Element
Element Element Element
![Page 47: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/47.jpg)
![Page 48: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/48.jpg)
modifier
![Page 49: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/49.jpg)
![Page 50: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/50.jpg)
Element Element
![Page 51: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/51.jpg)
![Page 52: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/52.jpg)
Element Element Element Element
ElementElement Element Element
![Page 53: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/53.jpg)
modifier
modifier
![Page 54: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/54.jpg)
Class名の付け方
![Page 55: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/55.jpg)
<div class="pagination"> <div class="pagination__prev">前</div> <ul class="pagination__list"> <li class="pagination__item">1</li> <li class="pagination__item">2</li> <li class="pagination__item">3</li> </ul> <div class="pagination__next">次</div></div>
![Page 56: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/56.jpg)
<div class="pagination"> <div class="pagination__prev">前</div> <ul class="pagination__list"> <li class="pagination__item">1</li> <li class="pagination__item">2</li> <li class="pagination__item">3</li> </ul> <div class="pagination__next">次</div></div>
![Page 57: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/57.jpg)
<div class="pagination"> <div class="pagination__prev pagination__prev_disable_true">前</div> <ul class="pagination__list"> <li class="pagination__item pagination__item_current_true">1</li> <li class="pagination__item">2</li> <li class="pagination__item">3</li> </ul> <div class="pagination__next">次</div></div>
![Page 58: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/58.jpg)
pagination__item_current_true
modifierElementBlock modifier
![Page 59: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/59.jpg)
pagination__item_current_true
modifierElementBlock modifier
property value
![Page 60: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/60.jpg)
MindBeming
![Page 61: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/61.jpg)
mod-gallery-image--current
![Page 62: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/62.jpg)
構造を整理しよう
![Page 63: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/63.jpg)
スタイルガイド
![Page 64: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/64.jpg)
パーツのガイドライン
![Page 65: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/65.jpg)
![Page 66: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/66.jpg)
Starbucksの場合
![Page 67: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/67.jpg)
http://www.starbucks.com/static/reference/styleguide/
![Page 68: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/68.jpg)
http://www.starbucks.com/static/reference/styleguide/
![Page 69: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/69.jpg)
GitHubの場合
![Page 70: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/70.jpg)
https://github.com/styleguide/css/5.0
![Page 71: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/71.jpg)
https://github.com/styleguide/css/5.0
![Page 72: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/72.jpg)
パーツ化をしたら、管理しよう
![Page 73: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/73.jpg)
CSSフレームワーク
![Page 74: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/74.jpg)
![Page 75: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/75.jpg)
• Bootstrap
• Foundation
• Skeleton
![Page 76: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/76.jpg)
• Bootstrap
• Foundation
• Skeleton 派生的なプラグインが充実
![Page 77: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/77.jpg)
• プロトタイプ
• レスポンシブWebデザイン
• コンテンツのパーツ化
• スタイルガイド
ゼロから準備はたいへん!
![Page 78: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/78.jpg)
// Core variables and mixins@import "variables.less";@import "mixins.less";
// Reset@import "normalize.less";// @import "print.less";
// Core CSS@import "scaffolding.less";@import "type.less";@import "code.less";@import "grid.less";// @import "tables.less";// @import "forms.less";@import "buttons.less";
// Components
bootstrap.less
不要な機能は使わなくてもよい
![Page 79: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/79.jpg)
スタイルガイドの下地にできる
![Page 80: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/80.jpg)
有償のテーマやテンプレートも利用可能
![Page 81: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/81.jpg)
CSSフレームワークを使うなら要件定義や設計段階から決めておく
![Page 82: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/82.jpg)
ビルドタスクはGruntが主流に
![Page 83: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/83.jpg)
![Page 84: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/84.jpg)
![Page 85: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/85.jpg)
![Page 86: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/86.jpg)
![Page 87: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/87.jpg)
![Page 88: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/88.jpg)
![Page 89: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/89.jpg)
• 好きな後処理を組み立て可能なGrunt
•scss(Sass)をCSSに変換•CSSを圧縮•JSの結合•JSの圧縮
• 保存するたびに自動実行可能
![Page 90: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/90.jpg)
進化を続けるInternet Explorer
![Page 91: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/91.jpg)
10月17日IE11リリース
![Page 92: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/92.jpg)
![Page 93: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/93.jpg)
![Page 94: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/94.jpg)
![Page 95: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/95.jpg)
WebKitと決別したChrome
![Page 96: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/96.jpg)
![Page 97: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/97.jpg)
![Page 98: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/98.jpg)
![Page 99: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/99.jpg)
ChromeはBlinkエンジンへ...
![Page 100: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/100.jpg)
ますます存在感を失うOpera
![Page 101: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/101.jpg)
![Page 102: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/102.jpg)
Opera15以降はChromiumベース
![Page 103: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/103.jpg)
ま と め
![Page 104: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/104.jpg)
環境や方法が変化した年
![Page 105: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/105.jpg)
CSS Preprocessorでコードを整理しよう
![Page 106: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/106.jpg)
パーツ化をしよう
![Page 107: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/107.jpg)
パーツを管理しよう
![Page 108: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/108.jpg)
CSSフレームワークをこれらに活かせるか検討する価値アリ
![Page 109: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/109.jpg)
ブラウザーの進化にも注目
![Page 110: 新しいマークアップ環境に キャッチアップ!cssnite.jp/lp/lp31/followup/CSSNiteLP31-Shift7-s2-markup.pdf · 益子 貴寛、小山田 晃浩 新しいマークアップ環境に](https://reader036.fdocuments.net/reader036/viewer/2022070712/5ecd157c381ce046273d90ce/html5/thumbnails/110.jpg)
ありがとうございました