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