Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

2ページ目

PostCSSを触ってみた


PostCSSとは

PostCSS、名前を聞いただけじゃどんなものかピンとこないかもしれませんが、そんなに難しいものではありません。SassとかLessとかを使うと、独自の言語ルールで縛られてしまいますし、いらない機能もたくさん読み込まないといけません。PostCSSの場合、自分で好きなルールをpostcssプラグインから選んで読み込み、使用する事ができます。たとえばSassとかLessとかにあるようなfor文やif文なんかは使わなかったりしますよね?必要な機能、たとえばmixinや変数のみなどを取り込んで使う仕組みがPostCSSです。
つまり、PostCSSを使えば、自分オリジナルのPreprocessorを簡単に作れちゃうという事です。

PostCSS導入

たとえば、gulpでpostcssを導入するとするなら以下のような書き方をします。

var gulp = require('gulp');
var postcss = require('gulp-postcss');


gulp.task('css', function () {
	return gulp.src('css/src/**.css')
	.pipe(postcss([
		require("postcss-import"),//@import機能を使いたい
		require('postcss-mixins'),//mixinを利用したい
		require('postcss-nested'),//セレクターのネストをしたい
		require('postcss-simple-vars'),//変数を定義したい
		require('postcss-cssnext'),//次世代のcssの文法を使いたい
		require('cssnano'),//CSSを圧縮したい
	]))
	.pipe(gulp.dest('css/dist/'));
});

gulp.task('default', ['css']);

package.json

{
  "devDependencies": {
    "cssnano": "*",
    "gulp": "*",
    "gulp-postcss": "^6.2.0",
    "postcss-cssnext": "*",
    "postcss-import": "^8.1.2",
    "postcss-mixins": "^5.3.0",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0"
  }
}

githubにサンプルのソースコードを置いていますので、試してみてください。コマンドラインツールよりnpm installで依存パッケージのインストール、gulpでCSSのコンパイルができます。


PostCSSを使う上で注意したい事

PostCSSを使うという事はSassなどLessなど、用意された言語仕様ではなく、自分である程度のルールを決めるということになります。それを社内で導入するとなると、そのルールの周知徹底が必要になってきます。SassやLessなら文法はGoogleで調べればヒットしますが、導入したPostCSSプラグインのルールはすぐに見つからないかもしれません。
なので、すでにSassなどを社内ですでに使っていて、もし新たにPostCSSを使いたいのであれば、最初のうちは、ベンダープリフィックスを付与する、autoprefixerやCSSを圧縮するcssnanoくらいを利用する程度にとどめておく方が無難かもしれませんね。


a-blog cms 勉強会 in 高知 2016/10 を開催しました

高知市文化プラザかるぽーと 中央公民館 9F 第1会議室にて、a-blog cms 勉強会 in 高知 2016/10を開催しました。勉強会を告知した際は参加者が6名ほどしかいなかったのですが、ラスト一週間で急に参加者申し込みが増え、結局15名もの方に参加していただけました。地元高知でこれほど多くの方に参加していただけてとても嬉しいです。


会場の様子


「a-blog cms 勉強会 in 高知 2016/10 を開催しました」の続きを読む

a-blog cms 勉強会 in 高松 2016/10 を開催して

2016年10月6日、株式会社ヘルツ様のセミナールームをお借りしa-blog cms 勉強会 in 高松を開催しました。


代表山本からは「コンテンツファーストのWebサイト運用」というcmsを使った新しいWeb制作フローの提案、また自分からはa-blog cmsの開発側スタッフとして取り組んでいる機能の中でオススメの機能の紹介をさせていただきました。


「a-blog cms 勉強会 in 高松 2016/10 を開催して」の続きを読む

SwedenのStockholmに行ってきた

GothenburgからStockholmへ

スウェーデン自体には10日間行っていたのですが、そのうち2日間一人でストックホルムを観光しました。
友人の家があるMarstrandからGothenburg(スウェーデン第二の都市)までバスで移動してGothenburgから新幹線でStockholmまで行きました。GothenburgからStockholmまでは新幹線でおよそ三時間(470km)と結構、距離があります。だいたい大阪から東京までの距離です。


「SwedenのStockholmに行ってきた」の続きを読む

HTML、CSSの共有サービスを作りました。

HTML, CSS の共有サービスを作りました。名付けて、Atomic Labです。ちょっとした、HTMLやCSSの目も程度に作ろうと思ったのですが色々アイデアが膨らんで気づけば結構機能を盛り込んでしまいました笑



「HTML、CSSの共有サービスを作りました。」の続きを読む

堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド