札幌Web制作のシンクグラフィカ

CSSコントローラー

CSSのコンパイルスクリプトと言えばLESSやSASSなどが一般的ですが、開発環境が整っていないと意外と面倒ですよね使うの。LESSやSASSほど便利じゃなくもっとカジュアルにCSSの管理を簡単にしたい、そういう際に使えるスクリプトを書いてみました。スマホ対応(メディアクエリ・レスポンシブWebデザイン)で。

CSSコントローラーの概要

メディアクエリって書くの面倒くさいですよね。CSSも書くの面倒くさい。複数ファイルに分割して書くとちょっと便利ですが、ファイルの分散はGoogle先生的に推奨しておりませんし。 そういう時のためにLESSやSASSがあるのですが、開発環境が整っていないと使えないし、気軽に使うにはちょっと敷居が・・・。なんて事ありますよね。ええ、私はありました。 簡単にCSSを書きたい!できればメディアクエリ対応でレスポンシブWebデザイン対応で!要素毎にファイルを分割したい!それでいて最終的に1ファイルでパブリッシュできたら最高!というテーマで作りました。 各メディアクエリ毎のフォルダにCSSファイルを放り込むと、メディアクエリ付きの1ファイルのCSSが出来上がるというだけのスクリプトになります。CSSファイルを細切れで管理できるので、例えばよく使うスタイルなどはコモン化して使い回しする際なども便利ですね。 cssフォルダに画像をセットにしてパーツ毎に切り分けて管理すれば、使いたいパーツを放り込むだけですぐ使えるって寸法さ!ちょっと便利でしょう。 SASSと比べるとびっくりするくらい見劣りしますが、一般的なCSS運用の1ステップ手軽な運用として使ってみてください。

CSSコントローラーの機能

複数のCSSファイルを1つにまとめる
CSS Controllerは複数のCSSファイルを自動的に1つのファイルにまとめます。ただまとめるだけではなく、ちょっとだけ圧縮ミニファイしファイルサイズを軽量化します。
簡単にレスポンシブWebデザインに対応
CSS Controllerはメディアクエリのセットを自動的に行う機能が付いているのでレスポンシブWebデザインへの対応はとっても簡単。各メディアクエリのフォルダにCSSファイルを入れることで自動的にメディアクエリがセットされスマホ対応ができます。

デモサイト

https://cgi.synck.com/CSSController/

最新版を無料ダウンロード

CSSコントローラーの更新履歴

更新日 バージョン 更新内容
2014-11-02 1.0.0 公開バージョン