最近ちらほら目にするようになったけどいったいなに?と思っている方いませんか?僕はその一人です。なんとなくこんなもんかな?といった感じで曖昧にしか理解していなかったので「とりあえずこれだけ知っておけばいい」という情報を簡単にまとめてみました。はじめにPostCSSをノートPCに例えると...SassをVAIOのようなメーカーが作ってパッケージしたノートPCに例えると、PostCSSはマザーボードからプロセッサーからケースまで、すべて自分で選んで組み立てる自作PCです。良さそう結論から言ってしまうと、かなり良さそうなので早速使い始めて損はないと思います。大きな導入リスクやデメリットは思いあたらないし、すでにビルドツールを使っていれば導入コストも少なくすみます。少なくとも試してみる価値は十二分にありそうです。開発体制や環境、プロジェクトの性質によるんでしょうけど。仕組みのシンプルさや開発者の間での盛り上がりを見ていると、かなり可能性が広がっていきそうです。フロントエンドに関わる仕事をされている方なら、知っておいて絶対に損はなさそうです。PostCSSの特徴をざっくり箇条書きでまとめていきます。PostCSSってなに?JavaScriptでCSSをプロセスするための仕組みJSの関数を組み合わせることで、Sassのようなプリプロセッサーと同等のことが実現可能モジュラーなので必要なものだけを組み込めるなぜ、いまPostCSSなのかSassやLessなどのCSSメタ言語が発達して便利になったが、CSSが複雑になったシンプルに必要なものだけ実行したい場合に有効JSでプラグインを書けば機能を実装できるため、Sassなどに依存しなくてすむシンプルな仕組みなので比較的容易にいろんな機能を実装できる。CSS:ドキュメント全てを読み込んで再構築できるのでCSSの最新仕様にある機能を実装できる。transcompile)できる。abilities:スタイルの全てのパーツを読んで変更できるので、先ほど紹介したdoiuseやAutoprefixerのような機能を実装できるデメリットGulpなどのビルドツールやコマンドラインに慣れていないと導入のハードルが高い(デザイナーでCSSも書く方とか?)Sassほどのリソースや開発コミュニティが確立していない(時間の問題?)プラグインを探すのが面倒チームで利用する場合、自由に何んでもできるためルールづくりが必要。その点、Sassなどでは共通言語があるので、すでにあるリソースを活用できる日本語のリソースがまだ少ない?導入するには?GulpやGruntで開発環境ができていらば、かなり容易に導入できますね。初期投資はひとまず用途にあった安定したプラグインを探すことくらいで済みそうです。CLI(コマンドラインインターフェイス)ツールも用意されています。検索可能な一覧にまとめられています。さいごに以上、PostCSSについて簡単にまとめてみました。イントロでも書きましたが、かなり良さそうです。仕組みのシンプルさを考えると可能性が広がりそうなので、進化して長生きしそうなツール・仕組みではないかなと期待しています。author「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。ウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。使ったときに戸惑ったことのまとめレスポンシブなデザインにするなら知っておきたい。コメントをキャンセルメールアドレスが公開されることはありません。