ツールを上手く利用して、読込み・コーディングスピード両方の高速化を目指しましょう！
コーディングの何が変わったの？
まず、モバイルファーストのコーディングは手間がかかると前述しましたが、今までと何が変わったのかという点についてです。
手間がかかるという点については私個人だけの意見かもしれませんが…
変わった点を簡潔にいえば、『“より高機能”な案件専用のcssフレームワークを作成する』ことになったという感じです。
変わった理由をざっと挙げますと、
- 読込み速度を考慮しなければならない
→ いろんなテクが必要 - css3で大抵表現できる
→ スタイルパーツを作り込まなければならない - デザインに関しては、IEのような縛りがないため様々な技術が使える
→ 使用技術の選択幅が広がり最適なものを選択できる知識が必要
と言ったところでしょうか（もっとあるでしょうが）。
そのため今まではハサミで切って糊でペタペタ工作していた感覚のですが、
- ちゃんと図面を描く（CSS設計）
- 要素を抽出する（グラデ・シャドー…を数値化、フォント作成などなど）
- HTTPリクエストを減らすためのその他工夫
などなど…楽しいけど大変でもあるのです。
ちょっと愚痴っぽくなりましたが何となくでもニュアンスが伝わればww
ツール
さて、本題のツールまとめです。
私が最近よく使っているものを主にまとめています。
CSS3ジェネレーター
今更説明するまでもないですが、css3はプロパティがたくさんあり記述方法も複雑なのでジェネレーターを使えば簡単に書き出せます。
下記にまとめがあります。
【CSS3】これはやばい！覚えなくてもすぐに使える便利なCSS3ジェネレータまとめ。
ちなみに、私の場合グラデーションならUltimate CSS Gradient Generatorが好みです。
Photoshopに近い感覚で使用できて、SCSSの出力も対応していますのでお勧めです。
グラデーション以外も色々あるので気に入ったものを使ってください。
Emmet
これはお馴染み、ZEN-codingの次期バージョンですが、先日やっとDreamweaver用も追加されたようですね。
コードをショートカット＋スニペットで簡略化できます。
どんなものかわからない人はぜひトップページのDemoを再生してみて下さい。
Sublime Text
こちらもお馴染み“恋に落ちるエディタ” Sublime Textです。
エディタは好みがはっきりわかれるところですが、トップページのDemoを見てワクワクしちゃいませんか？？
初めて見た時は「まっ魔法や！」と驚きました、はい。
皆さんが乗り換えるだけの価値はありますね。と言いながらメインエディタではないのですがww
「やべ、使いたい」となった人は、ドットインストール Sublime Text 2入門で勉強してみてはいかがでしょうか。
web font作成
こちらも種類は様々です。
パッケージのものを使用すると使わないデータのせいでサイズが大きくなりがちなので、使うのもだけカスタマイズしたほうがいいです。
カスタマイズできるサービスは次のようなものがあります。
・Fontello
使いたいフォントを選んでウェブフォントにできるサービスです。
・IcoMoon
こちらも使いたいフォントを選択して書き出せます。
SVGデータをインポートできるので、オリジナルアイコンも簡単に作れます。
※最近Illustratorを開く頻度が極端に増えました
使用上の注意ですが、ライセンスを確認するようにしてください。
CSSの図形
cssでやる必要があるかは微妙ですが、タグひとつで色々な表現がでます。
こちら色々なサンプルがあるので、参考にしてみてください。
また、三角形は吹き出しなどでよく使いますので特化したジェネレーターが重宝します。
5重線
何重にも囲まれたボックスのためにタグを使うのはよろしくないと思っていたところ、5重線まではタグ1つでいけるサンプルを見つけました。
ソースを見れもらえばわかると思いますが、before・afterの疑似要素と、borderとbackground-color、positonなどを駆使して表現されています。
サイズを可変幅にすることができますので、スマホでも安心です。
DETA URI SCHEME
外部データ無しにウェブページにデータを埋めこむためのURI schemeです。
長くなりそうなので詳細は割愛しますが、画像を下記のようにbase64にエンコードして、それをHTMLやcss内に貼り付ける技術です。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkIBIwIqtTK774H5u+W736jOQrBOlGtwWridRRaF51HOyJ9z+5GGAmoosxIguAFIMUYhMDC4JMggGYQnQxsA9h4YfsEXQxAAV7TAtxjVbYAAAAAElFTkSuQmCC直接埋め込むため、画像取得のHTTPリクエストを減らすことができます。
ただし写真などの大きな画像でこれを使うと、表示に余計時間がかかるなどの問題があったりするので使いどころには注意が必要です。
参考までに、Google画像検索のサムネイル画像はこの技術が使われています。
Google画像検索：猫
ドット絵感覚で作成できるサービスPatternifyや画像をアップして変換できるdata URI scheme 変換ツールなどがあります。
Photoshop
Photoshopを拡張するJSXというスクリプトがあります。
フォトショにあったらいいな思う機能が拡張できたりしますので、探してみてください。
他にもあるかもしれませんが、下記ページにまとめられています。
個人的には[β版] Photoshopのグラデーションオーバーレイ設定を取得するスクリプトがお勧めです。
わざわざ設定画面を開いて抽出するのは手間なので重宝します。
Ver.0.3.2ではSassに対応したということで至れり尽くせりです！
また、Adobeグラフィックアプリからcssを書き出すことができます。
PhotoshopはCS6から実装されたようですね（cs6使ったことがないので詳しくはわかりませんが…）。
Fireworksにも同機能がありますし、IllustratorもCC版から実装されるとか。
それ以外にも、CSS Hatという有料アプリがあり、こちらはPhotoshopのデータからcssを生成できるようです。
これらの機能ですが、無駄なスタイルの書き出しが多く、精度もまだまだというような声を聞きました。でもちょっと手を加えればマシなスタイルになると思うのでレイヤー効果をかけまくったところには最適ではないでしょうか。
SASS（COMPASS）、LESS
CSSメタ言語（CSSプリプロフェッサ）というやつです。
私はスマホコーディングのために、Sass環境を導入したようなものです。
SASS（COMPASS）を使えば、ベンダープレフィックスを自動で書き出してくれて、サポートするブラウザも選べるので無駄な記述も省けます！
また、@extendなどを上手く使えばフレームワークのようなものでも無駄なく速く簡単につくれるはずです。
というわけで
コーダーさんは使えるものはどんどん使って日々頑張っているのですww
ただしツールに使われないように注意が必要ですね…
