ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Code ColaはGoogle Chrome機能拡張として動作するスタイルシート設定ツールです。

Webインスペクタを使うとWebページを表示したままスタイルシートの編集ができます。ただ、数字やテキストを入力する形なので、思った通りの編集が難しいかも知れません。そこで試したいのがCode Cola、Google Chrome用のビジュアルスタイルシート変更ツールです。


立ち上げました。右上にあるウィンドウがCode Colaです。


任意のDOMを選択すると設定項目が表示されます。


スライダーを使ってフォントサイズをダイナミックに変更できます。


テキストのストロークを変更。


HTMLソースの表示。


設定項目を全てオープンしています。


テキストシャドーの設定。

Code Colaの利点は何と言ってもビジュアル的に分かりやすく、ダイナミックにスタイル設定ができることです。表示、非表示などの設定ができる訳ではないですが、テキストなどの描画を変更した状態を確認するのに便利です。結果はスタイルシートの設定として得られます。

Code ColaはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

デザインがHTMLから分離し、スタイルシートになってからというもの個人的にはオーサリングツールを殆ど使わなくなってきました。特にSassやLESSなどの技術を使っていこうと考える中ではオーサリングツールは使えません。

しかしそうなるとスタイルシートを変更してブラウザを再読み込みして、というレガシーなデザインスタイルになりつつあります。もっとビジュアル的に今の技術を活用できるようになるべきで、そこにはこれまでにないツールが求められているのかも知れません。

Chrome ウェブストア - Code Cola

zhouqicf/code-cola · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2