Dreamweaver での Apply Spry 効果

検索
注意：

Spry Widget は、Dreamweaver CC 以降では jQuery Widget に置き換えられています。既存の Spry Widget を変更できますが、新しい Spry Widget を追加することはできません。

Spry 効果の概要

Spry 効果 は、JavaScript を使用して HTML ページのほぼすべてのエレメントに適用できる視覚効果です。効果は、情報の強調、移行アニメーションの作成、ページエレメント外観の一時的な変更などによく使用されます。HTML エレメントに効果を適用するときに、追加のカスタムタグは不要です。

注意：

エレメントに効果を適用するには、そのエレメントが現在選択されているか、ID を持っている必要があります。例えば、現在選択されていない div タグにハイライト表示を適用する場合は、この div が有効な ID 値を持つ必要があります。このエレメントに有効な ID 値がない場合は、その HTML コードに有効な ID 値を追加する必要があります。

効果を使用すると、エレメントの透明度、拡大/縮小率、位置、スタイルプロパティ（背景色など）を変更できます。複数のプロパティを組み合わせると、おもしろい視覚効果を作成できます。

これらの効果は Spry をベースにしているため、効果が適用されたエレメントをユーザーがクリックすると、HTML ページ全体が更新されることなく、そのエレメントのみが動的に更新されます。

Spry には次の効果があります。

表示/フェード

エレメントを表示またはフェードアウトします。

ハイライト

エレメントの背景色を変更します。

ブラインド

上下に動く窓用ブラインドのようにエレメントの表示/非表示を切り替えます。

スライド

エレメントを上下に動かします。

拡張/縮小

エレメントのサイズを拡大または縮小します。

シェイク

左から右へのエレメントの揺れをシミュレートします。

スキッシュ

エレメントをページの左上隅に消します。

注意：

効果を使用すると、コードビューでファイルに様々なコード行が追加されます。1 つの行では SpryEffects.js ファイルを特定しています。これは効果を含めるために必要です。この行をコードから削除しないでください。削除した場合効果が機能しなくなります。

Spry フレームワークで使用可能な Spry 効果について詳しくは、www.adobe.com/go/learn_dw_spryeffects_jp を参照してください。

表示/フェード効果の適用

注意：

この効果は、applet、body、iframe、object、tr、tbody、および th を除くすべての HTML エレメントで使用できます。

  1. （オプション）この効果を適用するコンテンツまたはレイアウトエレメントを選択します。
  2. ビヘイビアーパネル（ウィンドウ／ビヘイビアー）で「+」ボタンをクリックし、メニューから効果／表示 / フェードを選択します。
  3. ターゲットエレメントメニューからエレメントの ID を選択します。既にエレメントを選択してある場合は、<現在の選択範囲> を選択します。
  4. 「効果の期間」ボックスで、効果が持続する時間の長さをミリ秒単位で指定します。
  5. 「フェード」と「表示」のどちらの効果を適用するかを選択します。
  6. 「開始」ボックスで、効果が表示されたときの透明度（％）を指定します。
  7. 「終了」ボックスで、フェード終了時の透明度（％）を指定します。
  8. クリックするたびにフェードと表示が切り替わるようにするには、「効果の切り替え」を選択します。

ブラインド効果の適用

注意：

この効果を使用できる HTML エレメントは、address、dd、div、dl、dt、form、h1、h2、h3、h4、h5、h6、p、ol、ul、li、applet、center、dir、menu、pre のみです。

  1. （オプション）この効果を適用するコンテンツまたはレイアウトエレメントを選択します。
  2. ウィンドウ／ビヘイビアーを選択してビヘイビアーパネルを開き、「+」ボタンをクリックして、メニューから効果／ブラインドを選択します。
  3. ターゲットエレメントメニューからエレメントの ID を選択します。既にエレメントを選択してある場合は、<現在の選択範囲> を選択します。
  4. 「効果の期間」ボックスで、効果が持続する時間の長さをミリ秒単位で指定します。
  5. 「ブラインドアップ」と「ブラインドアップダウン」のどちらの効果を適用するかを選択します。
  6. 「ブラインドアップ開始」/「ブラインドダウン開始」ボックスで、ブラインドスクロールの開始点を割合（％）またはピクセルス数で指定します。これらの値はエレメントの上部から計算します。
  7. 「ブラインドアップ終了」/「ブラインドダウン終了」ボックスで、ブラインドスクロールの終点を割合（％）またはピクセルス数で指定します。これらの値はエレメントの上部から計算します。
  8. クリックするたびにスクロールアップとスクロールダウンが切り替わるようにするには、「効果の切り替え」を選択します。

拡張/縮小効果の適用

注意：

この効果を使用できる HTML エレメントは、address、dd、div、dl、dt、form、p、ol、ul、applet、center、dir、menu、pre です。

  1. （オプション）この効果を適用するコンテンツまたはレイアウトエレメントを選択します。
  2. ビヘイビアーパネル（ウィンドウ／ビヘイビアー）で「+」ボタンをクリックし、ポップアップメニューから効果／拡張 / 縮小を選択します。
  3. ターゲットエレメントポップアップメニューからエレメントの ID を選択します。既にエレメントを選択してある場合は、<現在の選択範囲> を選択します。
  4. 「効果の期間」フィールドで、効果が持続する時間の長さをミリ秒単位で指定します。
  5. 「拡張」と「縮小」のどちらの効果を適用するかを選択します。
  6. 「拡張の開始」/「縮小の開始」ボックスで、効果が開始されるときのエレメントのサイズを指定します。これはサイズの割合（％）またはピクセル数で入力します。
  7. 「拡張の終了」/「縮小の終了」ボックスで、効果が終了するときのエレメントのサイズを指定します。これはサイズの割合（％）またはピクセル数で入力します。
  8. 「拡張の開始」/「縮小の開始」または「拡張の終了」/「縮小の終了」ボックスでピクセルス数を選択した場合は、幅/高さフィールドが表示されます。選択したオプションに応じて、エレメントが比例的に拡張または縮小します。
  9. エレメントの拡張または縮小をページの左上隅に向かって行うか、ページの中央に向かって行うかを選択します。
  10. クリックするたびに拡張と縮小が切り替わるようにするには、「効果の切り替え」を選択します。

