CSSコーディングを効率よくする
おすすめプラグイン @Grunt
14年3月15日土曜日
自己紹介
2
田村章吾
屋号:ましじめ
フリーのマークアップエンジニア
山登りしてます。
ブログ書いてます。
http://tamshow.com/
14年3月15日土曜日
自己紹介
3
田村章吾
屋号:ましじめ
フリーのマークアップエンジニア
山登りしてます。
ブログ書いてます。
http://tamshow.com/
水族館のサイトを作りたいです。
14年3月15日土曜日
4
最近のCSSは複雑
14年3月15日土曜日
最近のCSSは複雑
5
最近どうやってCSS書いていますか?
14年3月15日土曜日
最近のCSSは複雑
6
プリプロセッサー
14年3月15日土曜日
最近のCSSは複雑
7
14年3月15日土曜日
8
最近のCSSは複雑
14年3月15日土曜日
9
最近のCSSは複雑
ポストプロセッサー
14年3月15日土曜日
10
最近のCSSは複雑
Minify
14年3月15日土曜日
11
最近のCSSは複雑
CSS LINT
Minify
14年3月15日土曜日
12
最近のCSSは複雑
CSS LINT
Autoprefixer
Minify
14年3月15日土曜日
13
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
14年3月15日土曜日
14
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
pngquant
14年3月15日土曜日
15
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
pngquant
最近のCSSコーディングは
する事がいっぱい。
14年3月15日土曜日
16
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
pngquant
面倒な作業は自動化しましょう
14年3月15日土曜日
17
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
pngquant
Grunt
14年3月15日土曜日
18
最近のCSSは複雑
CSS LINT
Autoprefixer
MediaQueries
Minify
pngquant
14年3月15日土曜日
19
プラグイン
おすすめプラグイン紹介
14年3月15日土曜日
20
・CSSのスタイルガイドを作る
grunt-styleguide
1つ目!
14年3月15日土曜日
21
http://jacobrask.github.io/styledocco/
Style Docco
サイトごとにスタイルガイドが作成出来る
grunt-styleguide
14年3月15日土曜日
22
http://jacobrask.github.io/styledocco/
Style Docco
サイトごとにスタイルガイドが作成出来る
grunt-styleguide
Node.jsを使った、
スタイルガイドジェネレーター
14年...
23
grunt-styleguide
14年3月15日土曜日
24
grunt-styleguide
CSSにマークダウンでコメントを記述
14年3月15日土曜日
25
grunt-styleguide
コマンドを叩けばOK
14年3月15日土曜日
26
grunt-styleguide
styledocco -n "Style Guide" css/style.css
14年3月15日土曜日
27
grunt-styleguide
14年3月15日土曜日
28
grunt-styleguide
でも、修正の度に作るのは
 面倒くさいなぁ…(´・ω・`)
14年3月15日土曜日
29
grunt-styleguide
grunt-styleguide
14年3月15日土曜日
30
grunt-styleguide
CSSを修正するだけで勝手に作成
14年3月15日土曜日
31
grunt-styleguide
14年3月15日土曜日
32
grunt-styleguide
こんな使い方してます
14年3月15日土曜日
33
grunt-styleguide
14年3月15日土曜日
34
grunt-styleguide
HTMLがちょっと分かる人は
更新してくれる (・∀・)♪
14年3月15日土曜日
35
grunt-styleguide
あら、素敵!
14年3月15日土曜日
36
・CSSファイル内のMediaQueriesをまとめる
grunt-combine-media-queries
2つ目!
14年3月15日土曜日
37
・CSSファイル内のMediaQueriesをまとめる
grunt-combine-media-queries
メディアクエリの管理って面倒
14年3月15日土曜日
38
パーツ単位で記述する
grunt-combine-media-queries
14年3月15日土曜日
39
パーツ単位で記述する
grunt-combine-media-queries
・@mediaを書く場所が近いので
 何を書いたかすぐ分かる
・関連する箇所の修正が楽
・@mediaの記述が増える
・ファイルサイズを圧迫
いいところ (・∀...
40
パーツ単位で記述する
grunt-combine-media-queries
・@mediaを書く場所が近いので
 何を書いたかすぐ分かる
・関連する箇所の修正が楽
・@mediaの記述が増える
・ファイルサイズを圧迫
いいところ (・∀...
41
grunt-combine-media-queries
メディアクエリ単位で記述する
14年3月15日土曜日
42
grunt-combine-media-queries
・1つのブレークポイントに対して@mediaが
 1つなのでソースコードに無駄が少ない
・修正するときは@mediaの箇所を
 行ったり来たりするので面倒
・何を書いたかわかりにくい...
43
grunt-combine-media-queries
・1つのブレークポイントに対して@mediaが
 1つなのでソースコードに無駄が少ない
・修正するときは@mediaの箇所を
 行ったり来たりするので面倒
・何を書いたかわかりにくい...
44
grunt-combine-media-queries
・1つのブレークポイントに対して@mediaが
 1つなのでソースコードに無駄が少ない
・修正するときは@mediaの箇所を
 行ったり来たりするので面倒
・何を書いたかわかりにくい...
45
grunt-combine-media-queries
・1つのブレークポイントに対して@mediaが
 1つなのでソースコードに無駄が少ない
・修正するときは@mediaの箇所を
 行ったり来たりするので面倒
・何を書いたかわかりにくい...
46
dev/layout.css(作業) css/layout.css(公開)
grunt-combine-media-queries
14年3月15日土曜日
47
❶
❷ ❶
❷❶
❷
dev/layout.css(作業) css/layout.css(公開)
grunt-combine-media-queries
14年3月15日土曜日
48
❶
❷ ❶
❷❶
❷
dev/layout.css(作業) css/layout.css(公開)
grunt-combine-media-queries
あら、素敵!
14年3月15日土曜日
49
・ベンダープレフィックスを調整する
grunt-autoprefixer
3つ目!
14年3月15日土曜日
50
grunt-autoprefixer
14年3月15日土曜日
51
grunt-autoprefixer
Can I use...
14年3月15日土曜日
52
grunt-autoprefixer
Can I use...
あ、-webkit-ってもう要らないの…
(´・ω・`)
14年3月15日土曜日
53
grunt-autoprefixer
Can I use...
Compass使ってるから大丈夫さ
14年3月15日土曜日
54
grunt-autoprefixer
@include border-radius(5px);
14年3月15日土曜日
55
grunt-autoprefixer
@include border-radius(5px);
14年3月15日土曜日
56
grunt-autoprefixer
@include border-radius(5px);
あ…(´・ω・`)
14年3月15日土曜日
57
grunt-autoprefixer
@include border-radius(5px);
14年3月15日土曜日
58
grunt-autoprefixer
@include border-radius(5px);
付けたり、消したり、面倒!
14年3月15日土曜日
59
grunt-autoprefixer
@include border-radius(5px);
grunt-autoprefixer
14年3月15日土曜日
60
grunt-autoprefixer
Can I use...を基準に、ベンダープレフィックスを調整してくれる
14年3月15日土曜日
61
grunt-autoprefixer
14年3月15日土曜日
62
grunt-autoprefixer
あら、素敵!
14年3月15日土曜日
63
その他
公開用のCSSを圧縮する
grunt-contrib-cssmin
grunt-contrib-concat
CSSの重複をチェックする
grunt-csscss
CSSLintをする
grunt-contrib-csslint
...
64
その他
公開用のCSSを圧縮する
grunt-contrib-cssmin
grunt-contrib-concat
CSSの重複をチェックする
grunt-csscss
CSSLintをする
grunt-contrib-csslint
...
65
その他
公開用のCSSを圧縮する
grunt-contrib-cssmin
grunt-contrib-concat
CSSの重複をチェックする
grunt-csscss
CSSLintをする
grunt-contrib-csslint
...
66
その他
公開用のCSSを圧縮する
grunt-contrib-cssmin
grunt-contrib-concat
CSSの重複をチェックする
grunt-csscss
CSSLintをする
grunt-contrib-csslint
...
67
その他
公開用のCSSを圧縮する
grunt-contrib-cssmin
grunt-contrib-concat
CSSの重複をチェックする
grunt-csscss
CSSLintをする
grunt-contrib-csslint
...
68
その他
修正した日を更新したり、その他テキストの置換をする
grunt-text-replace
Sassをコンパイル する
grunt-contrib-sass
Sassファイルの変更を監視する
grunt-contrib-watch
...
69
その他
修正した日を更新したり、その他テキストの置換をする
grunt-text-replace
Sassをコンパイル する
grunt-contrib-sass
Sassファイルの変更を監視する
grunt-contrib-watch
...
70
その他
修正した日を更新したり、その他テキストの置換をする
grunt-text-replace
Sassをコンパイル する
grunt-contrib-sass
Sassファイルの変更を監視する
grunt-contrib-watch
...
71
その他
修正した日を更新したり、その他テキストの置換をする
grunt-text-replace
Sassをコンパイル する
grunt-contrib-sass
Sassファイルの変更を監視する
grunt-contrib-watch
...
72
その他
修正した日を更新したり、その他テキストの置換をする
grunt-text-replace
Sassをコンパイル する
grunt-contrib-sass
Sassファイルの変更を監視する
grunt-contrib-watch
...
73
その他
とっても便利!
14年3月15日土曜日
ありがとうございました。
14年3月15日土曜日
Upcoming SlideShare
Loading in …5
×

CSSコーディングを効率よくするおすすめプラグイン

3,017 views
2,902 views

Published on

0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,017
On SlideShare
0
From Embeds
0
Number of Embeds
259
Actions
Shares
0
Downloads
17
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

CSSコーディングを効率よくするおすすめプラグイン

  1. 1. CSSコーディングを効率よくする おすすめプラグイン @Grunt 14年3月15日土曜日
  2. 2. 自己紹介 2 田村章吾 屋号:ましじめ フリーのマークアップエンジニア 山登りしてます。 ブログ書いてます。 http://tamshow.com/ 14年3月15日土曜日
  3. 3. 自己紹介 3 田村章吾 屋号:ましじめ フリーのマークアップエンジニア 山登りしてます。 ブログ書いてます。 http://tamshow.com/ 水族館のサイトを作りたいです。 14年3月15日土曜日
  4. 4. 4 最近のCSSは複雑 14年3月15日土曜日
  5. 5. 最近のCSSは複雑 5 最近どうやってCSS書いていますか? 14年3月15日土曜日
  6. 6. 最近のCSSは複雑 6 プリプロセッサー 14年3月15日土曜日
  7. 7. 最近のCSSは複雑 7 14年3月15日土曜日
  8. 8. 8 最近のCSSは複雑 14年3月15日土曜日
  9. 9. 9 最近のCSSは複雑 ポストプロセッサー 14年3月15日土曜日
  10. 10. 10 最近のCSSは複雑 Minify 14年3月15日土曜日
  11. 11. 11 最近のCSSは複雑 CSS LINT Minify 14年3月15日土曜日
  12. 12. 12 最近のCSSは複雑 CSS LINT Autoprefixer Minify 14年3月15日土曜日
  13. 13. 13 最近のCSSは複雑 CSS LINT Autoprefixer MediaQueries Minify 14年3月15日土曜日
  14. 14. 14 最近のCSSは複雑 CSS LINT Autoprefixer MediaQueries Minify pngquant 14年3月15日土曜日
  15. 15. 15 最近のCSSは複雑 CSS LINT Autoprefixer MediaQueries Minify pngquant 最近のCSSコーディングは する事がいっぱい。 14年3月15日土曜日
  16. 16. 16 最近のCSSは複雑 CSS LINT Autoprefixer MediaQueries Minify pngquant 面倒な作業は自動化しましょう 14年3月15日土曜日
  17. 17. 17 最近のCSSは複雑 CSS LINT Autoprefixer MediaQueries Minify pngquant Grunt 14年3月15日土曜日
  18. 18. 18 最近のCSSは複雑 CSS LINT Autoprefixer MediaQueries Minify pngquant 14年3月15日土曜日
  19. 19. 19 プラグイン おすすめプラグイン紹介 14年3月15日土曜日
  20. 20. 20 ・CSSのスタイルガイドを作る grunt-styleguide 1つ目! 14年3月15日土曜日
  21. 21. 21 http://jacobrask.github.io/styledocco/ Style Docco サイトごとにスタイルガイドが作成出来る grunt-styleguide 14年3月15日土曜日
  22. 22. 22 http://jacobrask.github.io/styledocco/ Style Docco サイトごとにスタイルガイドが作成出来る grunt-styleguide Node.jsを使った、 スタイルガイドジェネレーター 14年3月15日土曜日
  23. 23. 23 grunt-styleguide 14年3月15日土曜日
  24. 24. 24 grunt-styleguide CSSにマークダウンでコメントを記述 14年3月15日土曜日
  25. 25. 25 grunt-styleguide コマンドを叩けばOK 14年3月15日土曜日
  26. 26. 26 grunt-styleguide styledocco -n "Style Guide" css/style.css 14年3月15日土曜日
  27. 27. 27 grunt-styleguide 14年3月15日土曜日
  28. 28. 28 grunt-styleguide でも、修正の度に作るのは  面倒くさいなぁ…(´・ω・`) 14年3月15日土曜日
  29. 29. 29 grunt-styleguide grunt-styleguide 14年3月15日土曜日
  30. 30. 30 grunt-styleguide CSSを修正するだけで勝手に作成 14年3月15日土曜日
  31. 31. 31 grunt-styleguide 14年3月15日土曜日
  32. 32. 32 grunt-styleguide こんな使い方してます 14年3月15日土曜日
  33. 33. 33 grunt-styleguide 14年3月15日土曜日
  34. 34. 34 grunt-styleguide HTMLがちょっと分かる人は 更新してくれる (・∀・)♪ 14年3月15日土曜日
  35. 35. 35 grunt-styleguide あら、素敵! 14年3月15日土曜日
  36. 36. 36 ・CSSファイル内のMediaQueriesをまとめる grunt-combine-media-queries 2つ目! 14年3月15日土曜日
  37. 37. 37 ・CSSファイル内のMediaQueriesをまとめる grunt-combine-media-queries メディアクエリの管理って面倒 14年3月15日土曜日
  38. 38. 38 パーツ単位で記述する grunt-combine-media-queries 14年3月15日土曜日
  39. 39. 39 パーツ単位で記述する grunt-combine-media-queries ・@mediaを書く場所が近いので  何を書いたかすぐ分かる ・関連する箇所の修正が楽 ・@mediaの記述が増える ・ファイルサイズを圧迫 いいところ (・∀・)♪ わるいところ (´;ω;`)ブワッ 14年3月15日土曜日
  40. 40. 40 パーツ単位で記述する grunt-combine-media-queries ・@mediaを書く場所が近いので  何を書いたかすぐ分かる ・関連する箇所の修正が楽 ・@mediaの記述が増える ・ファイルサイズを圧迫 いいところ (・∀・)♪ わるいところ (´;ω;`)ブワッ 管理しやすいけど、無駄がある 14年3月15日土曜日
  41. 41. 41 grunt-combine-media-queries メディアクエリ単位で記述する 14年3月15日土曜日
  42. 42. 42 grunt-combine-media-queries ・1つのブレークポイントに対して@mediaが  1つなのでソースコードに無駄が少ない ・修正するときは@mediaの箇所を  行ったり来たりするので面倒 ・何を書いたかわかりにくい いいところ (・∀・)♪ わるいところ (´;ω;`)ブワッ メディアクエリ単位で記述する 14年3月15日土曜日
  43. 43. 43 grunt-combine-media-queries ・1つのブレークポイントに対して@mediaが  1つなのでソースコードに無駄が少ない ・修正するときは@mediaの箇所を  行ったり来たりするので面倒 ・何を書いたかわかりにくい いいところ (・∀・)♪ わるいところ (´;ω;`)ブワッ メディアクエリ単位で記述する 無駄は少ないけど管理しにくい 14年3月15日土曜日
  44. 44. 44 grunt-combine-media-queries ・1つのブレークポイントに対して@mediaが  1つなのでソースコードに無駄が少ない ・修正するときは@mediaの箇所を  行ったり来たりするので面倒 ・何を書いたかわかりにくい いいところ (・∀・)♪ わるいところ (´;ω;`)ブワッ メディアクエリ単位で記述する 管理しやすく、無駄を無くしたい! 14年3月15日土曜日
  45. 45. 45 grunt-combine-media-queries ・1つのブレークポイントに対して@mediaが  1つなのでソースコードに無駄が少ない ・修正するときは@mediaの箇所を  行ったり来たりするので面倒 ・何を書いたかわかりにくい いいところ (・∀・)♪ わるいところ (´;ω;`)ブワッ メディアクエリ単位で記述する grunt-combine-media-queries 14年3月15日土曜日
  46. 46. 46 dev/layout.css(作業) css/layout.css(公開) grunt-combine-media-queries 14年3月15日土曜日
  47. 47. 47 ❶ ❷ ❶ ❷❶ ❷ dev/layout.css(作業) css/layout.css(公開) grunt-combine-media-queries 14年3月15日土曜日
  48. 48. 48 ❶ ❷ ❶ ❷❶ ❷ dev/layout.css(作業) css/layout.css(公開) grunt-combine-media-queries あら、素敵! 14年3月15日土曜日
  49. 49. 49 ・ベンダープレフィックスを調整する grunt-autoprefixer 3つ目! 14年3月15日土曜日
  50. 50. 50 grunt-autoprefixer 14年3月15日土曜日
  51. 51. 51 grunt-autoprefixer Can I use... 14年3月15日土曜日
  52. 52. 52 grunt-autoprefixer Can I use... あ、-webkit-ってもう要らないの… (´・ω・`) 14年3月15日土曜日
  53. 53. 53 grunt-autoprefixer Can I use... Compass使ってるから大丈夫さ 14年3月15日土曜日
  54. 54. 54 grunt-autoprefixer @include border-radius(5px); 14年3月15日土曜日
  55. 55. 55 grunt-autoprefixer @include border-radius(5px); 14年3月15日土曜日
  56. 56. 56 grunt-autoprefixer @include border-radius(5px); あ…(´・ω・`) 14年3月15日土曜日
  57. 57. 57 grunt-autoprefixer @include border-radius(5px); 14年3月15日土曜日
  58. 58. 58 grunt-autoprefixer @include border-radius(5px); 付けたり、消したり、面倒! 14年3月15日土曜日
  59. 59. 59 grunt-autoprefixer @include border-radius(5px); grunt-autoprefixer 14年3月15日土曜日
  60. 60. 60 grunt-autoprefixer Can I use...を基準に、ベンダープレフィックスを調整してくれる 14年3月15日土曜日
  61. 61. 61 grunt-autoprefixer 14年3月15日土曜日
  62. 62. 62 grunt-autoprefixer あら、素敵! 14年3月15日土曜日
  63. 63. 63 その他 公開用のCSSを圧縮する grunt-contrib-cssmin grunt-contrib-concat CSSの重複をチェックする grunt-csscss CSSLintをする grunt-contrib-csslint 圧縮後のCSSにコメントを追加する 14年3月15日土曜日
  64. 64. 64 その他 公開用のCSSを圧縮する grunt-contrib-cssmin grunt-contrib-concat CSSの重複をチェックする grunt-csscss CSSLintをする grunt-contrib-csslint 圧縮後のCSSにコメントを追加する 14年3月15日土曜日
  65. 65. 65 その他 公開用のCSSを圧縮する grunt-contrib-cssmin grunt-contrib-concat CSSの重複をチェックする grunt-csscss CSSLintをする grunt-contrib-csslint 圧縮後のCSSにコメントを追加する 14年3月15日土曜日
  66. 66. 66 その他 公開用のCSSを圧縮する grunt-contrib-cssmin grunt-contrib-concat CSSの重複をチェックする grunt-csscss CSSLintをする grunt-contrib-csslint 圧縮後のCSSにコメントを追加する 14年3月15日土曜日
  67. 67. 67 その他 公開用のCSSを圧縮する grunt-contrib-cssmin grunt-contrib-concat CSSの重複をチェックする grunt-csscss CSSLintをする grunt-contrib-csslint 圧縮後のCSSにコメントを追加する 14年3月15日土曜日
  68. 68. 68 その他 修正した日を更新したり、その他テキストの置換をする grunt-text-replace Sassをコンパイル する grunt-contrib-sass Sassファイルの変更を監視する grunt-contrib-watch 画像の圧縮をする grunt-contrib-imagemin 14年3月15日土曜日
  69. 69. 69 その他 修正した日を更新したり、その他テキストの置換をする grunt-text-replace Sassをコンパイル する grunt-contrib-sass Sassファイルの変更を監視する grunt-contrib-watch 画像の圧縮をする grunt-contrib-imagemin 14年3月15日土曜日
  70. 70. 70 その他 修正した日を更新したり、その他テキストの置換をする grunt-text-replace Sassをコンパイル する grunt-contrib-sass Sassファイルの変更を監視する grunt-contrib-watch 画像の圧縮をする grunt-contrib-imagemin 14年3月15日土曜日
  71. 71. 71 その他 修正した日を更新したり、その他テキストの置換をする grunt-text-replace Sassをコンパイル する grunt-contrib-sass Sassファイルの変更を監視する grunt-contrib-watch 画像の圧縮をする grunt-contrib-imagemin 14年3月15日土曜日
  72. 72. 72 その他 修正した日を更新したり、その他テキストの置換をする grunt-text-replace Sassをコンパイル する grunt-contrib-sass Sassファイルの変更を監視する grunt-contrib-watch 画像の圧縮をする grunt-contrib-imagemin 14年3月15日土曜日
  73. 73. 73 その他 とっても便利! 14年3月15日土曜日
  74. 74. ありがとうございました。 14年3月15日土曜日

×