頑張ってパネルのデザインをいじってみた。 これが旧デザインで、
これが新デザイン。
前のは要素をとりあえず設定してみただけだったので、それよりかはずいぶんマシになったと思う。
しかしこの程度のものでも相当大変だったし下手したらJS部分をいじった時間よりもHTMLとCSSに悪戦苦闘していた時間のほうが長いのではないだろうか。
最初はテキストエディタで変更して毎回'cfx run'してデバッグしていたのだけどリアルタイムで変更結果がわからないという問題がある。
Google Web Designerというツールを見つけて「これで勝つる！」と思ったんだけれどもこれが動作が不安定で今のところは使い物にならない…。Linux版特有の問題なのか自分の環境特有の問題かは分からないが、頻繁にキーボード入力を一切受け付けなくなる。
Microsoft製のMicrosoft Expression Webというのが開発終了に伴って無料配布されてるけど、これはWindows専用。
結局、CSSDeskというHTMLとCSSを入力するとリアルタイムにプレビューを表示してくれるWEBサービスを使ってやるのが一番早かった。（でもこれをFirefoxで開いて開発者ツールを開くとCPU使用率がとんでもないことに）
これでほぼ完成というところまで行ったらHTML1ファイルにCSSとHTMLコンテンツをひとまとめにしてFirefoxの開発者ツール->レスポンシブデザインビューでパネルと同じサイズで最終確認。
非常に残念なことに、Firefox アドオンの開発・デバッグツールはパネルのHTML/CSSを検証することができない。javascript部分のデバッグくらいしかできない。
Chromeのアドオン開発環境はどうなってるかわからないけど、ここはどうにかしてほしい…。
