<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/05/CSS-Tester.jpg" alt="CSSをリアルタイムにいじれる Chrome拡張機能" title="CSS-Tester" width="514" height="204" class="alignleft size-full wp-image-14644" /></p>
<p>サイトのCSSをテストできるブラウザの拡張機能は、すでにいくつかあるのですが、どれも大量の機能を持っていて、ちょっとデザイン変更をしたいときに使うには不便だったりもします。</p>
<p>そのようなわけで、今回はCSSだけを、その場でリアルタイムに変更できるGoogle Chrome 拡張機能をご紹介します。</p>
<!--more-->
<h3 class='header-label'>CSSをリアルタイムにいじれる Chrome拡張機能</h3>
<p>「<a class="web-site-link" href="https://chrome.google.com/webstore/detail/css-selector-tester/bbklnaodgoocmcdejoalmbjihhdkbfon?utm_source=chrome-ntp-icon" target="_blank">CSS Tester</a>」は、<strong>開いたページのCSSを、リアルタイムに変更し、デザインをテスト反映させることができる</strong>Chrome拡張機能。</p>
<p>度重なる小変更を繰り返して、意味不明になってしまったCSSの、謎を解く鍵にもなる便利機能です。</p>
<h4 class='tips'>リアルタイムにCSS編集を反映</h4>
<p><img src="http://web-marketing.zako.org/images/2010/05/CSS-Tester1.png" alt="CSS編集" title="CSS-Tester1" width="400" height="402" class="alignleft size-full wp-image-14781" /><br />↑このように、ボタンをクリックして表示されるテキストエディタにCSSを書き込むと、リアルタイムに該当部分が変更されます。</p>
<p><img src="http://web-marketing.zako.org/images/2010/05/CSS-Tester2.png" alt="" title="CSS-Tester2" width="400" height="241" class="alignleft size-full wp-image-14783" /><br />↑気になるデザインが、どのような仕組みになっているのか把握するにも有効活用出来そうですね。</p>
<p>興味のある方は、<a class="web-site-link" href="https://chrome.google.com/webstore/detail/css-selector-tester/bbklnaodgoocmcdejoalmbjihhdkbfon?utm_source=chrome-ntp-icon" target="_blank">CSS Tester</a>のページから、拡張機能をインストールしてください。</p>
<p>ごくわずかな拡張機能を追加するだけで、ある程度の開発環境を作ることができてしまうことから見ても、最近のブラウザは、驚くほどのスピードで、さまざまな要望に答えてくれるようになりましたよね。</p><p>特に、Googleのブラウザの成長に対する貢献度というのは、計り知れないものがあるように感じられます。さて、そんな前提から、OSの分野で大きな影響を与えるであろうChrome OSは、一体どのようなものになるんでしょうか。これも非常に気になります。</p>