シンクグラフィカ札幌

CSSコントローラー

CSSコントローラー

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

メディアクエリって書くの面倒くさいですよね。CSSも書くの面倒くさい。複数ファイルに分割して書くとちょっと便利ですが、ファイルの分散はGoogle先生的に推奨しておりませんし。

そういう時のためにLESSやSASSがあるのですが、開発環境が整っていないと使えないし、気軽に使うにはちょっと敷居が・・・。なんて事ありますよね。ええ、私はありました。

簡単にCSSを書きたい!できればメディアクエリ対応でレスポンシブWebデザイン対応で!要素毎にファイルを分割したい!それでいて最終的に1ファイルでパブリッシュできたら最高!というテーマで作りました。

各メディアクエリ毎のフォルダにCSSファイルを放り込むと、メディアクエリ付きの1ファイルのCSSが出来上がるというだけのスクリプトになります。CSSファイルを細切れで管理できるので、例えばよく使うスタイルなどはコモン化して使い回しする際なども便利ですね。

cssフォルダに画像をセットにしてパーツ毎に切り分けて管理すれば、使いたいパーツを放り込むだけですぐ使えるって寸法さ!ちょっと便利でしょう。

SASSと比べるとびっくりするくらい見劣りしますが、一般的なCSS運用の1ステップ手軽な運用として使ってみてください。

CSSコントローラーの機能

CSSコントローラーには以下の機能が盛り込まれております。

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

CSSコントローラーのデモ

CSSコントローラーのサンプル
まぁ見てみてください。思う存分見るといい。そして楽しむといい。少し休んでから、また見るといい。

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

2014-11-02公開バージョン

CSSコントローラーのダウンロード

CSSコントローラーのダウンロード

CSSコントローラーの過去のバージョン

Release Version Download
2014-11-02 1.0.0 Download

CSSコントローラーのユーザレビュー

必須お名前
必須メールアドレス
必須確認のためもう一度
必須評価
必須レビュー内容
必須掲載確認