1. CSSコーディングを効率よくする
おすすめプラグイン @Grunt
14年3月15日土曜日

2. 自己紹介
2
田村章吾
屋号：ましじめ
フリーのマークアップエンジニア
山登りしてます。
ブログ書いてます。
http://tamshow.com/
14年3月15日土曜日

3. 自己紹介
3
田村章吾
屋号：ましじめ
フリーのマークアップエンジニア
山登りしてます。
ブログ書いてます。
http://tamshow.com/
水族館のサイトを作りたいです。
14年3月15日土曜日

4. 4
最近のCSSは複雑
14年3月15日土曜日

5. 最近のCSSは複雑
5
最近どうやってCSS書いていますか？
14年3月15日土曜日

6. 最近のCSSは複雑
6
プリプロセッサー
14年3月15日土曜日

7. 最近のCSSは複雑
7
14年3月15日土曜日

8. 8
最近のCSSは複雑
14年3月15日土曜日

9. 9
最近のCSSは複雑
ポストプロセッサー
14年3月15日土曜日

10. 10
最近のCSSは複雑
Minify
14年3月15日土曜日

11. 11
最近のCSSは複雑
CSS LINT
Minify
14年3月15日土曜日

12. 12
最近のCSSは複雑
CSS LINT
Autoprefixer
Minify
14年3月15日土曜日

13. 13
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
14年3月15日土曜日

14. 14
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
pngquant
14年3月15日土曜日

15. 15
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
pngquant
最近のCSSコーディングは
する事がいっぱい。
14年3月15日土曜日

16. 16
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
pngquant
面倒な作業は自動化しましょう
14年3月15日土曜日

17. 17
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
pngquant
Grunt
14年3月15日土曜日

18. 18
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
pngquant
14年3月15日土曜日

19. 19
プラグイン
おすすめプラグイン紹介
14年3月15日土曜日

20. 20
・CSSのスタイルガイドを作る
grunt-styleguide
１つ目！
14年3月15日土曜日

21. 21
http://jacobrask.github.io/styledocco/
Style Docco
サイトごとにスタイルガイドが作成出来る
grunt-styleguide
14年3月15日土曜日

22. 22
http://jacobrask.github.io/styledocco/
Style Docco
サイトごとにスタイルガイドが作成出来る
grunt-styleguide
Node.jsを使った、
スタイルガイドジェネレーター
14年3月15日土曜日

23. 23
grunt-styleguide
14年3月15日土曜日

24. 24
grunt-styleguide
CSSにマークダウンでコメントを記述
14年3月15日土曜日

25. 25
grunt-styleguide
コマンドを叩けばOK
14年3月15日土曜日

26. 26
grunt-styleguide
styledocco -n "Style Guide" css/style.css
14年3月15日土曜日

27. 27
grunt-styleguide
14年3月15日土曜日

28. 28
grunt-styleguide
でも、修正の度に作るのは
面倒くさいなぁ…（´・ω・｀）
14年3月15日土曜日

29. 29
grunt-styleguide
grunt-styleguide
14年3月15日土曜日

30. 30
grunt-styleguide
CSSを修正するだけで勝手に作成
14年3月15日土曜日

31. 31
grunt-styleguide
14年3月15日土曜日

32. 32
grunt-styleguide
こんな使い方してます
14年3月15日土曜日

33. 33
grunt-styleguide
14年3月15日土曜日

34. 34
grunt-styleguide
HTMLがちょっと分かる人は
更新してくれる (・∀・)♪
14年3月15日土曜日

35. 35
grunt-styleguide
あら、素敵！
14年3月15日土曜日

36. 36
・CSSファイル内のMediaQueriesをまとめる
grunt-combine-media-queries
２つ目！
14年3月15日土曜日

37. 37
・CSSファイル内のMediaQueriesをまとめる
grunt-combine-media-queries
メディアクエリの管理って面倒
14年3月15日土曜日

