Your SlideShare is downloading. ×
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,353

Published on

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

No Downloads
Views
Total Views
2,353
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
12
Comments
0
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 1つ目! 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 2つ目! 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 3つ目! 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日土曜日

×