viewsキムCSS3はCSSでの表現の範囲を格段に広げてくれました。ボタンなどはもはや画像を使用しなくても、CSSで十分美しい外観が作れます。そんなCSS3ですが、凝ったスタイルを適用するときにはやはりちょっとスタイルの設定が大変ですよね。そこで制作を楽にしてくれるCSS3お助けツールを集めてみました。無料で使用できるものばかりです。Generator」http://www.tabsgenerator.com/#aD03Mzt3PTIxMTtyPTIwO2I9MztiYWNrPWZmZmZmZjtib3JkZXI9NDg0YTRhO2ZvcmUxPWM5OTA5MDtmb3JlMj1mZjAwMDA7ZGlyPTA7Z2d0PTA7タブとボタンのCSSジェネレーターです。ボタンだけソースを生成してくれるツールが多い中、タブまで対応してくださっているのはうれしい限りです。MAKER」http://www.css3maker.com/box-shadow.htmlこのサイトの素晴らしいところはプロパティ数の豊富さと、対応ブラウザまで表示してくれるところです。英語のサイトですが、Web製作者ならだれもが知っているような単語ばかりが出てくるサイトなので、使用が難しい、ということはありません。PLEASE!」http://www.cssarrowplease.com/ボーダー付きの矢印(三角形)のソースを生成してくれる面白いツールです。三角形は矢印やアイコン、吹き出し口などに利用できてとても便利です。「animatable」http://leaverou.github.io/animatable/CSSアニメーションを一挙39個紹介しているサイトです。動きも外観もとても素晴らしいのでぜひ訪れてみてください。凝った外観のCSS描画もあり、勉強になります。CSSってここまでできるのか、と改めて思い知らされます。デザイナーの方にも参考にしてほしいサイトです。ここを見ればおよそ実装したい動作があるのではないかと思います。アニメーションの種類を選択すると、ロゴタイトルがデモンストレーション動作を行います。CSSソースはダウンロードボタンからダウンロードするようになっています。CSSソースはミニファイ化されています。please!」http://css3please.com/ジェネレーターではなく自分でソースを触って、リアルタイムプレビューで外観を確認するサイトです。ジェネレーターの欠点は、ジェネレーターに頼りすぎて自分でCSSコードが書けなくなる可能性があるところです。そのような欠点をこのサイトは補っているのではないでしょうか。ソースを実際に触ることで、CSSの勉強になります。CSSスニペット集「CSS-Tricks」https://css-tricks.com/snippets/css/コピーアンドペーストして使用するスニペット集です。状況別に複数のスニペットが紹介されています。この状況ではこのようなCSSの記述をすればよいのか、と読んで知識を蓄えることもできます。書いて読んで、制作では楽をして、学習としては得をする、という一挙両得ができるサイトです。こちらのサイトではWeb制作に必要な合8言語のスニペットが紹介されています。ほかの言語もぜひ読んでみてください。以上7サイトをご紹介してきました。どれも高機能で使いやすく、参考になるサイトばかりです。CSSジェネレーターを使用するときには、生成されたコードをただ貼り付けるだけではなく、なぜこのコードが生成されたのか、生成されたコードの中身はどうなっているのか、という点に注目してみてください。