38. 38
パーツ単位で記述する
grunt-combine-media-queries
14年3月15日土曜日

39. 39
パーツ単位で記述する
grunt-combine-media-queries
・@mediaを書く場所が近いので
何を書いたかすぐ分かる
・関連する箇所の修正が楽
・@mediaの記述が増える
・ファイルサイズを圧迫
いいところ (・∀・)♪
わるいところ (´；ω；｀)ﾌﾞﾜｯ
14年3月15日土曜日

40. 40
パーツ単位で記述する
grunt-combine-media-queries
・@mediaを書く場所が近いので
何を書いたかすぐ分かる
・関連する箇所の修正が楽
・@mediaの記述が増える
・ファイルサイズを圧迫
いいところ (・∀・)♪
わるいところ (´；ω；｀)ﾌﾞﾜｯ
管理しやすいけど、無駄がある
14年3月15日土曜日

41. 41
grunt-combine-media-queries
メディアクエリ単位で記述する
14年3月15日土曜日

42. 42
grunt-combine-media-queries
・1つのブレークポイントに対して@mediaが
1つなのでソースコードに無駄が少ない
・修正するときは@mediaの箇所を
行ったり来たりするので面倒
・何を書いたかわかりにくい
いいところ (・∀・)♪
わるいところ (´；ω；｀)ﾌﾞﾜｯ
メディアクエリ単位で記述する
14年3月15日土曜日

43. 43
grunt-combine-media-queries
・1つのブレークポイントに対して@mediaが
1つなのでソースコードに無駄が少ない
・修正するときは@mediaの箇所を
行ったり来たりするので面倒
・何を書いたかわかりにくい
いいところ (・∀・)♪
わるいところ (´；ω；｀)ﾌﾞﾜｯ
メディアクエリ単位で記述する
無駄は少ないけど管理しにくい
14年3月15日土曜日

44. 44
grunt-combine-media-queries
・1つのブレークポイントに対して@mediaが
1つなのでソースコードに無駄が少ない
・修正するときは@mediaの箇所を
行ったり来たりするので面倒
・何を書いたかわかりにくい
いいところ (・∀・)♪
わるいところ (´；ω；｀)ﾌﾞﾜｯ
メディアクエリ単位で記述する
管理しやすく、無駄を無くしたい！
14年3月15日土曜日

45. 45
grunt-combine-media-queries
・1つのブレークポイントに対して@mediaが
1つなのでソースコードに無駄が少ない
・修正するときは@mediaの箇所を
行ったり来たりするので面倒
・何を書いたかわかりにくい
いいところ (・∀・)♪
わるいところ (´；ω；｀)ﾌﾞﾜｯ
メディアクエリ単位で記述する
grunt-combine-media-queries
14年3月15日土曜日

46. 46
dev/layout.css（作業） css/layout.css（公開）
grunt-combine-media-queries
14年3月15日土曜日

47. 47
❶
❷ ❶
❷❶
❷
dev/layout.css（作業） css/layout.css（公開）
grunt-combine-media-queries
14年3月15日土曜日

48. 48
❶
❷ ❶
❷❶
❷
dev/layout.css（作業） css/layout.css（公開）
grunt-combine-media-queries
あら、素敵！
14年3月15日土曜日

49. 49
・ベンダープレフィックスを調整する
grunt-autoprefixer
３つ目！
14年3月15日土曜日

50. 50
grunt-autoprefixer
14年3月15日土曜日

51. 51
grunt-autoprefixer
Can I use...
14年3月15日土曜日

52. 52
grunt-autoprefixer
Can I use...
あ、-webkit-ってもう要らないの…
（´・ω・｀）
14年3月15日土曜日

53. 53
grunt-autoprefixer
Can I use...
Compass使ってるから大丈夫さ
14年3月15日土曜日

54. 54
grunt-autoprefixer
@include border-radius(5px);
14年3月15日土曜日

55. 55
grunt-autoprefixer
@include border-radius(5px);
14年3月15日土曜日

56. 56
grunt-autoprefixer
@include border-radius(5px);
あ…（´・ω・｀）
14年3月15日土曜日

57. 57
grunt-autoprefixer
@include border-radius(5px);
14年3月15日土曜日

58. 58
grunt-autoprefixer
@include border-radius(5px);
付けたり、消したり、面倒！
14年3月15日土曜日

59. 59
grunt-autoprefixer
@include border-radius(5px);
grunt-autoprefixer
14年3月15日土曜日

60. 60
grunt-autoprefixer
Can I use...を基準に、ベンダープレフィックスを調整してくれる
14年3月15日土曜日

61. 61
grunt-autoprefixer
14年3月15日土曜日

62. 62
grunt-autoprefixer
あら、素敵！
14年3月15日土曜日

63. 63
その他
公開用のCSSを圧縮する
grunt-contrib-cssmin
grunt-contrib-concat
CSSの重複をチェックする
grunt-csscss
CSSLintをする
grunt-contrib-csslint
圧縮後のCSSにコメントを追加する
14年3月15日土曜日

64. 64
その他
公開用のCSSを圧縮する
grunt-contrib-cssmin
grunt-contrib-concat
CSSの重複をチェックする
grunt-csscss
CSSLintをする
grunt-contrib-csslint
圧縮後のCSSにコメントを追加する
14年3月15日土曜日

65. 65
その他
公開用のCSSを圧縮する
grunt-contrib-cssmin
grunt-contrib-concat
CSSの重複をチェックする
grunt-csscss
CSSLintをする
grunt-contrib-csslint
圧縮後のCSSにコメントを追加する
14年3月15日土曜日

66. 66
その他
公開用のCSSを圧縮する
grunt-contrib-cssmin
grunt-contrib-concat
CSSの重複をチェックする
grunt-csscss
CSSLintをする
grunt-contrib-csslint
圧縮後のCSSにコメントを追加する
14年3月15日土曜日

67. 67
その他
公開用のCSSを圧縮する
grunt-contrib-cssmin
grunt-contrib-concat
CSSの重複をチェックする
grunt-csscss
CSSLintをする
grunt-contrib-csslint
圧縮後のCSSにコメントを追加する
14年3月15日土曜日

68. 68
その他
修正した日を更新したり、その他テキストの置換をする
grunt-text-replace
Sassをコンパイル する
grunt-contrib-sass
Sassファイルの変更を監視する
grunt-contrib-watch
画像の圧縮をする
grunt-contrib-imagemin
14年3月15日土曜日

69. 69
その他
修正した日を更新したり、その他テキストの置換をする
grunt-text-replace
Sassをコンパイル する
grunt-contrib-sass
Sassファイルの変更を監視する
grunt-contrib-watch
画像の圧縮をする
grunt-contrib-imagemin
14年3月15日土曜日

70. 70
その他
修正した日を更新したり、その他テキストの置換をする
grunt-text-replace
Sassをコンパイル する
grunt-contrib-sass
Sassファイルの変更を監視する
grunt-contrib-watch
画像の圧縮をする
grunt-contrib-imagemin
14年3月15日土曜日

71. 71
その他
修正した日を更新したり、その他テキストの置換をする
grunt-text-replace
Sassをコンパイル する
grunt-contrib-sass
Sassファイルの変更を監視する
grunt-contrib-watch
画像の圧縮をする
grunt-contrib-imagemin
14年3月15日土曜日

72. 72
その他
修正した日を更新したり、その他テキストの置換をする
grunt-text-replace
Sassをコンパイル する
grunt-contrib-sass
Sassファイルの変更を監視する
grunt-contrib-watch
画像の圧縮をする
grunt-contrib-imagemin
14年3月15日土曜日

73. 73
その他
とっても便利！
14年3月15日土曜日

74. ありがとうございました。
14年3月15日土曜日