サイト作成のポイント

・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に対応しているブラウザでも指定方法によってスタイルが適用されないケースもあります。ターゲットとするブラウザでは一通り表示確認を行っておくと無難です。