読者です 読者をやめる 読者になる 読者になる

Webデザイン初心者向けのあれこれ

Webデザイン初心者向けのあれこれを書いていきます。

プレビュー機能でCSS3も怖くない!?Webツール「CSS3 Generator」を使ってみよう

どうもこんにちは、僕です。

今日は、プレビュー確認しながらソースコードを表示してくれるCSS3ツール「CSS3 Generator」を紹介します。
このツールは、以前こちらの記事で簡単に紹介しましたが、今回は詳しい使い方などを説明してみたいと思います。

CSS3 Generator
http://css3generator.com/

f:id:webarekore:20121222152932p:plain


サイトに飛ぶとまずこちらの画面が表示されます。
中央のプルダウンメニューをクリックしてみましょう。

f:id:webarekore:20121222152944p:plain

このサイトでは、

Border Radius
Box Shadow
Text Shadow
RGBA
@Font Face
Multiple Columns
Box Resize
Box Sizing
Outline
Transitions
Transform
Selectors
Gradients

の13項目のプレビュー・コード表示が可能となっています。
今回は、例としてText Shadowを選択してみます。

f:id:webarekore:20121222152958p:plain


このような画面が表示されました。
設定項目が4箇所ありますが、上から

Horizontal Length:横方向の位置
Vertical Length:縦方向の位置
Blur Radius:ぼかしの強さ
Shadow Color:影の色

となっています。

f:id:webarekore:20121222153008p:plain


全ての項目を設定すると、右側にプレビューが表示されます。
ここを確認しながら各項目を設定すると良いでしょう。

コードは左下のYour Codeに表示されているので、コピー&ペーストでそのまま使用することができます。
(Your Code右下のアイコンをクリックすることでコピーすることができます。)
また、表示されているブラウザのアイコンは対応しているブラウザを示しています。
アイコンにマウスオーバーすることで、対応しているブラウザのバージョンも表示できます。



今回は、数あるCSS3のWebツールの中からCSS3 Generatorを紹介しました。
表示言語は英語のみですが、プレビューで動作を確認できるので難易度はそこまで高くないように感じました。
新たな要素が追加されたCSS3ですが、こういったWebツールの存在が敷居を下げてくれているのかもしれませんね。