Htmlコーディングの効率化 後編
?
1 like?1,531 views
「9th Knock!」 第9回Knock! Knock! 勉強会（2012年10月12日、B-nest静岡市産学交流センターにて） http://knock3.hamnaly.com/vol09/
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）颁厂厂プリプロセッサー プリプロセッサーとは 一般にある処理を行う トウ アに対し ソフ ェ て、 データ入力やデータ整形などの 準備的な処理を行う トウ アの とである。 ソフ ェ こ wikipediaより
- 10. 3）颁厂厂プリプロセッサー CSSプリプロセッサー ?CSSを効率的かつ便利に記述する ための拡張言語 ?LESS、 Sass、 Compass、 Stylus など ?.?aと.swf / .psdと.jpgの う よ な関係も のをイメージ 生成 生成 生成 JavaScriptのプリプロセッサーだと、Co?eeScriptとかTypescriptなどがあ ます り
- 12. 3）颁厂厂プリプロセッサー LESSのメ ッ リ ト ? LESSは導入が容易 ? 記述がスマート ? 変数 / 演算などの便利機能 ? よ 使う く プロパテ と値をプリセッ ィ ト可能 ? コーデ ングミスをアラート ィ
- 13. 3）颁厂厂プリプロセッサー メ ッ １）LESSは導入が容易 リ ト
- 14. JSでコンパイ → 特別な設定が不要 ル 導入はHTMLにたった2行追加するだけ
- 17. style要素の内容はWeb Strageにキャッシュ （広義のHTML5機能、 ブラウザに保存） → 2回目からはコンパイ ル不要 ＝ スピードのロスなし
- 18. 3）颁厂厂プリプロセッサー メ ッ リ ト2）记述がスマート
- 19. コンパイ ル前 コンパイ ル後 （styles.less） （styles.css）
- 20. importした.lessファ ルを結合 イ → 表示速度の高速化に貢献 importした.cssファ ルは結合されない イ
- 21. 3）颁厂厂プリプロセッサー メ ッ リ ト3）変数 / 演算などの便利機能
- 22. 変数を设定 変数を値に置換 値を変数で記述
- 23. 変数を値に置換 演算を指定
- 24. 3）颁厂厂プリプロセッサー メ ッ 4）よ 使う リ ト く プロパテ と値をプリセ ト ィ ッ
- 25. プリセッ (Mixin) ト 書き出し ※ Mixinという機能です Mixinの呼び出し
- 26. コーデ ングミスをアラート ィ
- 27. 3）颁厂厂プリプロセッサー LESSのデメ ッ リ ト ? JSがオフだとCSSが生成されない ? JSでコンパイ ルする分、 表示速度が低下 ? そも そもハンドコーデ ングしてないと… ィ ? Sassなどに比べると貧弱 （らしい） ? ワーク フローの徹底 （特にグループ作業）
- 28. 3）颁厂厂プリプロセッサー 実際のワーク フローでは… 開発中 → less.jsでコンパイル 納品時 → .cssフ イ ァ ルを生成
- 29. 3）颁厂厂プリプロセッサー .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