Web制作者必見!! CSSをWeb上でビジュアル開発できるリファレンス的なWebサービス 『CSS GUI』

CSSをWeb上でビジュアル開発できる

Web制作に便利過ぎる「CSS GUI」。

要素に適用できるプロパティを見たり

試したりとリファレンス的なWebサービスです。

CSS GUI リンク先はこちらから

テキストボックスやボタン、画像やH1～H7など

HTMLで使える要素がたくさん並んでいます。

試してみたい要素をクリックすると選択できます。

選択すると画面左側がその要素に適用している

プロパティがパラメータのように表示されます。

ここでは送信と書かれたボタンを選択してみました。

Background-colorやBorder-radius、

CursorやFont-sizeなどよく使うプロパティが並びます。

その他にもPaddingなど細かく自由に変更が可能で

リアルタイムにプレビューで見れます。

画像を選択してみました。

基本的なプロパティしか無かったので

画面上部のAdd propertyから追加してみます。

Box-shadowを追加して適用してみました。

Box-shadowのプロパティに各種パラメータを

調整していき画面上で確認が可能です。

様々な要素にCSSプロパティを追加して

画面上でビジュアル的に開発できる

Web制作にはとても便利なWebサービスです。

Add Propertyを見るとどんなプロパティが使えるのか

などリファレンス的な使い方もできそうです。