Internet Explorer 9の登場
今年の4月にInternet Explorer 9が公開されたことで、WEB制作現場において本格的にHTML5+CSS3の使用が浸透してきたことと思う。
HTML5やCSS3を実装することでよりダイナミックなWEBデザインが可能となり、HTMLはこれまではプログラム言語として認識されていたものが、WEBアプリ開発言語として様相を変えつつある。
レンダリングエンジンを有効活用
さて「2」から「3」へと進化したCSSだが、私はIE9デビュー以前から意欲的に導入していた。
と、言ってももちろんそれによってマークアップを激変させなければいけないような手法や、それひとつでブラウザによって著しく表示に差異が生じるもの、また本来デザインによって伝えなけれえばならないことがぶれてしまうような使い方はもちろんせず、あくまで「許せる程度」で、である。実験的にという意味合いもあり、いろいろ試してはきたが、今回紹介するのは「border-radius」だ。
既にCSSにおいてお馴染みとなっている「border-radius」だが、多くのモダンブラウザでは早くからHTMLレンダリングエンジンでサポートされていることもあり、あまり躊躇なく導入することができていた。角丸をフレキシブルなボックス等に容易に実装でき、ドロップシャドウなどと併用することで簡単におしゃれなボックスが出来てしまう。
-moz-border-radius: 5px; ←Mozilla
-khtml-border-radius: 5px; ←Safari
-webkit-border-radius: 5px; ←Chrome等
border-radius: 5px;
その昔は、上辺と底辺の角丸画像を入れたdivを2枚重ねにしたり、
こんな角丸画像を四方に置いたり、角丸にしたいがばかりに四苦八苦したものだった。
今後CSS3ではモジュール化が進みこれまでよりも、より自由度の高いユーザエージェントとの関わりを持たすことができる。
今までは「このくらいは…」という気持ちで使っていたものが、大胆に導入していくことができると思うとわくわくしてたまらない。
写真にもイラストにも適し、背景に透過させる半透明グラフィックなどの表現もできる「PNG」画像だが、大きなデメリットもある。IE6では透過せず背景がグレーになってしまうことだ。しかし透過PNGをIE6に対応させる方法はたくさんある。そのひとつが
