手打ちでスタイルシートの設定を行っているデザイナーの方はどういったやり方でスタイルを決めていくでしょうか。数値を変更してブラウザを再読み込みして、再度変更して再読み込みして…を繰り返したりするのはとても面倒です。 そこで紹介したいのがStylrです。スタイル設定をビジュアル的に、その場で反映しつつ確認できるソフトウェアです。

Stylrの使い方

こちらがメイン画面です。この四角いボックスに対してスタイル設定を行います。

位置やサイズを変更したり…

色はカラーパレットで選択できます。

色を変えて、角丸にしてみました。

できあがったスタイルがこちらです。

Stylrを使うとスタイル設定がビジュアル的に確認できるので分かりやすさが増すでしょう。一番最初のWebデザインにおいてはPhotoshopなどを使うでしょうが、その後の更新フェーズで活躍しそうなソフトウェアです。

StylrはJavaScript/CSS製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Stylr bellingboe/app.stylr.io