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

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

  • 1,756 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,756
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
9
Comments
0
Likes
15

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