Webブラウザ上でテキストスタイルをダイナミックに編集「Code Cola」
Code ColaはGoogle Chrome機能拡張として動作するスタイルシート設定ツールです。
Webインスペクタを使うとWebページを表示したままスタイルシートの編集ができます。ただ、数字やテキストを入力する形なので、思った通りの編集が難しいかも知れません。そこで試したいのがCode Cola、Google Chrome用のビジュアルスタイルシート変更ツールです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-09 11.43.03.1365510727.png)
立ち上げました。右上にあるウィンドウがCode Colaです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-09 11.43.13.1365510733.png)
任意のDOMを選択すると設定項目が表示されます。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-09 11.43.22.1365510740.png)
スライダーを使ってフォントサイズをダイナミックに変更できます。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-09 11.43.46.1365510750.png)
テキストのストロークを変更。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-09 11.44.05.1365510757.png)
HTMLソースの表示。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-09 11.44.19.1365510763.png)
設定項目を全てオープンしています。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-09 11.44.57.1365510769.png)
テキストシャドーの設定。
Code Colaの利点は何と言ってもビジュアル的に分かりやすく、ダイナミックにスタイル設定ができることです。表示、非表示などの設定ができる訳ではないですが、テキストなどの描画を変更した状態を確認するのに便利です。結果はスタイルシートの設定として得られます。
Code ColaはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
デザインがHTMLから分離し、スタイルシートになってからというもの個人的にはオーサリングツールを殆ど使わなくなってきました。特にSassやLESSなどの技術を使っていこうと考える中ではオーサリングツールは使えません。
しかしそうなるとスタイルシートを変更してブラウザを再読み込みして、というレガシーなデザインスタイルになりつつあります。もっとビジュアル的に今の技術を活用できるようになるべきで、そこにはこれまでにないツールが求められているのかも知れません。