(オプション)トランジションを適用するエレメント(段落、見出しなど)を選択します。または、トランジションを作成して、後でエレメントに適用することもできます。
- Dreamweaver ユーザーガイド
- はじめに
- Dreamweaver と Creative Cloud
- Dreamweaver のワークスペースとビュー
- サイトの設定
- ファイルの管理
- レイアウトとデザイン
- CSS
- ページコンテンツとアセット
- ページプロパティの設定
- CSS 見出しプロパティおよび CSS リンクプロパティの設定
- テキストの操作
- テキスト、タグ、属性の検索と置換
- DOM パネル
- ライブビューでの編集
- Dreamweaver でのドキュメントのエンコード
- ドキュメントウィンドウでのエレメントの選択および表示
- プロパティインスペクターでのテキストプロパティの設定
- web ページのスペルチェック
- Dreamweaver での区切り線の使用
- Dreamweaver でのフォントの組み合わせの追加と変更
- アセットを使用した作業
- Dreamweaver での日付の挿入と更新
- Dreamweaver でのお気に入りアセットの作成と管理
- Dreamweaver でのイメージの挿入と編集
- メディアオブジェクトの追加
- Dreamweaver でのビデオの追加
- HTML5 ビデオの挿入
- SWF ファイルの挿入
- オーディオエフェクトの追加
- Dreamweaver での HTML5 オーディオの挿入
- ライブラリ項目の操作
- Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
- リンクおよびナビゲーション
- jQuery Widget と効果
- web サイトのコーディング
- Dreamweaver でのコーディングについて
- Dreamweaver のコーディング環境
- コーディングの環境設定
- コードカラーリングのカスタマイズ
- コードの記述と編集
- コードヒントとコード補完機能
- コードの折りたたみと展開
- スニペットでコードを再利用する
- 構文チェックコード
- コードの最適化
- デザインビューでのコードの編集
- ページのヘッドコンテンツの操作
- Dreamweaver でのサーバーサイドインクルードの挿入
- Dreamweaver でのタグライブラリの使用
- Dreamweaver へのカスタムタグの読み込み
- JavaScript ビヘイビアーの使用(基本操作)
- JavaScript に組み込まれているビヘイビアーの適用
- XML および XSLT について
- Dreamweaver でのサーバーサイド XSL 変換の実行
- Dreamweaver でのクライアントサイド XSL 変換の実行
- Dreamweaver での XSLT の文字エンティティの追加
- コードのフォーマット
- 製品間ワークフロー
- テンプレート
- Dreamweaver テンプレートについて
- テンプレートおよびテンプレートから作成されたドキュメントの認識
- Dreamweaver テンプレートの作成
- テンプレート編集可能領域の作成
- Dreamweaver でのリピート領域およびテーブルの作成
- テンプレートの任意の領域の使用
- Dreamweaver での編集可能なタグ属性の定義
- Dreamweaver でネストされたテンプレートを作成する方法
- テンプレートの編集、更新、削除
- Dreamweaver での xml コンテンツの書き出しおよび読み込み
- 既存のドキュメントでのテンプレートの適用または削除
- Dreamweaver テンプレートでのコンテンツの編集
- Dreamweaver でのテンプレートタグのシンタックスルール
- テンプレート領域のハイライト表示の環境設定
- Dreamweaver でテンプレートを使用する利点
- モバイルとマルチスクリーン
- 動的サイト、ページおよび web フォーム
- web アプリケーションについて
- アプリケーション開発のためのコンピューター設定
- データベース接続のトラブルシューティング
- Dreamweaver での接続スクリプトの削除
- 動的ページのデザイン
- 動的コンテンツソースの概要
- 動的コンテンツのソースの定義
- ページへの動的コンテンツの追加
- Dreamweaver での動的コンテンツの変更
- データベースのレコードの表示
- Dreamweaver でのライブデータの入力とトラブルシューティング
- Dreamweaver でのカスタムサーバービヘイビアーの追加
- Dreamweaver を使用したフォームの作成
- フォームを使用したユーザーからの情報の収集
- Dreamweaver での ColdFusion フォームの作成と有効化
- web フォームの作成
- フォームエレメントの HTML5 サポート強化
- Dreamweaver を使用したフォームの開発
- アプリケーションのビジュアル開発
- web サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
CSS トランジションパネルを使用して、CSS3 トランジションを作成、変更、削除できます。
CSS3 トランジションを作成するには、エレメントのトランジションプロパティの値を指定して、トランジションクラスを作成します。エレメントを選択してからトランジションクラスを作成すると、トランジションクラスが選択したエレメントに自動的に適用されます。
生成された CSS コードを現在のドキュメントに追加するか、外部 CSS ファイルを指定するかを選択できます。
CSS3 トランジション効果の作成および適用
-
-
ウィンドウ/CSS トランジションを選択します。
-
をクリックします。
-
新規トランジションダイアログボックスのオプションを使用してトランジションクラスを作成します。
ターゲットルール
セレクターの名前を入力します。セレクターには、タグ、ルール、ID、複合セレクターなどの任意の CSS セレクターを使用できます。例えば、すべての <hr> タグにトランジション効果を追加するには、hr と入力します。
トランジションの有効化
トランジションを適用する状態を選択します。例えば、マウスがエレメント上に移動したときにトランジションを適用する場合は、ホバーオプションを使用します。
すべてのプロパティに同じトランジションを使用
トランジションするすべての CSS プロパティに同じ継続時間、遅延、タイミングを指定する場合は、このオプションを選択します。
プロパティごとに異なるトランジションを使用
トランジションする各 CSS プロパティに異なる継続期間、遅延、タイミングを指定する場合は、このオプションを選択します。
プロパティ
をクリックしてトランジションに CSS プロパティを追加します。
デュレーション
トランジション効果のデュレーションを秒またはミリ秒で入力します。
遅延
トランジション効果が開始するまでの時間(秒またはミリ秒)です。
タイミング機能
選択可能なオプションからトランジションスタイルを選択します。
終了値
トランジション効果の終了値です。例えば、トランジション効果の最後にフォントサイズを 40 px に増やす場合は、フォントサイズのプロパティに 40 px を指定します。
トランジションの作成場所を選択
現在のドキュメントにスタイルを埋め込むには、「現在のドキュメントのみ」を選択します。
CSS3 コード用の外部スタイルシートを作成する場合は、「新規スタイルシートファイル」を選択します。「トランジションを作成」をクリックすると、新しい CSS ファイルの保存場所を指定するよう求められます。作成されたスタイルシートは、トランジションの作成場所を選択メニューに追加されます。
CSS3 トランジション効果の編集
-
CSS トランジションパネルで、編集するトランジション効果を選択します。
-
クリック .
-
トランジションを編集ダイアログを使用して、トランジションに以前に入力した値を変更します。
トランジションの CSS ショートハンドを無効にする
-
編集/環境設定を選択します。
-
CSS スタイルを選択します。
-
「ショートハンドを使用」で、「トランジション」の選択を解除します。