デザイン

デザイン

CSS3のパワフルな機能を紹介【知らないままではもったいない…】

500 views

CSS3によってスタイルシートはより多機能になり、開発者のやりたかったことがより多く実現できるようになります。今回はCSS3のパワフルな機能をご紹介します。

 

 

後方互換製

CSS3は以前のバージョンのCSSと完全な互換性が保たれています。そのため古いサイトもCSS3を使って書き換えることができるのです。またブラウザ側の対応も広く、すでにCSS2やその他のバージョンに対応しているブラウザならばCSS3にも完璧に対応します。

 

 

独立したモジュール

1つのドキュメントから構成されていたCSS2とは異なり、CSS3では複数のモジュールに分割されています。これにより多機能さと制作の容易さを同時に実現することができます。

もっとも重要なモジュールとしてセレクター、カラー、ボックスモデル、背景とボーダー、文字効果、2D/3D変形とユーザーインターフェースがあります。もちろん以前の仕様も使うことができますが、より小さく分割されています。

 

 

簡単に編集し簡単に確認

モジュラー構造により、CSS3では変更の適用が簡単になっています。それぞれのモジュールを個別にテストすることができるのです。問題をピンポイントで確認・修正する際にはとても助かる機能です。

 

 

開発スピードの高速化

CSS3には、以前にはCSSとJavaScriptを組み合わせなければ実現できなかった機能が統合されています。おかげで開発が容易になりスピードも上がります。Smashing Magazineが同じサイトをCSSとCSS3で制作した場合のパフォーマンスを比較しています。開発時間、サイズ、リクエストの全てで改善が見られるのが興味深いですね。

css3①

 

 

画像とアニメーションの操作

ページのレイアウトや写真の品質、アニメーションはユーザーの印象を大きく左右します。CSSだけでは凝った操作ができずJavaScriptが必要となっていましたが、CSS3ではここでも機能強化が図られています。

CSS3のトランジションはプロパティの値を変更できるようになっています。トランジションを利用するには利用したいCSSプロパティとエフェクトの時間の2つを指定することになります。次の例は赤い<div>要素を表示します。<div>要素は横幅のプロパティに2秒間続く効果を適用しています。

 

 

マウスホバーによって新しい値を与えることができます。

 

 

 

 

CSS3の新機能は単体でも優れていますが、これらが組み合わさった時に真価が発揮されます。CSS3にぜひ挑戦してみてください。

 

 

 

 

 

※本記事は、10 powerful things you didn’t know about CSS3を翻訳・再構成したものです。

関連記事

おすすめ記事