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

CqstyleはWindows用のオープンソース・ソフトウェア。Webサイトのデザインでターゲットブラウザになることが多いのはIE、そしてFirefoxだろう。さらにSafariやGoogle Chromeも考えるべきだが、シェアを考慮するとこの二つがまず大事になる。


ピクチャ 159.png

IEとFirefox向けのデザインを同時に確認

 

各ブラウザによってレンダリング結果が多少異なるため、その調整作業が必要になる。だがFirefox向けに徹底的に調整した後、IEで確認したら思い切りずれていたなんてこともある。そんな悲惨な結果を避けるために使ってみたいのがCqstyleだ。

Cqstyleはいくつかのパターンがあるが、まずWindows向けのプログラムが基本になる。CqstyleがSeleniumサーバとなり、IEとFirefoxを立ち上げる。さらにデフォルトブラウザ向けにCSS編集ウィンドウが開くので、そのテキストエリアでCSSを編集する。


ピクチャ 160.png

変更はリアルタイムに反映される

 

編集結果はリアルタイムでIE/Firefoxに伝えられる。数値はスライダーを使って調整できるので、スライダを動かすたびにリアルタイムで表示が変化する。キー入力をフックしているためか、若干入力速度が遅くなってしまうのが難点ではある。

さらにGoogle Chrome向けには専用の機能拡張が用意されており、ここでも同じくリアルタイムにデザイン修正が確認できるようになっている。デザイナーの方は一度試してみてほしいソフトウェアだ。

 

cqstyle « Google Chrome Extensions

 http://www.chromeextensions.org/webmaster-seo/cqstyle/

cqstyle - Project Hosting on Google Code

 http://code.google.com/p/cqstyle/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2