サイト作成のポイント

・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;   }