CSS3を作るときに便利なツール

CSS3に挑戦する際に便利なツールをご紹介します。CSS3は新しい技術であるため、Web上にまだ情報が少なく、学習しにくいかもしれません。また、複雑なCSSアニメーションを作成する際は、CSSの記述量が多くなるので、大変だと思います。それらの問題を解決できるサイトやソフトを集めてみました。

・CSS3のプロパティを試せるジェネレータ

CSS3 Generator（http://css3generator.com/）

CSS3を初めて触る方にお勧めのジェネレータです。CSS3で追加された新しいプロパティを試すことができます。少しいじってみるだけでもだいぶ楽しめます。自動生成されたコードのコピーもできる機能も便利です。

・CSS3グラデーションを簡単に作成できるサイト

CSS3 Gradient Generator（http//gradients.glrzad.com/）

上述のCSSジェネレータのグラデーション特化版です。カラーピッカーを用いてお手軽にCSSグラデーションを作成できます。インターフェイスも分かりやすく、プレビューを確認しながら簡単にグラデーションを作成、自動生成されたコードをコピーできるという代物です。

・CSS3のプロパティを細かく解説したリファレンスサイト

CSS3リファレンス（http://www.htmq.com/css3/）

実際にCSS3を扱う際には、こちらを参考にしつつ制作を進めるといいでしょう。細かい指定方法などを解説してくれているので、とても分かりやすいです。CSS3の日本語リファレンスサイトはまだあまりないので、チェックしておいて損はないでしょう。

サイト作成のポイント

・CSS3プロパティにはベンダプレフィックスを付ける

　CSS3を用いる際、CSS3のプロパティには「-webkit-」「-moz-」などのベンダプレフィックスを付ける必要があります。これはW3C（Web技術の標準かを進める団体）で草案段階であるCSS3プロパティを、各Webブラウザが先行実装しているためです。

　すでにべンダプレフィックスなしで実装されているブラウザも出始めていますが、しばらくはべンダプレフィックスを付けて指定することになるでしょう。

　ベンダプレフィックスを付けると以下のようになります。

border-radius: 10px;　// 角丸を指定するプロパティ（ベンダプレフィックスなし）   -webkit-border-radius: 10px;　// webkit系ブラウザ（GoogleChrome、Safariのベンダプレフィックス）   -moz-border-radius: 10px;　// Firefoxのベンダプレフィックス   -ms-border-radius: 10px;　// IEのベンダプレフィックス   -o-border-radius: 10px;　// Operaのベンダプレフィックス

　この例ではボックスの角丸を指定する「border-radius」プロパティを取り上げました。ベンダプレフィックスが必要か否かはプロパティによってさまざまであり、付けたところでブラウザに実装されていなければスタイルは適用されません。

　しかし、ベンダプレフィックスをあらかじめ付けて指定しておくことで、現在CSS3非対応のブラウザがCSS3をサポートするようになったときに、スタイルが適用されるようになるので、いまから指定しておくとよいでしょう。

・多くのWebブラウザは自身に定義されていないCSSプロパティを無視する

　ほとんどのWebブラウザはCSSを読み込むときに、自身の知らないプロパティを無視してレンタリングする仕様になっています。上記のコードのCSS3プロパティは、CSS3非対応ブラウザでは読み込まれません。このことを理解してコーディングしないと、思わぬところでつまずくこともあるので、頭の片隅に置いておきましょう。

・ブラウザの対応状況を確認する

　CSS3はブラウザの対応状況があいまいなので、どのプロパティがどのブラウザに対応していて、どのブラウザに対応していないのか、把握しておき、各ブラウザで動作確認をする必要があります。CSS3に対応しているブラウザでも指定方法によってスタイルが適用されないケースもあります。ターゲットとするブラウザでは一通り表示確認を行っておくと無難です。

　

ボタンを作ってみよう

　Webサイトを構築するにあたって、ボタンは最も頻繁に使う部品だと思います。これまでのWeb制作では、グラデーションや角丸などリッチな表現のボタンを作るには画像を使う必要がありました。

　しかし、CSS3を使えば、このようなボタンも画像を使わずに作成できます。

クリックすると、ボタンがへこむ

　画像を使わずにCSSだけで作ったボタンは、テキストエディタだけで編集ができるので、作業効率の向上が期待できます。また、CSSファイルで管理できるので、一括で表現の変更ができ、メンテナンス性が高まるなど、多くの利点があります。

　このボタンを作っているHTMLとCSSのコードは以下のようになっています。実際にはCSS3のプロパティは「-webkit-」、「-moz-」などのベンダプレフィックスを付ける必要があります（詳細は後述）。

#btn {     position: relative;     display: block;     width: 200px;     padding: 15px 0;     text-align: center;     cursor: pointer;          color: white;     text-decoration: none;     line-height: 1;     font-weight: bold;     letter-spacing: 3px;     text-shadow: -1px -1px 1px #C60;　// CSS3プロパティ     border-radius: 10px;　// CSS3プロパティ     box-shadow: 0 5px 1px #C60, 0 7px 5px #CCC;　// CSS3プロパティ   }   #btn:link, #btn:visited { background: #F70; }   #btn:hover { background: #FB3; }   #btn:active {     background: #FC2;     box-shadow: 0 0 1px #871, 0 2px 2px #CCC;　// CSS3プロパティ     top: 5px;   }