Spry 縮小可能パネル Widget の操作

注意:

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

縮小可能パネル Widget について

縮小可能パネル Widget は、わずかなスペースにコンテンツを格納できるパネルです。縮小可能パネルに格納されたコンテンツは、ユーザーが Widget のタブをクリックすると表示/非表示が切り替わります。次に示すのは、縮小可能パネル Widget が展開された例と縮小された例です。

A. 展開 B. 縮小 

縮小可能パネル Widget の HTML は、外側の div タグと、このタグに含まれるコンテンツ div タグおよびコンテナ div タグで構成されます。縮小可能パネル Widget の HTML には、ドキュメントの head 内と縮小可能パネルの HTML マークアップの後の script タグも含まれます。

縮小可能パネル Widget の動作およびコードについて詳しくは、www.adobe.com/go/learn_dw_sprycollapsiblepanel_jp を参照してください。

縮小可能パネル Widget の挿入と編集

縮小可能パネル Widget の挿入

  1. 挿入/Spry/Spry 縮小可能パネルを選択します。
注意:

挿入パネルの「Spry」カテゴリを使用して縮小可能パネル Widget を挿入することもできます。

デザインビューで縮小可能パネルを開くまたは閉じる

  1. 次のいずれかの操作を実行します。
    • デザインビューでパネルのタブの上にマウスポインターを置き、タブの右に表示される目のアイコンをクリックします。

    • ドキュメントウィンドウで縮小可能パネル Widget を選択し、プロパティインスペクター(ウィンドウ/プロパティ)の表示ポップアップメニューから「開く」または「閉じた状態」を選択します。

縮小可能パネル Widget の初期設定状態の設定

Web ページがブラウザーに読み込まれたときの、縮小可能パネル Widget の初期設定の状態(開いた状態または閉じた状態)を設定できます。

  1. ドキュメントウィンドウで、縮小可能パネル Widget を選択します。
  2. プロパティインスペクター(ウィンドウ/プロパティ)で、初期設定の状態ポップアップメニューから「開く」または「閉じた状態」を選択します。

縮小可能パネル Widget のアニメーションの有効と無効の切り替え

初期設定では、縮小可能パネル Widget のアニメーションを有効にすると、ユーザーがパネルのタブをクリックしたときにパネルが滑らかに開閉します。アニメーションを無効にすると、縮小可能パネル Widget が瞬間的に開閉します。

  1. ドキュメントウィンドウで、縮小可能パネル Widget を選択します。
  2. プロパティインスペクター(ウィンドウ/プロパティ)で、「アニメーションを有効にする」チェックボックスをオンまたはオフにします。

縮小可能パネル Widget のカスタマイズ

プロパティインスペクターでは、縮小可能パネル Widget の簡単な編集は可能ですが、カスタマイズされたスタイル設定タスクはサポートされません。縮小可能パネル Widget に関する CSS を変更すると、自由にスタイル設定した縮小可能パネルを作成できます。

縮小可能パネル Widget のカラーの変更についてのクイックリファレンスは、David Powers の Quick guide to styling Spry tabbed panels, accordions, and collapsible panels(英語)を参照してください。

高度なスタイル設定タスクについて詳しくは、www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_jp を参照してください。

次のトピックに登場する CSS ルールは、すべて SpryCollapsiblePanel.css ファイルに格納された初期設定ルールです。Spry 縮小可能パネル Widget を作成すると、Dreamweaver によってサイトの SpryAssets フォルダーに SpryCollapsiblePanel.css ファイルが保存されます。このファイルには、Widget に適用される様々なスタイルに関する、役に立つコメント付き情報も含まれています。

注意:

縮小可能パネル Widget に関するルールは、対応する CSS ファイルで直接編集することもできますが、CSS スタイルパネルを使用して縮小可能パネルの CSS を編集することもできます。CSS スタイルパネルでは、Widget の様々な部分に割り当てられた CSS クラスを見つけやすくなっています。特に「現在」モードがこの点に優れています。

縮小可能パネル Widget のテキストのスタイル設定

縮小可能パネル Widget のテキストのスタイルを設定するには、縮小可能パネル Widget コンテナ全体のプロパティを設定するか、Widget の各コンポーネントのプロパティを個別に設定します。

  1. 縮小可能パネル Widget のテキストフォーマットを変更するには、次の表を使用して適切な CSS ルールを見つけ、独自のテキストスタイルプロパティおよび値を追加します。

    変更するスタイル

    関連する CSS ルール

    追加または変更するプロパティおよび値の例

    縮小可能パネル全体のテキスト

    .CollapsiblePanel

    font: Arial; font-size:medium;

    パネルタブのみのテキスト

    .CollapsiblePanelTab

    font: bold 0.7em sans-serif;(これが初期設定値です)

    コンテンツパネルのみのテキスト

    .CollapsiblePanelContent

    font: Arial; font-size:medium;

縮小可能パネル Widget の背景色の変更

  1. 縮小可能パネル Widget の様々な部分の背景色を変更するには、次の表を使用して適切な CSS ルールを見つけ、背景色プロパティおよび値を必要に応じて追加または変更します。

    変更する色

    関連する CSS ルール

    追加または変更するプロパティおよび値の例

    パネルタブの背景色

    .CollapsiblePanelTab

    background-color: #DDD;(これが初期設定値です)

    コンテンツパネルの背景色

    .CollapsiblePanelContent

    background-color: #DDD;

    パネルが開いているときのタブの背景色

    .CollapsiblePanelOpen .CollapsiblePanelTab

    background-color: #EEE;(これが初期設定値です)

    マウスポインターが上にあるときの、開いたパネルタブの背景色

    .CollapsiblePanelTabHover、.CollapsiblePanelOpen .CollapsiblePanelTabHover

    background-color: #CCC;(これが初期設定値です)

縮小可能パネルの幅の固定

初期設定では、縮小可能パネル Widget は使用可能なスペースいっぱいに拡張されます。ただし、縮小可能パネルのコンテナの幅プロパティを設定すると、縮小可能パネル Widget の幅を制限できます。

  1. SpryCollapsible Panel.css ファイルを開き、.CollapsiblePanel CSS ルールを見つけます。このルールは、縮小可能パネル Widget のメインコンテナエレメントのプロパティを定義します。
    注意:

    縮小可能パネル Widget を選択して CSS スタイルパネル(ウィンドウ/CSS スタイル)を調べることによってルールを探すこともできます。パネルが「現在」モードに設定されていることを確認します。

  2. このルールに、width: 300px; のように幅プロパティと値を追加します。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト