CSS Nite LP26 CodeKitで始める次世代Web制作
- 1. 木村哲朗 / 西畑一馬 CodeKit で始める 次世代Web制作
- 5. HTML / CSS マークアップ HTML5 / CSS3 スマートフォンサイト作成 JavaScript / Ajax システム開発
- 7. それまでは ...
- 11. オマエラでも安心。 わーい
- 12. Outline •C o deKitとは? •S ass/LESS/Stylusのコンパイル •C o mpassの利用 •C o ffeeScriptなどのコンパイル •ブラウザのオートリロード •C o deKitで施すWebサイト高速化 •プロジェクトの管理と共有 •まとめ
- 13. What’s CodeKit ?
- 16. 黒い画面とか、 なにそれコワイ。
- 17. CodeKit なら でも
- 19. インストールするだけで
- 22. でも お高いんでしょう？
- 24. ズバリ 今のうちに是非
- 25. お手軽さを ライブデモで！
- 26. 準備
- 28. と言っても
- 29. CodeKit に D&D するだけ ドラッグアンドドロップ
- 30. あとは CodeKit におまかせ .scss .less .styl CodeKit 編集・保存 お、更新 されたぞ 更新を監視 .css 自動でコンパイル
- 32. DEMO Sass のコンパイル
- 33. scss フォルダに style.scss を保存する style.scss style.cssdemo css img js less scss styl index.html
- 34. DEMO
- 35. LESS のコンパイル DEMO
- 36. less フォルダに style.less を保存する style.less style.cssdemo css img js less scss styl index.html
- 37. DEMO
- 39. styl フォルダに style.styl を保存する style.css style.styl demo css img js less scss styl index.html
- 40. DEMO
- 41. びっくりするぐらい 簡単ですね
- 42. ちなみに
- 45. Compass の利用 DEMO
- 50. DEMO
- 51. だけじゃないんです。 奥さん。
- 53. Jade / Haml / Slim / Kit Language のコンパイル CodeKit でできること
- 56. js フォルダに script.coffee を 保存する script.coffee script.js demo css img js less scss styl index.html
- 61. オートリロードの設定
- 63. Adobe Edge Inspect •Adobe から提供されている マルチデバイス開発補助ツール •Mac/PCでのWebブラウジングを スマートフォンなどに同期してくれる •オートリロード機能と組み合わせると 実機確認がとっても楽！ http://html.adobe.com/jp/edge/inspect/
- 64. DEMO
- 69. ミニファイ済ファイル名の設定
- 70. DEMO 画像最適化
- 73. プロジェクト設定を有効にする
- 74. プロジェクトごとの設定をする
- 76. まとめ
- 77. •CodeKitなら環境構築が簡単 •自動的にBlessをかけられる •Compass/Bourbonが利用できる •JSのミニファイ･結合、画像の最適化も可能 •CSS以外のプリプロセッサにも対応 •オートリロード + Edge Inspectで スマートフォンでの実機確認も楽々 •フレームワークの登録･利用が可能 •プロジェクトの設定は共有できる
- 78. これだけの機能を揃えて
- 79. なんと $25 しつこいわね
- 80. まずは10日間 お試しください
- 81. コンパイルとか
- 82. ビルドとか
- 84. CodeKit は足がかり
- 87. 黒い画面への近道かも
- 88. 大丈夫、 怖くない
- 90. ありがとうございました 木村哲朗 / 西畑一馬 CodeKit で始める次世代Web制作