では、CSS3の具体的な活用法を説明して行きましょう。
CSS3は、これまでにも語ってきたように、CSSシリーズの延長であり、特別な存在ではありません。
そのため、CSSの基本的な概念をそのまま活用できます。
たとえば、色指定や文字のサイズ、フォント、行数、配置などの指定、あるいは背景や表の指定など、ホームページを構成する様々な要素を指定する上で、なるべく簡略化しようというのが、CSS3の基礎概念となります。
それなら、従来のCSSから何が変わったのかというと、モジュール化した事で、個別に対応できるようになったという点がひとつ挙げられます。モジュールごとに、対応、未対応のブラウザがあるので、ある意味複雑になった要素もありますが、基本的にはさらに便利になったと考えていいでしょう。
具体的なCSS3の活用方法を見ていく前に、まず知っておくべき点がひとつあります。
それは、CSS3の定義です。
CSS3というのは、CSSの中にあって、独立した全く別の技術というわけではありません。新要素が加わっている、CSS2.1の次のバージョンに過ぎません。
よって、完全に別物というわけではなく、従来のCSSと互換性を持った言語なのです。この点を知っておかなければ、後々かなり苦労する事になるでしょう。
というのも、もしCSS3を完全に新しい言語だと解釈してしまったら、従来のCSSを全て捨て去ってしまわなくてはならないという事になるからです。
CSS3の数あるメリットの中には、「工数を減らせる」というものもあります。
ただ、普段あまりCSSになじみがない人にとっては、あまりピンとこないメリットかもしれませんね。工数というのは、簡単にいえば「そのシステムを完成させるために必要な手間」です。
もっといえば、作るためにかかる時間と置き換えても良いでしょう。
さらに拡大解釈すれば、コストという事もできます。
CSSという言語は、個人で運営する小さなサイトにおいては、自分一人でも十分に作れます。
ですが、法人において、かなり複雑でシステマチックなホームページを必要とする場合にはかなりの技量が必要となってくるため、作成を外部に発注するケースも出てきます。
CSSからCSS2、2.1、そしてCSS3にレベルアップした事で、いくつかの大きな恩恵が得られるようになりました。
その中のひとつに、「容量を軽くできる」というメリットがあります。
これは、特にSEOに重点を置いてサイトを展開している人にとって、大きな長所といえるでしょう。
CSS3の目玉となる技術のひとつに、CSSのみで画像を表現できるという点があります。
これまでは、どんな小さな画像でも、画像ファイルを別途用意する必要がありました。
たとえば、アイコンなどでもそうですね。
また、タイトルロゴなどに関しても、凝ったものを用意しようとすれば、従来のCSSにおいては基本的に画像ファイルが必要です。
ですが、CSS3の場合は、ある程度のものはCSSだけで表現が可能となっているので、別途画像ファイルを用意する必要がありません。
様々な恩恵が用意されているCSS3ですが、ユーザーの立場におけるメリットも数多くあります。
その中でも特に大きなメリットと言われているのが、表現力の向上です。
これは目に見えてわかる進化なので、CSS3を使用する上で、それまでのCSSと比較した場合に一番大きな違いと感じる部分ではないでしょうか。
CSS3には、様々な新機能が追加されています。
例を挙げると、「角丸」などの記号の追加に始まり、画像ボーダー、グラデーション、ドロップシャドウなど、これまでペイント系ソフトを用いて表現していたものも、ホームページ上で表現可能となります。
さらに、透明度に変化をつけたり、アニメーションを導入したりといった事も可能です。
CSSの基礎を学んだところで、今度はCSS3について触れていきます。
CSSというものがどんな原理で、どんな意味を持つ物なのかは、既に御理解頂けていると思います。それさえわかっていれば、CSS3もすぐに理解できるでしょう。
CSS3は、簡単にいえばCSSのレベル3、バージョンアップ版です。
1996年に世に出たCSSは、これまでCSS2、CSS2.1...といったバージョンアップを重ねており、CSS3はその延長にあるレベルです。ただし、CSS3はこれまでのCSSと全く異なるシステムという事もできます。
なぜなら、これまでのCSSとは基本的な構成が異なるからです。