2018/10/29

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる

CSSだけでドット絵(Pixel Art)を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。

ちなみに下図のようなドット絵がつくれる。

マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。

2018/10/11

デザイナーにもオススメ!シンプルですぐできるSass(SCSS)開発環境構築

ファミコン風CSSフレームワーク(NES.css)を開発するために、Sassの開発環境を整えたので共有したい。

ウェブページをスタイリングするためにはCSSを使うのだが、崩壊しやすい性質を持っている。詳細度による優先付け、スタイルの上書きなど要因はさまざま。そんな脆いCSSをちょっとでもメンテしやすくするために「Sass」というCSSを拡張したメタ言語が使われる。簡単に階層構造を作れたり、ループや関数などプログラムっぽいものが書けたりと、大きなウェブページをつくるなら必須だ。

しかし、Sassを使う上で避けては通れないものがある。
SassからCSSに変換する「コンパイル」だ。

フロントエンドエンジニアならNode.jsやwebpackを使ってできてしまうだろうが、デザイナーが手を出したら「Node.jsこわい」「webpackこわい」となりかねない。以降、コマンドラインから扱う便利ツールに拒否反応を示されてしまってはもったいない。

そこでシンプルで設定ファイルが少なく、かつある程度自動でなんでもやってくれるSassの開発環境をステップバイステップで構築していく。

この記事を書くにあたり使ったツールは以下のとおり。
  • Node.js環境
    • npm@5.2.0
    • node.js@8.11.4
  • SassをコンパイルしてCSSを出力する
    • node-sass@4.9.3
    • rimraf@2.6.2
  • ベンダープレフィックスを自動的に付加する
    • postcss-cli@6.0.0
    • autoprefixer@9.1.5
  • コーディングスタイルを統一する
    • stylelint@9.5.0
    • stylelint-config-recess-order@2.0.0
    • stylelint-config-standard@18.2.0
    • stylelint-scss@3.3.1
  • 自動フォーマットする
    • prettier-stylelint@0.4.2
    • clean-css-cli@4.2.1
  • コミット時にコーディングスタイルをチェックする
    • husky@1.0.0
    • lint-staged@7.3.0
  • エディタで保存時に自動フォーマットする
    • VSCode@1.27.2
    • prettier-vscode@1.6.1