こんにちは、イマジカデジタルスケープの伊藤和博です。
今週は、Dreamweaver CS6のCSS3の新機能、特に、CSSトランジションに関する新機能をご紹介していきます。
Dreamweaverは CS5.5の時から、CSS3に関する機能は追加されてきていますが、そもそもこのCSS3の機能をご紹介する前に、CSS3の書き方を理解しておいてから、Dreamweaver上での使い方を理解する、という形になるため、今回はCSS3の一部も合わせてご紹介します。


●CSSスタイルパネル


こちらはCS5.5からの新機能となりますが、新規でCSSを作成したり、既存のCSSに対して新しいセレクタを追加する方法の一つとして、CSSスタイルパネルからプロパティの追加というリンクをクリックして作成する方法がありますが、この時、top、bottom、x、yの値など、値を指定する箇所を個別に指定できるセレクタの場合に、編集というボタンが表示されるようになり、そのボタンから直接値を入れることが可能になりました。




●CSSトランジション


今回のブログでご紹介したい機能はこのCSSトランジションの機能になりますが、その前に、CSS3トランジションの書き方からご説明する必要があるかと思いますのでご紹介します。
CSSトランジションとは、CSS3だけでできるアニメーションの一つで、例えば、マウスカーソルを重ねたときに、対象のカラーやサイズを変更する、というようなものです。
CSS3では、まず以下を設定しておく必要があります。

・マウスカーソルを重ねる前の状態(例えば、font-size:10px;とbackground-color:gray;など)
・マウスカーソルを重ねた時の状態(例えば、font-size:18px;とbackground-color:white;など)
・マウスカーソルを重ねた時に、何をトランジションしたいか?の指定(font-sizeとbackground-colorのうち、font-sizeだけ、または両方など)
・マウスカーソルを重ねた時に、トランジションしている時間と、重ねてから何秒後からトランジションを始めるか?の遅れの指定(例えば、アニメーションとして動いている時間は1秒間で、マウスカーソルを添えてから1秒後にアニメーションを開始する、など)

例えば、リストの各行にマウスカーソルを添えたときに、元々10pxだった文字サイズが、1秒間かけて18pxに大きくなる、というトランジションを設定する場合のCSSは以下のようになります。

○リストタグ
------------------------------------------------------------
li {
font-size:10px;/*0*/
-webkit-transition: all 1s linear 1s;/*1*/
}
------------------------------------------------------------
または、個別に以下のように書くことも可能です。
------------------------------------------------------------
li {
font-size:10px;
-webkit-transition-property:background-color,font-size;/*2*/
-webkit-transition-duration:1s,1s;/*3*/
-webkit-transition-delay:0s,1s;/*4*/
}
------------------------------------------------------------
○リストのホバー
これに、hoverの状態を別途加えます。
------------------------------------------------------------
li:hover {/*5*/
background-color: rgba(255,255,255,.4);
font-size:18px;
}
------------------------------------------------------------

/*0*/:font-sizeを指定し、リストの最初のフォントサイズを設定しておく。
/*1*/:transition:プロパティ 再生時間 補間方法 ディレイの順番で、半角スペースで空けて指定。
・プロパティallの場合は、li:hoverで指定する全てのプロパティの意味。
・再生時間は、再生している時間の指定。1sで1秒間でトランジションを完了します。
・補間方法は、再生スピードの設定で、FLASHでおなじみのease-inやease-outの設定が可能。linearにすると、一定の速度、の意味。
・ディレイは、アニメーションを開始する遅れの時間指定。この場合、マウスカーソルを添えてから、1秒後にトランジションがスタート。
/*2*/:トランジションさせる対象の指定。カンマ区切りで複数を対象にすることが可能。
/*3*/:最初のプロパティの再生時間がbackground-colorに対する時間。カンマで区切り、2つ目font-sizeの再生時間を指定。
/*4*/:最初のプロパティ(background-color)は0のためすぐ開始。カンマ区切りで2つ目font-sizeが1秒遅れで開始。
/*5*/:li:hoverで、リストにマウスカーソルを添えた時に、どうしたいか?の指定。バックグラウンドカラーを白の不透明度40%に、フォントサイズを18pxにしたい。

transition: all 1s linear 1sのように、まとめて書くか、またはtransition-property、transition-duration、transition-delayというように個別に設定します。
transitionを書くときの注意点としては、hoverの方ではなく、liの方に設定します。
これらを書ける方はコードビュー上で書いて全然問題ないわけですが、これらを書く作業が、CS6から新たに追加されたCSSトランジションパネル上で簡単に設定できるようになっています。

ウインドウメニュー→CSSトランジションを選択し、CSSトランジションパネルを表示します。CSSトランジションパネルの+ボタンをクリックすると、新規トランジションのウインドウが表示されるため、今回は上記のCSSと同様にする場合を例に設定してみます。






ターゲットのルールの箇所ではliを選択しますが、気をつけることとして、そもそもliに対するCSSを作っていない場合は、このターゲットのルールにliが表示されません。そのため、前もってliに対するCSSを内部CSSまたは外部CSSとして作っておく必要があります。




また、CSSトランジションパネルの左上にある+マークは、htmlファイルを選択しておかないとアクティブになりません。まず、htmlファイルを選択しておき、次にCSSスタイルパネルで、CSSトランジションを作成するCSS(内部に書くのか、外部に書くのか)を選択してから、CSSトランジションパネルの左上にある+マークをクリックして作成します。




今回は外部CSSに作成しましたが、以下の通り既存のliへのCSS内に、ベンダープレフィックス付きでCSSトランジションとhoverを書き出します(hoverの書き出し位置が気になりますが、まあよしでしょうか・・)。




