注目機能その2:CSSトランジションパネル


■CSSトランジションパネルとは何か？

「Dreamweaver CS6」には、CSS3によるトランジション効果を、コードを記述することなく簡単に設定できる「CSSトランジションパネル」が用意されている。CSSトランジションパネルを使えば、新規トランジションの追加や、既存のトランジションの修正を直感的に行うことができるのだ。

■CSSトランジションパネルの使い方

「ウィンドウ」から「CSSトランジション」をクリックすると、CSSトランジションパネルが開く。この機能を使うにあたって、事前に対象となる要素を選択しておく必要はない。開いたウィンドウには「＋」ボタンがあるので、まずはこれをクリックする。

コンテナ移動後、タブレット向けレイアウト

CSSトランジションパネル

「新規トランジションパネル」設定の例として、次のように指定する。「ターゲットルール」のプルダウンメニューから指定したい要素を選択し、「トランジションを有効にする」のプルダウンからは「hover」を選択。「デュレーション」(変化にかかる時間)を「.5」(s)、「遅延」(アニメーション開始までの時間)は空白(または0)、「タイミング機能」(加速効果などのイージング)は空白のまま設定し、「プロパティ」(どのCSSプロパティに設定するか)には「color」を選択し、「終了値」を「#930」と設定する。

「新規トランジションパネル」の設定

この設定を行ったことで、「マウスオーバー時に文字色を0.5秒かけて#333から#999に変化させる」というアニメーションを、コードに触ることなく設定できた。自動的に記述されたソースコードは以下の通りだ。

「CSSトランジションパネル」の設定によって自動的に記述されたコード

入力した要素のCSSルールは、書き込み先のCSSルールの末尾に記述される。要素の直下の部分に移動しておいた方がよいだろう。

慣れていれば難しくないコードではあるが、この新機能を使えば入力がより楽になり、作業スピードも格段にあがる。ちなみに、再編集する際は、パネルのインスタンス名をダブルクリックすることで操作できるようになる。