今さら聞けないネットのあれこれ。
今回は「CSS3はすごい？」についてお話します。
重要度：★★★
難易度：★★★
前回、古いブラウザーでのお話で出てきた、HTML5と常にセットで、しかもこれが使えなければ、HTML5は魅力半減？イヤイヤそれ以下？ぐらいのあつかいに……
とにかくCSS3はすごいんです。
CSS3（スタイルシート3）
一般の方には、難しいかもしれませんが、例えるなら……
HTML5 ＝ 花嫁
CSS3 ＝ ウエディングドレス
といったところでしょうか。
つまり、HTML（花嫁）はあくまでベース（基本）としてあり、CSS3（ウエディングドレス）は装飾としての役割を担います。
花嫁がウエディングドレスを着ない事が無いように、現在のサイト制作では切っても切れない関係で、しかもウエディングドレスを着ると、非常に綺麗になる。つまり装飾効果もばっちり。
といった関係です。
では、CSS3は具体的にどんなことが出来るのか？
CSS2まではデザインレイアウトに重点が置かれていて、装飾と言う意味ではあまり機能が無かった分野に重点を置いて、グラデーションやドロップシャドー・囲み線の角丸といった、今まで画像を使用しなければ表現できなかった事が、画像を使用しなくとCSSのみで表現を可能にしたことです。
というとで、これから下に書く部分につてはCSS3の機能をつかって装飾して描きます。
角丸10PXとグラデーション
周囲を緑の枠線で囲み、角を10pxの半径で丸くし、バックグラウンドに緑からオレンジのグラデーションを掛けてあります。
※CCS3未対応のブラウザーでは、緑色の枠線のみが表示さえれています。
周囲を緑の枠線で囲み、角を10pxの半径で丸くし、バックグラウンドに緑からオレンジのグラデーションを掛けてあります。
※CCS3未対応のブラウザーでは、緑色の枠線のみが表示さえれています。
コレの応用として、下記のようなボタン風の表現も可能になります。
※CCS3未対応のブラウザーでは、【CSS3 Button Sample】のみが表示さえれています。
これは、CSS3の強化された装飾機能の一部です。
このほかにも多数の装飾表現が可能です。
画像を使わずにここまで表現できるようになったおかげで、サイトのデータ量をかなり減らすことが可能になります。また、同時に制作時間の短縮等にもなり、我々サイト製作者にとっては非常にありがたいものになっています。
スマートフォンもこのCSS3に対応していますので、スマートフォンサイトでは、本当にお世話になっています。
もし、上記の二箇所が表示されない、古いブラウザーをご使用でしたら、是非、新しいブラウザーに変更してください。
神奈川県を中心として主に横浜・川崎・東京23区西部の中小企業・個人事業主向けホームページを制作しております。 横浜本田WEB
横浜本田WEB Facebookページ
http://www.facebook.com/hondaweb?fref=ts
