ゼロからはじめるCSS3を勉強するために参考になるサイトや便利なツール、チュートリアルを一挙にまとめました
- カテゴリー Web制作Tips
今まで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
UIXデザイナーによるCSS3を使った様々なデモ一覧。ハイクオリティでユニークなものが多く、それぞれ解説記事やソースのダウンロードもあります。
CSS3アニメーション
animatable: One property, two values, endless possiblities
http://leaverou.github.com/animatable/
39種類のCSS3を使ったアニメーション機能の比較・ソースのダウンロードができるサイトです。
cubic-bezier.com
cubic-bezier()をつかったCSS3アニメーションのイージングを視覚的に簡単に作成できます。
便利ツール&ライブラリ
prefixMyCSS
CSS3のソースを入れるとベンダープレフィックス対応のコードを自動生成してくれるサービス。改行なしやコメントなしなどを選べる機能もあって便利です。
CSS3 Click Chart
上部の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
自分の使用しているブラウザのCSS3の対応状況をプロパティごとに細かくチェックできます。
コード&デモ共有サイト
jsdo.it
Web上で HTML5,CSS,JavaScriptを書いて共有できるサービス。リンクはCSS3を含むタグのページです。
Demo Studio | Mozilla Developer Network
https://developer.mozilla.org/ja/demos/tag/tech:css3
Mozilla Developer Networkによるデモソースの共有サービス。リンクは日本語版のCSS3が使用されているデモ一覧のページです。
CSSDeck
海外のHTML5、CSS3、JSを学ぶためのソースとデモの共有ギャラリーサイト。HTMLとCSSのみで作るエレメントからゲームまで、こんなことができるのかというのがわかる参考サイトです。
参考サイト
この記事を書いた人
著者 : ハヤシユタカ
2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら