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