いろいろな事がCSSだけで可能になるCSS3(2010年3月31日)
はじめまして、初めて投稿します、ピエールです。
よろしくお願いします。
ホームページを作る際に必要なCSSですが、近頃CSSの新しいバージョン「CSS3」を実装しているブラウザが増えてきています。
そこで今回は、CSS3を使うとこんなに制作が便利になるというプロパティを いくつかピックアップしてご紹介しようと思います。
- border-radius
- ボーダーの角を丸くすることができます。
今まで画像でしか表現できなかった角丸を指定できます。
これを使うことにより、画像の切り出しをしないで済み、なおかつ横幅や色が変わった時の画像修正の手間がなくなります。
- box-shadow
- divタグやpタグなどに影をつけることができます。
こちらも今まで画像で表現するしかなかった影を画像を使わずに同じ表現を再現できます。
- @font-face
- 通常のテキストはいままで、ユーザーのPCにインストールされていないフォントだと表示できませんでした。しかし、フォントデーターをサーバーにアップすることによって、どのPCで見ても同じフォントを表示できるようにできます。
- gradient
- よく背景などに使用されているグラデーションですが、こちらも画像を使わずCSSの指定だけで使用できます。
このように見てみると、今まで画像でしか表現できなかったものがCSSの指定だけでできるようになることが多いですね。
サンプルページはこちら
なお、これらのCSSはChrome・Safari・FireFoxの各ブラウザ最新バージョンで閲覧できます。
Internet Explorerで見れるようになるには、まだ待たないといけないようです。
![バトリ](/common/img/illust_14.png)