CSS3について（ベンダープレフィックス・セレクタ・その他参考リンク）

もうすでに、どれがcss1とか2とかあまり気にしないで使っていると思いますが、従来に加えて素敵で柔軟な表現ができるようになったのがcss3です。
css3の登場により、かなりHTML側に見た目に関する機能を持たせなくてもよくなりました。
残念ながら、OSやブラウザの種類やバージョンに左右されるので、ものによっては出力側の環境によって狙った表示ができないものもありますが、そのあたりはwebページの目的や表示部分の重要度などによって、厳密にどのブラウザでも同じ表示にすべきなのか、多少違ってもいいのか、柔軟に対応していってください。

ベンダープレフィックス

css3といえばアニメーションの表現ができるようになったとか、わかりやすい新機能がたくさんあるのですが、そういうのはgoogle先生にお任せして、css3を使う上で理解しておいた方がいいことをまず説明していきます。
その一つにベンダープレフィックス（vendor-prefix）があります。

実をいうと、css3はまだ正式勧告されていないようで（2015/05現在）、現状、W3Cの草案をもとに各ブラウザが先行して実装しています。
そのため、拡張機能であることを明示するのがベンダープレフィックスです。

実質、これがついていないと各ブラウザで目的の表示ができなかったりするものもあるので、注意しましょう（例：radial-gradient）。

めんどうなのが、草案だったものが、勧告候補になった時には外すことが推奨されていることです。
実際、ベンダープレフィックスがなくてもどのブラウザでも表示されるcss3もあります（ただし、その機能が実装されているバージョンに限る）。
たとえば、border-radius（角丸）はベンダープレフィックスを付けなくても良いです。

つまり、つけなくてもいいものはつけない方が良いのです。

代表的なベンダープレフィックス（と対応ブラウザ）は上記の4つです。
以下のように使います。

.test{
  background: -webkit-gradient(radial, 15% 20%, 10, 15% 20%, 50, color-stop(1.00, #388235), color-stop(0.00, #a1df07));
  background: -webkit-radial-gradient(15% 20%, farthest-side, #a1df07 30%, #388235 100%);
  background: -moz-radial-gradient(15% 20%, farthest-side, #a1df07 30%, #388235 100%);
  background: -o-radial-gradient(15% 20%, farthest-side, #a1df07 30%, #388235 100%);
  background: -ms-radial-gradient(15% 20%, farthest-side, #a1df07 30%, #388235 100%);
  background: radial-gradient(15% 20%, farthest-side, #a1df07 30%, #388235 100%); /*ベンダープレフィックス無しの指定も併記する*/

  -moz-box-shadow: 5px 5px 10px 5px;
  -webkit-box-shadow: 5px 5px 10px 5px;
  -ms-box-shadow: 5px 5px 10px 5px;
  -o-box-shadow: 5px 5px 10px 5px;
  box-shadow: 5px 5px 10px 5px; /* 現在はbox-shadowはこの1行だけで良い */
}

勧告候補になった時には外すことが推奨されているので、ベンダープレフィックス無しの指定も併記してください。

なお、現在解消されているようなのですが、ベンダープレフィックスを特定の順序で書かないとうまく表示できない時期がありました。
詳細は覚えていないのですが、mozのあとにwebkitを書かないと（逆だったかも？）firefoxでグラデーションが正しく表示されないとかなんとか・・・。
本来、ベンダープレフィックスの記述順は気にしなくて良いものなのですが、（グラデーション以外にも）mozだけ書くと表示されるのにwebkitを追加するとfirefoxで表示されなくなるとか、そのような感じのことが発生したら、ベンダープレフィックスの順序をいろいろ入れ替えてみると良いことがあるかもしれません。

セレクタ（擬似クラス・擬似要素）

セレクタとはjQueryをある程度使ったことがある人ならなじみがあると思いますが、特定の条件のものを指定する方法です。
きっとコーディングする人なら誰もが使ったことがあるものに、:hoverなどがあります。

css3ではセレクタもかなり便利になりました。例によって、ユーザの環境にかなり左右されるのですが、使いこなすと重宝します。

たとえば、:first-child（IE7以降）、:last-child（IE9以降）は、ある要素内で最初または最後に書かれている子要素を指定するので、ulタグ内の最初または最後のliタグにはborder-topまたはborder-bottomをnoneにするといったことを設定できます。これにより、最初または最後のliタグに別途class名を付けて、borderの調整をするといったことが不要になるわけで、開発側で最初または最後のliタグかどうか条件文を付けたりしなくてもよくなったりします。

他にも隣接セレクタや属性セレクタなどいろいろあるので、google先生に訊いてみてください。
下記は属性セレクタの例です。

input[type="text"] {
  width: 200px;
  padding: 5px;
}

これまで、inputタグの場合、typeごとにcssを設定するには、idやclass名をつける必要がありましたが、上記のように属性セレクタを使えば、テキスト入力の場合、チェックボックスの場合・・・といった設定が可能になります。

リファレンスなど

css3の個別の機能については割愛しましたが、最後に役立ちそうなリンクを掲載しておきます。

グラデーションとかcss3は便利だけど面倒な部分も多いので、ネットに落ちているジェネレーターとかガシガシ使ってください。

また、css3だけで表現できること・動作させることもたくさんあるのですが、js（jQuery）やHTML5と組み合わせることで表現の幅が広がります。
ユーザの環境による制約やファイルサイズ、制作コストなども考慮に入れつつ、積極的に使ってみてください。

戻る

Top