Upload
yasuhito-yabe
View
1.402
Download
1
Embed Size (px)
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プリプロセッサー
メリット1) 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 : [email protected] / Twitter : yabecchy