htmlコーディングの効率化後編

後編 : CSSプリプロセッサー、画像軽量化・CSS3生成HTMLコーディングの効率化とか最近の傾向とか

矢部靖人

2012年10月12日第9回 Knock! Knock!勉強会

・コードを書く、ということ・ Dreamweaver以外の選択肢・ CSSプリプロセッサー・画像軽量化とデザインデータからのCSS3生成

本日のお題

自己紹介

名前：ゃべゃすひと年齢：三十路のなかば住所：長泉町（静岡県の東部）職業：兼業主夫 → 一児の父ちゃん個人事業主（フリーランス） Web制作全般、制作の下請け広告デザイン全般

Webデザイナー↓

Web/DTPデザイナー、フリーペーパーの編集↓

Webディレクター / プランニング / 営業↓

フリーランスのWeb制作者

フェレット飼ってます

よろしくお願いします

3） CSSプリプロセッサー


プリプロセッサーとは

一般にある処理を行うソフトウェアに対して、データ入力やデータ整形などの準備的な処理を行うソフトウェアのことである。

wikipediaより


JavaScriptのプリプロセッサーだと、CoffeeScriptとかTypescriptなどがあります

・ CSSを効率的かつ便利に記述するための拡張言語・ LESS、Sass、Compass、Stylus など・ .flaと.swf / .psdと.jpgのような関係ものをイメージ

CSSプリプロセッサー

生成

生成生成


・ LESSは導入が容易・記述がスマート・変数 / 演算などの便利機能・よく使うプロパティと値をプリセット可能・コーディングミスをアラート

LESSのメリット


メリット１） LESSは導入が容易

JSでコンパイル → 特別な設定が不要導入はHTMLにたった2行追加するだけ


less.jsがやっていることを理解するところで…

head要素内にstyle要素として書き出し

style要素の内容はWeb Strageにキャッシュ（広義のHTML5機能、ブラウザに保存）→ 2回目からはコンパイル不要＝スピードのロスなし


メリット2）記述がスマート

コンパイル前（styles.less）

コンパイル後（styles.css）

importした.lessファイルを結合→ 表示速度の高速化に貢献

importした.cssファイルは結合されない


メリット3）変数 / 演算などの便利機能

変数を設定

値を変数で記述

変数を値に置換

演算を指定

変数を値に置換


メリット4）よく使うプロパティと値をプリセット

書き出し

※ Mixinという機能です

プリセット (Mixin)

Mixinの呼び出し

コーディングミスをアラート


・ JSがオフだとCSSが生成されない・ JSでコンパイルする分、表示速度が低下・そもそもハンドコーディングしてないと…・ Sassなどに比べると貧弱（らしい）・ワークフローの徹底（特にグループ作業）

LESSのデメリット


実際のワークフローでは…開発中 → less.jsでコンパイル納品時 → .cssファイルを生成


・アプリ（Codekit、LESS.appなど）でコンパイル・アプリを立ち上げておくだけでOK （.LESSが更新されると自動で.cssを生成）・生成時に最適化も（コメントやスペース/改行の削除）

.cssファイルの生成

4）画像軽量化 / CSSジェネレーター


PSやFWから書き出した画像は、まだまだ軽量化する余地があります


・画像の最適化（PSやFWで書き出したファイルを更に軽量化）・ LESS / Sass / CoffeeScriptなどのコンパイル・ただしMac専用・有料アプリ（$25）

Codekit


そのほかの画像最適化アプリ Mac ・ImageOptim Win ・PNGGauntlet ・Advanced JPEG Compressor


そもそもですが、画像を使用せず、CSSで再現できれば更に軽くなります（そこで、CSSジェネレーター）

Fireworks CS6の「CSS プロパティ」パネルFWのオブジェクトをCSSに変換もちろんCSS3に対応


＋


CSS Hat ・ PSのレイヤーをCSSに変換・もちろんCSS3に対応・ LESS / Sassなどのコードにも対応・有料プラグイン（$29.99）


ただし、CSS3は対応ブラウザに注意

まとめ

・コーディング不要なアプリ/サービスもスゴい！・とは言え、コードは納品物 = 重要です・コードエディタは“使い分け”も選択肢・ CSSプリプロセッサーはなかなか便利・画像最適化などのツールの動向も抑えておこう

所詮はツール、振り回されないように！

本日はありがとうございました

ご連絡・ご質問など下記までお願いしますE-mail : [email protected] / Twitter : yabecchy

htmlコーディングの効率化 後編

Technology

htmlコーディングの効率化後編