ハイライト効果の適用

注意：

この効果は、applet、body、frame、frameset、および noframes を除くすべての HTML エレメントで使用できます。

  1. （オプション）この効果を適用するコンテンツまたはレイアウトエレメントを選択します。
  2. ビヘイビアーパネル（ウィンドウ／ビヘイビアー）で、「+」ボタンをクリックして、メニューから効果／ハイライトを選択します。
  3. ターゲットエレメントメニューからエレメントの ID を選択します。既にエレメントを選択してある場合は、<現在の選択範囲> を選択します。
  4. 「効果の期間」ボックスで、効果が持続する時間の長さをミリ秒単位で指定します。
  5. ハイライト開始時のカラーを選択します。
  6. ハイライト終了時のカラーを選択します。このカラーは、「効果の期間」で指定した長さだけ持続します。
  7. ハイライト完了後のエレメントのカラーを選択します。
  8. クリックするたびにハイライトカラーのサイクルが繰り返されるようにするには、「効果の切り替え」を選択します。

シェイク効果の適用

注意：

この効果を使用できる HTML エレメントは、address、blockquote、dd、div、dl、dt、fieldset、form、h1、h2、h3、h4、h5、h6、iframe、img、object、p、ol、ul、li、applet、dir、hr、menu、pre、および table です。

  1. （オプション）この効果を適用するコンテンツまたはレイアウトエレメントを選択します。
  2. ビヘイビアーパネル（ウィンドウ／ビヘイビアー）で、「+」ボタンをクリックし、メニューから効果／シェイクを選択します。
  3. ターゲットエレメントメニューからエレメントの ID を選択します。既にエレメントを選択してある場合は、<現在の選択範囲> を選択します。

スライド効果の適用

スライド効果が正しく機能するためには、固有の ID を持つコンテナタグでターゲットエレメントがラッピングされている必要があります。ターゲットエレメントのラッピングに使用できるコンテナタグは、blockquote、dd、form、div、または center のいずれかです。

ターゲットエレメントとして指定できるタグは、blockquote、dd、div、form、center、table、span、input、textarea、select、または image のいずれかです。

  1. （オプション）この効果を適用するコンテンツを含んだコンテナタグを選択します。
  2. ビヘイビアーパネル（ウィンドウ／ビヘイビアー）で、「+」ボタンをクリックして、メニューから効果／スライドを選択します。
  3. ターゲットエレメントメニューから、コンテナタグの ID を選択します。目的のコンテナが既に選択されている場合は、<現在の選択範囲> を選択します。
  4. 「効果の期間」フィールドで、効果が持続する時間の長さをミリ秒単位で指定します。
  5. 「スライドアップ」と「スライドダウン」のどちらの効果を適用するかを選択します。
  6. 「スライドアップ開始」ボックスで、スライドの開始点を割合（％）またはピクセル数で指定します。
  7. 「スライドアップ終了」ボックスで、スライドの終点を割合（％）または正のピクセル数で指定します。
  8. クリックするたびにスライドアップとスライドダウンが切り替わるようにするには、「効果の切り替え」を選択します。

スキッシュ効果の適用

注意：

この効果を使用できる HTML エレメントは、address、dd、div、dl、dt、form、img、p、ol、ul、applet、center、dir、menu、および pre のみです。

  1. （オプション）この効果を適用するコンテンツまたはレイアウトエレメントを選択します。
  2. ビヘイビアーパネル（ウィンドウ／ビヘイビアー）で、「+」ボタンをクリックし、メニューから効果／スキッシュを選択します。
  3. ターゲットエレメントメニューからエレメントの ID を選択します。既にエレメントを選択してある場合は、<現在の選択範囲> を選択します。

追加効果の適用

同じエレメントに複数の効果ビヘイビアーを関連付けて、おもしろい結果を生むことかできます。

  1. （オプション）この効果を適用するコンテンツまたはレイアウトエレメントを選択します。
  2. ビヘイビアーパネル（ウィンドウ／ビヘイビアー）で、「+」ボタンをクリックし、効果メニューから効果を 1 つ選択します。
  3. ターゲットエレメントメニューからエレメントの ID を選択します。既にエレメントを選択してある場合は、<現在の選択範囲> を選択します。

効果の削除

エレメントから効果ビヘイビアーを削除できます。

  1. （オプション）この効果を適用するコンテンツまたはレイアウトエレメントを選択します。
  2. ビヘイビアーパネル（ウィンドウ／ビヘイビアー）で、ビヘイビアーのリストから削除する効果をクリックします。
  3. 次のいずれかの操作を実行します。

    • サブパネルタイトルバーのイベント削除「-」ボタンをクリックします。

    • ビヘイビアーを右クリックするか（Windows）、Control キーを押しながらクリックし（Mac OS）、「ビヘイビアーの削除」を選択します。

アドビのロゴ

アカウントにログイン

クイックリンク

すべてのプランを表示 プランを管理

リーガルノーティス    |    プライバシーポリシー