ゼロからはじめるCSS3を勉強するために参考になるサイトや便利なツール、チュートリアルを一挙にまとめました

今までCSS3を使ったパターンやスタイルの付け方などを紹介してきましたが、一言にCSS3の機能といっても、角丸やグラデーションなどの装飾だけでなく、アニメーション機能などアプリ制作をする上でも便利な機能がたくさんあります。

そこで、今回はアプリ制作をする上でも便利なCSS3のアニメーション機能等を勉強する際に参考になるサイトをまとめました。

デモページからチュートリアルサイト、便利ツールまでこれからCSS3を勉強する際に知っておくと良さそうなサイトをたくさん集めました。

これからCSS3を勉強してみたいという人や、具体的にCSS3をアプリやサイト制作などで効果的に使用するアイデアを見つけたいという人のために、参考になりそうなサイトを一挙に紹介します。

今回はジェネレーターというより、CSS3を勉強する際に便利なチュートリアルやデモを集めたので、これとはまた別にCSS3関連のジェネレーターを集めた記事もご紹介できればと思います。

デモ＆チュートリアル

Tutorials | Codrops

http://tympanus.net/codrops/category/tutorials/

CSS3を含む最新のチュートリアル記事が充実しています。CSS3アニメーションをつかったボタンやギャラリーなど、ハイクオリティできれいなものがたくさんあります。

20 Fresh CSS3 Tutorials | Tutorials

http://webdesignledger.com/tutorials/20-fresh-css3-tutorials

最新の20のCSS3チュートリアルです。（記事自体は2012年3月のもの）フォーム周りやホバーイベント、ギャラリー等、選び抜かれたCSS3のチュートリアルがずらーっと紹介されています。

47 Amazing CSS3 Animation Demos

http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

47の驚くべきCSS3アニメーションのデモ。少し昔の記事ですが、（2010年2月）47個ものCSS3アニメーションのデモが紹介されています。結局CSS3アニメーションで何ができるのかという入門に役立ちます。

lab.simurai

http://lab.simurai.com/

UIXデザイナーによるCSS3を使った様々なデモ一覧。ハイクオリティでユニークなものが多く、それぞれ解説記事やソースのダウンロードもあります。

CSS3アニメーション

animatable: One property, two values, endless possiblities

http://leaverou.github.com/animatable/

39種類のCSS3を使ったアニメーション機能の比較・ソースのダウンロードができるサイトです。

cubic-bezier.com

http://cubic-bezier.com/

cubic-bezier()をつかったCSS3アニメーションのイージングを視覚的に簡単に作成できます。

便利ツール＆ライブラリ

prefixMyCSS

http://prefixmycss.com/

CSS3のソースを入れるとベンダープレフィックス対応のコードを自動生成してくれるサービス。改行なしやコメントなしなどを選べる機能もあって便利です。

CSS3 Click Chart

http://css3clickchart.com/

上部のCSS3の機能一覧をクリックするとひと目でソースと反映したHTML要素が確認できます。CSS3のたくさんある機能を理解するのに便利です。

CSS3 structural pseudo-class selector tester

http://lea.verou.me/demos/nth.html

CSS3のセレクタの記述と動き方をチェックできます。セレクトボックスと()内の数字を変更することで非常にわかりやするCSS3のセレクタの動作を理解できます。

Transforms

http://westciv.com/tools/3Dtransforms/index.html

2Dと3DでのCSS3のランスフォームプロパティとアニメーションプロパティのソースと動作確認ができます。数値のレベルを変えるとPreviewに反映されるので分かりやすいです。

3D CSS Text

http://www.3dcsstext.com/
CSS3で作られた3Dのテキストを作成するジェネレーターです。色やフォント、角度など細かい調整ができます。

Prefix free

http://leaverou.github.com/prefixfree/

読み込むだけでベンダープレフィックスの記述をいらなくしてくれるJSライブラリ。
2KBと軽量なので、モバイル対応サイト等でCSSにベンダープレフィックスの記述が膨大になって重くなってしまうのを防ぐのによいかもしれません。

対応状況チェック

CSS3 & HTML5 Browser Support

http://www.findmebyip.com/litmus/

いざCSS3を使用するとしてもブラウザの対応状況のチェックが必要です。こちらのサイトではCSS3とHTML5のプロパティとブラウザごとに一覧表で対応状況が確認できます。

The CSS3 Test

http://css3test.com/

自分の使用しているブラウザのCSS3の対応状況をプロパティごとに細かくチェックできます。

コード＆デモ共有サイト

jsdo.it

http://jsdo.it/tag/css3

Web上で HTML5，CSS，JavaScriptを書いて共有できるサービス。リンクはCSS3を含むタグのページです。

Demo Studio | Mozilla Developer Network

https://developer.mozilla.org/ja/demos/tag/tech:css3

Mozilla Developer Networkによるデモソースの共有サービス。リンクは日本語版のCSS3が使用されているデモ一覧のページです。

CSSDeck

http://cssdeck.com/

海外のHTML5、CSS3、JSを学ぶためのソースとデモの共有ギャラリーサイト。HTMLとCSSのみで作るエレメントからゲームまで、こんなことができるのかというのがわかる参考サイトです。