CSSトランジションというものそのものの指定がわかっていれば、コードビューで書いてもいいですし、新機能を使って作成してもいいですし、これはお好みになりますね。ただし、このCSSトランジションは以前のブログでご紹介したFireworks CS6のCSSプロパティパネルでは実現するのが難しい機能ですので、Dreamweaverでするしかなさそうです。



もっとDreamweaverの使い方やCSS3を詳しく知りたい方は!
Dreamweaver CS5の使い方・基本トレーニング
HTML5・CSS3の基礎知識(PC・スマートフォン)の受講がオススメです!
※CS6関連トレーニングは、開講準備中です。


▼Dreamweaver CS5の使い方・基本トレーニング


▼HTML5・CSS3の基礎知識(PC・スマートフォン)




イトウ先生が、Twitterを始めました!
みなさんもぜひ、フォローしてくださいね!

http://twitter.com/itoh_sensei




■■イトウ先生のTipsNote(実践・新機能コンテンツ)アーカイブ■■


基本トレーニングの受講後に、さらに学習しておきたい内容やTips、新機能を、隔週1回(月2回)で公開しています。


●Macintosh基本操作編(意外と知らない操作も多い!?)
○入力モードや変換のショートカット
○デスクトップで使えるショートカット
○階層やファイルパスの把握に便利な機能

●Illustrator(AI)
○アウトライン化と孤立点の削除について
○データを軽く作る方法について
○シンボルの親子関係について・その1
○編集モード
○シンボルの親子関係について・その2
○カラーパネルの「使えるショートカット」
○カラー一括変換のグローバルスウォッチとは
○配置した画像のすばやい編集方法
○CS5新機能01:すべてのアートボードにペースト
○CS5新機能02:内側描画と背面描画
○CS5新機能03:Web・インタラクション用のデザイン
○CS5新機能04:遠近描画
○CS5新機能05:線パネルと線幅ツール
○AIのテキストのアピアランス
○SVGインタラクティビティ
○CS6の新機能:線へのグラデーションと不透明マスク・矩形以外のパターン図柄登録

●Photoshop(PS)
○消しゴムツールの活用
○ななめの画像をまっすぐにする方法
○自然な合成テクニック・角版
○自然な合成テクニック・切り抜き画像
○画像合成後の便利なショートカット
○調整レイヤー
○レイヤーパネルの不透明度と塗りについて
○不透明度のショートカット
○CS5新機能01:「コンテンツに応じる」機能
○CS5新機能02:絵筆ブラシと混合ブラシ
○CS5新機能03:人の記憶に近い画像・HDRについて
○CS5新機能04:パペットワープ
○CS5新機能05:3Dオブジェクトとアニメーション
○美しいモノクロ画像の作り方
○境界部分をきれいにカラー変更する方法
○Photoshop CS6 特集・その1(全3回)
○Photoshop CS6 特集・その2(全3回)
○Photoshop CS6 特集・その3(全3回)

●FLASH(FL)
○Illustratorだけでできる、Flashアニメ
○CS5新機能01:IKボーンスプリングでバネアニメ
○CS5新機能02:コードスニペットパネルで簡単ActionScript3.0
○CS5新機能03:パターン描画ツール
○CS5.5新機能01
○CS6の新機能01:Toolkit for Create JS・その1
○CS6の新機能01:Toolkit for Create JS・その2

●InDesign(ID)
○CS5新機能01:マルチステートを使った、IDからFlashアニメの作り方
○CS5新機能02:アニメーションパネルとタイミングパネルを使った、IDのモーションプリセット
○CS5新機能03:キャプションの自動作成機能
○CS5新機能04:オブジェクトの間隔と配置
○CS5新機能05:画像一括貼り替え
○CS5.5新機能01:EPUB書き出し
○CS5.5新機能02:アンカー付きオブジェクト
○データ結合(メールマージ)
○CS6の新機能1:レイアウト・リキッドレイアウトと、ePub書き出し
○CS6の新機能2:コンテンツ収集ツール・コンテンツ配置ツール・リンクとして配置

●Dreamweaver(DW)
○CS5新機能01:新しいサイト定義と、CSSスターターレイアウト
○CS5新機能02:HTML5 Pack
○CS5新機能03:スマートフォン検証・CSS3のメディアクエリー
○CS5新機能04:ブラウザ検証便利ツール・Adobe BrowserLabについて
○CS6の新機能1:可変グリッドレイアウト
○CS6の新機能2:jQuery Mobile 1.0 と jQuery Mobile スウォッチ
○CS6の新機能3:CSSトランジション


●AfterEffects(AE)
○CS5新機能01:ロトブラシ
○CS5新機能02:新しい便利なショートカット
○CS5 パペットアニメーションと、時間反転キーフレーム
○CS5 ビデオや画像の型抜きについて「トラックマットとステンシルアルファ」
○CS5 動画の動きを捕らえて、他のレイヤーに適用する「モーショントラック」
○CS5.5 ワープスタビライザー
○CS5.5 ブラー・互換・タイムコード
○CS5.5 「シャドウを落とす・受ける」機能
○CS5.5 エクスプレッション・その1
○CS5.5 エクスプレッション・その2
○CS5.5 エクスプレッション・その3
○CS6の新機能1:ベクトルレイヤーからシェイプを生成
○CS6の新機能2:3Dカメラトラック

●FireWorks(FW)
○CS5新機能01:Device Centralと連携した、スマートフォンのプロトタイプ
○CS5新機能02:divのタイル背景の強化
○レイヤーパネル
○CS6の新機能:CSSプロパティパネル・CSSスプライト書き出し・jQuery Mobile テーマ

●その他
○Adobe Edge(Preview版)
○CS5.5:Adobe Audition「サウンドのカットとフェードイン、フェードアウトの設定」
○CS5.5:Adobe Audition「マルチトラックを使ったサウンド操作」