Download as PDF, PPTX
CSS Nite LP26 CodeKitで始める次世代Web制作
- 1. 木村哲朗 / 西畑一馬 CodeKitで始める 次世代Web制作
- 2.
- 3.
- 4.
- 5. HTML / CSS マークアップ HTML5/ CSS3 スマートフォンサイト作成 JavaScript / Ajax システム開発
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. Outline •C o deKitとは? •Sass/LESS/Stylusのコンパイル •C o mpassの利用 •C o ffeeScriptなどのコンパイル •ブラウザのオートリロード •C o deKitで施すWebサイト高速化 •プロジェクトの管理と共有 •まとめ
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. CodeKit に D&Dするだけ ドラッグアンドドロップ
- 30. あとは CodeKit におまかせ .scss.less .styl CodeKit 編集・保存 お、更新 されたぞ 更新を監視 .css 自動でコンパイル
- 31.
- 32.
- 33. scss フォルダに style.scss を保存する style.scss style.cssdemocss img js less scss styl index.html
- 34.
- 35.
- 36. less フォルダに style.less を保存する style.less style.cssdemocss img js less scss styl index.html
- 37.
- 38.
- 39. styl フォルダに style.styl を保存する style.css style.styl democss img js less scss styl index.html
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53. Jade / Haml/ Slim / Kit Language のコンパイル CodeKit でできること
- 54.
- 55.
- 56. js フォルダに script.coffee を保存する script.coffee script.js demo css img js less scss styl index.html
- 57.
- 58.
- 59.
- 60.
- 61.
- 63. Adobe Edge Inspect •Adobeから提供されている マルチデバイス開発補助ツール •Mac/PCでのWebブラウジングを スマートフォンなどに同期してくれる •オートリロード機能と組み合わせると 実機確認がとっても楽！ http://html.adobe.com/jp/edge/inspect/
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77. •CodeKitなら環境構築が簡単 •自動的にBlessをかけられる •Compass/Bourbonが利用できる •JSのミニファイ･結合、画像の最適化も可能 •CSS以外のプリプロセッサにも対応 •オートリロード + EdgeInspectで スマートフォンでの実機確認も楽々 •フレームワークの登録･利用が可能 •プロジェクトの設定は共有できる
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90. ありがとうございました 木村哲朗 / 西畑一馬 CodeKitで始める次世代Web制作