Htmlコーディングの効率化 後編
•
1 recomendación•1,530 vistas
「9th Knock!」 第9回Knock! Knock! 勉強会（2012年10月12日、B-nest静岡市産学交流センターにて） http://knock3.hamnaly.com/vol09/
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Htmlコーディングの効率化 後編
Similar a Htmlコーディングの効率化 後編 (20)
Más de Yasuhito Yabe
Más de Yasuhito Yabe (16)
Htmlコーディングの効率化 後編
- 1. HTMLコーデ ングの効率化 ィ とか最近の傾向とか 後編 : CSSプリプロセッサー、画像軽量化 CSS3生成 ・ 2012年10月12日 第9回 Knock! Knock!勉強会 矢部靖人
- 2. 本日のお題 ・ コードを書く、 う と とい こ ・ Dreamweaver以外の選択肢 ・ CSSプリプロセッサー ・ 画像軽量化とデザイ ンデータからのCSS3生成
- 3. 自己紹介
- 4. 名 前：ゃべ ゃすひと 年 齢：三十路のなかば 住 所：長泉町 （静岡県の東部） 職 業：兼業主夫 → 一児の父ちゃん 個人事業主 リーランス） （フ Web制作全般、 制作の下請け 広告デザ ン全般 イ
- 5. Webデザ イナー ↓ Web/DTPデザイナー、 リーペーパーの編集 フ ↓ Webデ レク ィ ター / プランニング / 営業 ↓ フリーラン のWeb制作者 ス
- 6. フ レット飼 っ ェ てます
- 7. よろしく 願いし お ます
- 9. 3）CSSプリプロセッサー プリプロセッサーとは 一般にある処理を行う トウ アに対し ソフ ェ て、 データ入力やデータ整形などの 準備的な処理を行う トウ アの とである。 ソフ ェ こ wikipediaより
- 10. 3）CSSプリプロセッサー CSSプリプロセッサー ・CSSを効率的かつ便利に記述する ための拡張言語 ・LESS、 Sass、 Compass、 Stylus など ・.flaと.swf / .psdと.jpgの う よ な関係も のをイメージ 生成 生成 生成 JavaScriptのプリプロセッサーだと、CoffeeScriptとかTypescriptなどがあ ます り
- 12. 3）CSSプリプロセッサー LESSのメ ッ リ ト ・ LESSは導入が容易 ・ 記述がスマート ・ 変数 / 演算などの便利機能 ・ よ 使う く プロパテ と値をプリセッ ィ ト可能 ・ コーデ ングミスをアラート ィ
- 13. 3）CSSプリプロセッサー メ ッ １）LESSは導入が容易 リ ト
- 14. JSでコンパイ → 特別な設定が不要 ル 導入はHTMLにたった2行追加するだけ
- 17. style要素の内容はWeb Strageにキャッシュ （広義のHTML5機能、 ブラウザに保存） → 2回目からはコンパイ ル不要 ＝ スピードのロスなし
- 18. 3）CSSプリプロセッサー メ ッ リ ト2）記述がスマート
- 19. コンパイ ル前 コンパイ ル後 （styles.less） （styles.css）
- 20. importした.lessファ ルを結合 イ → 表示速度の高速化に貢献 importした.cssファ ルは結合されない イ
- 21. 3）CSSプリプロセッサー メ ッ リ ト3）変数 / 演算などの便利機能
- 22. 変数を設定 変数を値に置換 値を変数で記述
- 23. 変数を値に置換 演算を指定
- 24. 3）CSSプリプロセッサー メ ッ 4）よ 使う リ ト く プロパテ と値をプリセ ト ィ ッ
- 25. プリセッ (Mixin) ト 書き出し ※ Mixinという機能です Mixinの呼び出し
- 26. コーデ ングミスをアラート ィ
- 27. 3）CSSプリプロセッサー LESSのデメ ッ リ ト ・ JSがオフだとCSSが生成されない ・ JSでコンパイ ルする分、 表示速度が低下 ・ そも そもハンドコーデ ングしてないと… ィ ・ Sassなどに比べると貧弱 （らしい） ・ ワーク フローの徹底 （特にグループ作業）
- 28. 3）CSSプリプロセッサー 実際のワーク フローでは… 開発中 → less.jsでコンパイル 納品時 → .cssフ イ ァ ルを生成
- 29. 3）CSSプリプロセッサー .cssフ イ ァ ルの生成 ・ アプリ（Codekit、LESS.appなど）でコンパイル ・ アプリを立ち上げておく だけでOK （.LESSが更新される と自動で.cssを生成） ・ 生成時に最適化も メン スペース/改行の削除） （コ トや
- 33. 4）画像軽量化 / CSSジェネレーター Codekit ・ 画像の最適化 （PSやFWで書き出した イ ファ ルを更に軽量化） ・ LESS / Sass / CoffeeScriptなどのコンパイル ・ ただしMac専用 ・ 有料アプリ （$25）
- 34. 4）画像軽量化 / CSSジェネレーター そのほかの画像最適化アプリ Mac ・ImageOptim Win ・PNGGauntlet ・Advanced JPEG Compressor
- 35. 4）画像軽量化 / CSSジェネレーター そも ですが、 そも 画像を使用せず、 CSSで再現できれば更に軽く りな ます （そこで、 CSSジェネレーター）
- 40. Fireworks CS6の 「CSS プロパテ パネル ィ」 FWのオブジェ トをCSSに変換 ク もちろんCSS3に対応
- 43. 4）画像軽量化 / CSSジェネレーター CSS Hat ・ PSのレイヤーをCSSに変換 ・も ちろんCSS3に対応 ・ LESS / Sassなどのコードにも対応 ・ 有料プラグ ン イ （$29.99）
- 45. 4）画像軽量化 / CSSジェネレーター ただし、CSS3 は対応ブラウザに注意
- 46. まとめ
- 47. ・ コーデ ング不要なアプリ/サービスもスゴい ィ ！ ・ とは言え、 コードは納品物 = 重要です ・ コードエデ タは ィ “使い分け” も選択肢 ・ CSSプリプロセッサーはなかなか便利 ・ 画像最適化などのツールの動向も抑えておこ う
- 48. 所詮はツール、振り回されないよ に う ！
- 49. 本日はあ がと ございま り う した ご連絡 ご質問など下記までお願いし ・ ます E-mail : info@hamnaly.com Facebook / Twitter : yabecchy