Dreamweaver CS6のCSS3トランジション

四月 27, 2024

HTML5とCSS3の追加により、インタラクティブなWebサイトが期待されています。今、Dreamweaverで^R CS6と新しいCSSトランジションパネルを使用すると、コードを記述する必要なく、独自のインタラクティブエフェクトを作成できます。このプロセスからの出力はCSS3のみであり、JavaScriptはありません。したがって、視聴者がJavaScriptを有効にしているかどうかを心配する必要はありません。 Dreamweaverで作成されたトランジションは、最新のWebブラウザーで再生できます。

独自のインタラクティブなトランジションを作成するのがどれほど簡単か見てみましょう。遷移は、任意のクラス、ID、またはCSS要素に適用できます。必要なのは、CSSトランジションパネルで値を設定することだけです。

最初のステップは、遷移を適用する要素を選択することです。この例では、メニューリンクになります。
ウィンドウ-CSSトランジションをクリックしてパネルを開きます。
[CSSトランジション]パネルで、プラス記号をクリックしてトランジションを追加します。
[新しい遷移]ダイアログボックスで、[ターゲットルール]メニューを使用して、プリセットから選択するか、遷移の独自の名前を入力できます。名前.morphを入力しましょう。
次に、遷移をトリガーするアクションを選択する必要があります。 [トランジションオン]メニューから[ホバー]を選択して、リンク上にマウスを置いたときにトランジションがトリガーされるようにします。他の選択肢には、アクティブ、チェック済み、無効、有効、フォーカス、ホバー、不確定、ターゲットがあります。
メニューオプションには、2つの選択肢があります。最初を選択しましょう。

すべてのプロパティに同じ遷移を使用します
プロパティごとに異なるトランジションを使用する
遷移の期間と遅延には、秒またはミリ秒を使用できます。 Durationを1秒に、Delayを.05秒に設定してみましょう。
タイミング関数には、いくつかのイージングの選択肢があります。 Ease Outを選択しましょう。
CSSプロパティを追加するには、プラス記号をクリックし、ポップアップリストからプラス記号を選択します。背景色を選択しましょう。
プロパティを選択したら、遷移の終了値を設定できます。選択したプロパティに応じて、[終了値]メニューには、そのプロパティに対応するメニューが表示されます。背景色については、カラーピッカーを取得します。 Font-Weightプロパティを追加すると、プリセットの重みのメニューが表示されます。
最後に、トランジションを作成する場所を選択する必要があります。私たちの選択は、このドキュメントのみまたは新しいスタイルシートファイルです。最初のものを使用しましょう。

[トランジションの作成]ボタンをクリックすると、CSSトランジションパネルにトランジションがリストされ、モーフトランジションがホバーアクションによってトリガーされ、a.morphターゲットに適用されることが示されます。

コードビューを確認すると、モーフクラスがリンクに追加されていることがわかります。

ライブビューのリンクにマウスを合わせると、背景色が変わります。

しかし、トランジションを編集する必要がある場合はどうでしょうか？これを行うには、CSS Transitionsパネルを使用します。

a.morphトランジションを選択すると、編集アイコンがアクティブになります（鉛筆アイコン）。
[編集]アイコンをクリックして、[トランジションの編集]ダイアログボックスを開きます。ここで、必要に応じて値を変更するか、新しいプロパティと終了値を追加できます。

モーフトランジションが作成されたので、ターゲットルールメニューから利用できるようになったため、他の要素に簡単に適用できます。

*アドビは、レビュー目的でこのソフトウェアのコピーを私に提供しました。

Copyright 2018 Adobe Systems Incorporated。全著作権所有。 Adobe Systems Incorporatedの許可を得て、Adobe製品のスクリーンショットを転載しました。 Adobe、Photoshop、Photoshop Album、Photoshop Elements、Illustrator、InDesign、GoLive、Acrobat、Cue、Premiere Pro、Premiere Elements、Bridge、After Effects、InCopy、Dreamweaver、Flash、ActionScript、Fireworks、Contribute、Captivate、Flash CatalystおよびFlash Paper米国および/またはその他の国におけるAdobe Systems Incorporatedの[a]登録商標または商標です。