Dreamweaver CS5.5のCSS3対応デモンストレーション
続いて、デモ用カンプを用いながら、Dreamweaver CS5.5のCSS3対応について解説が行われた。
「HTML5は、Webデザイナーの視点からみると、CSS3が大きなポイントと言えるでしょう。CSS3のおかげで、今までで困難だったことの数多くを解決できるようになりました」
このカンプは、今までであれば実装が難しい、もしくは大変な手間がかかるデザインが多く含まれている。例えば、半透明で角丸なボックス、円形で傾いたオブジェクトなど。こうしたデザインも、Dreamweaver CS5.5でCSS3を駆使すると、簡単に実装できるという。Rewis氏は、Dreamweaver CS5.5を起動し、左側をソースビュー、右側をライブビューに切り替えてから解説を続けた。
「ライブビューは、実際にブラウザーで表示される画面に限りなく近いので、私は作業する時にライブビューを常にオンにしています」
まずは、半透明で角丸なボックスの実現から。スクリーン上で組まれたHTMLでは、ボックスが半透明の白ではなく不透明な白になっていたが、もちろんカンプ上では白ではない。また、色指定は「#FFFFFF」という以前のCSSの方式で指定されていた。新しい色指定についてRewis氏は次のように語る。
「#FFFFFFというヘキサ形式で定義していますが、これだと非常にわかりづらい。CSS3では、必ずしもヘキサ形式を使う必要はありません。RGBAやHSLAといったデザイナーに馴染みのある形式で定義することが可能です。そして、Dreamweaver CS5.5ではこの形式に対応しました。ちなみにRGBAやHSLAの最後についているAはアルファ値で、この値によって透明度を変化させることができます」
そして、実際に色指定をRGBで指定し直したあと、Aに相当する値を0.7くらいに変更することで半透明なビジュアルを実現した。
続いてRewis氏が取りかかったのは、角丸だ。角丸もCSS3ではborder-radiusプロパティを指定をすることで実現できる。Dreamweaver CS5.5のプロパティリストからborder-radiusを選択することで、簡単に入力を行うことができた。
Rewis氏によると、他のツールで角丸の細かな指定を行う場合、「何度も試行錯誤したい時は、その都度ファイルを保存してブラウザーで表示してリロードして」という手順が必要になるが、ライブビューを使えばリアルタイムに反映されるので、この煩雑な作業が解消されるという。
角丸の応用として次にRewis氏が紹介したのは、デザイナーのカンプでは円形だったボックス部分の修正だ。現状では四角いボックスになってしまっているこの部分もborder-radiusを応用することで実装が可能だという。Dreamweaverのソースビュー上で、デザイナーのカンプでは丸だった部分の指定に「border-radius」を途中まで入力すると、プロパティが補完される様子がスクリーンに表示された。
この円形のボックスは、カンプ上では少し傾いていた。Rewis氏は、オブジェクトの回転についてCSS3を使って実現可能な旨を説明しながら、transformというプロパティを使い、rotateを15度回転と指定し、ページをリフレッシュした。スクリーン上では変化が起きない。
「実は、CSS3の機能の全てをブラウザーがサポートしているわけではないのです。現在ブラウザーごとに先行実装という形で実現している機能は、『ベンダースペシフィックプレフィックス』と呼ばれるプレフィックスをプロパティの先頭につけることで暫定的に利用できるということになっています。ご安心ください、ベンダースペシフィックプレフィックスもDreamweaver CS5.5はサポートしています」
そしてソースビュー上で、transformプロパティにOpera／Safari／Chrome／Firefox／Internet Explorer向けのプレフィックスをつけることが可能であるとデモを行った。
