Your SlideShare is downloading. ×
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressで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

WordPressでCSSプリプロセッサ入門

2,968

Published on

2014/03/29 WordBench東京 春のデザイナー祭り!のスライド

2014/03/29 WordBench東京 春のデザイナー祭り!のスライド

Published in: Engineering
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,968
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
15
Comments
0
Likes
12
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. WordPressで CSSプリプロセッサ入門 WordBench Tokyo 2014.03.29
  • 2. 自己紹介
  • 3. Sou-Lab. 森田 壮 @sou_lab フリーランス Web制作者のための Sassの教科書 Web制作者のための SublimeTextの教科書 デザインとかコーディングとか ディレクションとか
  • 4. Ustもやるよ
  • 5. CSSプリプロセッサってなに?
  • 6. CSS Preprocessor CSSメタ言語とも呼ばれる。 CSSを拡張して色々と機能を増やしたもの。 ほかにも色々。数多く存在している。
  • 7. CSS Preprocessor CSSメタ言語とも呼ばれる。 CSSを拡張して色々と機能を増やしたもの。 ほかにも色々。数多く存在している。 SassもLessもStylus もできることは だいたい同じ
  • 8. CSS Preprocessor CSSでできなかったことができるようになる! ・ネスト!(入れ子) ・変数! ・四則演算!(+-*/) ・関数! ・要素の継承!(Mixin,extend) ・制御構文!(ループやif文) ・and more...
  • 9. CSS Preprocessor CSSでできなかったことができるようになる! ・ネスト!(入れ子) ・変数! ・四則演算!(+-*/) ・関数! ・要素の継承!(Mixin,extend) ・制御構文!(ループやif文) ・and more... PHPみたいな ことができるね
  • 10. コンパイル?
  • 11. CSS Preprocessor しかし、そのままではブラウザで動かないので、 CSSにコンパイル(ビルド)する必要がある。 compile!! ※Lessはjsを読み込むことでそのままでも動く
  • 12. コンパイル(ビルド) コンパイルは黒い画面でもGUIコンパイラでもできる。
  • 13. 今回はこれ使います
  • 14. SassとCodeKit 今回はSass(SCSS)とGUIアプリのCodeKitを使います。 +
  • 15. なんでSass?
  • 16. WordPressでよく言われている
  • 17. 巨人の肩に乗れ
  • 18. なんでSass? わたしはこうしてSassを選びました。 ・国内のユーザーが多い ・高機能 ・Compassなどの機能拡張 ・Bootstrap,Foundationなどの  フレームワーク ・本も出てる
  • 19. なんでSass? わたしはこうしてSassを選びました。 ・国内のユーザーが多い ・高機能 ・Compassなどの機能拡張 ・Bootstrap,Foundationなどの  フレームワーク ・本も出てる
  • 20. なんでSass? わたしはこうしてSassを選びました。 ・国内のユーザーが多い ・高機能 ・Compassなどの機能拡張 ・Bootstrap,Foundationなどの  フレームワーク ・本も出てる
  • 21. なんでCodeKit?
  • 22. なんでCodeKit? 今回はCodeKitを選びました。 ・楽だから ・高機能 ・更新頻度が高い 機能的には黒い画面が最強。 でもMac専用 $29
  • 23. Sass Meister http://sassmeister.com/ ブラウザで すぐ試せる
  • 24. WordPressに 便利なSassの機能
  • 25. Sassの基本機能紹介
  • 26. デモ
  • 27. ・ネスト! ・変数! ・四則演算! ・関数! ・要素の継承!
  • 28. ・ネスト! ・変数! ・四則演算! ・関数! ・要素の継承! 便利っしょ?
  • 29. 一行コメント
  • 30. .site-header { background-color: #000; //max-width: 1260px; position: relative; width: 100%; z-index: 4; } .header-main { min-height: 48px; //padding: 0 10px; } 一行コメント 地味に便利
  • 31. パーシャル
  • 32. /* Theme Name: Hoge Theme Theme URI: http://hoge.com/ Author: hogeyama */ ! @import url('common.css'); @import url('module.css'); @import url('style.css'); @import url('print.css'); ダメよ〜 ダメダメ とあるテーマファイル
  • 33. Screw-Axis|[css] @importを使うべきでない理由 ひとつずつCSSを DLしちゃう
  • 34. パーシャル @importするのはCSSと同じだが、 最終的に一つのCSSにコンパイルする。 @import "module; @import "mixin"; @import "form"; @import "reset";
  • 35. パーシャル @importするのはCSSと同じだが、 最終的に一つのCSSにコンパイルする。 compile!! style.css
  • 36. パーシャル @importするのはCSSと同じだが、 最終的に一つのCSSにコンパイルする。 compile!! style.css style.css ひとつでオケ
  • 37. ループ
  • 38. @for $i from 1 through 10 { .mb-#{$i*10} { margin-bottom: #{$i*10}px; } } @for for文で繰り返し
  • 39. @for $i from 1 through 10 { .mb-#{$i*10} { margin-bottom: #{$i*10}px; } } @for for文で繰り返し ループは他にも @whileや@eachも あるんだ
  • 40. .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } @for コンパイルすると...
  • 41. セマンティックさ が無くなるけど、 必要なときもあるよね
  • 42. Jetpack
  • 43. Jetpack WordPressでコンパイルができる 「カスタムCSS」
 を有効化する
  • 44. Jetpack 外観 > CSS編集
  • 45. Jetpack データベースに動的にCSSが生成される
  • 46. Jetpack データベースに動的にCSSが生成される ちょっとした スタイルを適用 するときに使えるね
  • 47. WP-SCSSってのもある
  • 48. 便利そう!! ※試してない
  • 49. まとめ
  • 50. WordPressとか関係なく
  • 51. 使ったほうがいいよ!
  • 52. 使ったほうがいいよ! いいよ!!
  • 53. ありがとうございました @sou_lab Web制作者のための Sassの教科書 Web制作者のための Sublime Text の教科書

×