Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,215 views

Published on

  • Be the first to comment

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日土曜日

×