【デザイナー】便利なオンラインツール（CSS編）：Useful Design Tools Vol.09

CSS書ける人こそ便利さを実感できるCSSジェネレーター

2年ぶりくらいにこのコラム書きますが、その間にサイト名変わったりして時の流れを感じます。今回はコーダーの人向けの内容です。イチからCSS書ける人でも使ってみると結構便利なCSSジェネレーターを3つ紹介します。どれも汎用的ではなく特定の用途に特化したものばかり。目的がビンゴだった場合、大幅に作業時間や確認の時間を短縮する事ができると思います。

cssfilters.co – リアルタイムに効果をプレビューできるCSSフィルター

まず紹介するのは、CSSフィルターの効果をPhotoshopのように確認しながら行えるCSSジェネレーター。画面上部にあるフィルター一覧はいわゆるプリセットで、まずはここから近いものを選んでから細かく調整していくという使い方が良さそうです。画面右側に並んでいる、各効果のスライダーを調整して、「CSS Code」ボタンを押すとコードを取得できます。既存画像だけでなく任意の画像をアップロードする事もできます。フィルターの結果がリアルタイムに確認できる点が便利です。

Simple CSS Media Queries – デバイス指定型のMedia Queryジェネレーター

レスポンシブレイアウト組む時に使うMedia QueryのCSSジェネレーター。デバイスを名指しで指定できるので、確認用の端末のディスプレイ解像度とか知らなくても名前さえ分かれば指定する事ができます。用途（スマホ、タブレット、デスクトップPCなど）とOS（iOSやAndroid、Windowsなど）それぞれでフィルタリングできるのも使い勝手が良いです。あと地味に気が利いてるなーというのが、Mobile FirstなのかDesktop Firstなのかを選べる点。基礎コーディングどっちでするかによって、Media Queryって記法変わりますからね。

Animista – アニメーションに特化したCSSジェネレーター

最後に紹介するのはアニメーションに特化したCSSジェネレーター。マウスホバー時やスクロールで出現する時など、最近では特定のイベントでアニメーションを使う機会も多くなってきました。けどanimationプロパティって書くの結構面倒なんですよね。このサイトでは一覧から選ぶだけで簡単にCSSコードを生成する事ができます。

使い方は、まず画面上部の選択肢の中から場面を選びます。Basic（基本）、Entrances（導入）、Exits（撤収）、Text（テキストアニメーション）、Attention（注意を引く動き）、Background（背景アニメーション）の各場面が用意されています。次にアニメーションの種類を選びます。横にズラっと並んでいる丸いボタン1つ1つがアニメーションの種類となります。任意のアニメーションを選ぶとプレビューされるので、画面左のOptionsパネルから細かい動きを必要に応じて調整しましょう。気に入った動きが作れたら、プレビュー右上にある｛・｝のボタンからCSSコードを生成する事ができます。

まとめ

以上CSSジェネレーター3つをご紹介しました。どれも「イチから書けるっていや書けるけどめんどくさい」系のものなので、効率厨のコーダーさんに特にオススメです。