挿入／Spry／Spry アコーディオンを選択します。
最終更新日 :
2021年4月28日
注意：
Spry Widget は、Dreamweaver CC 以降では jQuery Widget に置き換えられています。既存の Spry Widget を変更できますが、新しい Spry Widget を追加することはできません。
アコーディオン Widget について
アコーディオン Widget は、縮小可能なパネルのセットです。アコーディオン Widget を使用すると、わずかなスペースに多くのコンテンツを格納できます。ユーザーがパネルのタブをクリックすると、アコーディオンに格納されたコンテンツの表示/非表示が切り替わります。アコーディオンの各パネルは、ユーザーがクリックしたタブに応じて拡張および縮小されます。各アコーディオンでは、一度に 1 つのコンテンツパネルのみが開いて表示されます。次にアコーディオン Widget の例を示します。この例では 1 番目のパネルが展開されています。
A. アコーディオンパネルタブ B. アコーディオンパネルコンテンツ C. 展開されたアコーディオンパネル
アコーディオン Widget の初期設定 HTML は、すべてのパネルが含まれる外側の div タグ、各パネルの div タグ、各パネルのタグ内のヘッダー div およびコンテンツ div で構成されます。アコーディオン Widget には任意の数のパネルを含めることができます。アコーディオン Widget の HTML には、ドキュメントの head 内とアコーディオンの HTML マークアップの後に script タグも含まれます。
アコーディオン Widget の動作およびコードについて詳しくは、www.adobe.com/go/learn_dw_spryaccordion_jp を参照してください。
アコーディオン Widget の操作に関するチュートリアルについては、www.adobe.com/go/vid0167_jp を参照してください。
アコーディオン Widget の挿入と編集
アコーディオン Widget の挿入
注意：
挿入パネルの「Spry」カテゴリを使用してアコーディオン Widget を挿入することもできます。
アコーディオン Widget へのパネルの追加
-
ドキュメントウィンドウでアコーディオン Widget を選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）のパネル追加「+」ボタンをクリックします。
-
（オプション）パネルの名前を変更する場合は、デザインビューでパネルのテキストを選択し、テキストを変更します。
アコーディオン Widget からのパネルの削除
-
ドキュメントウィンドウでアコーディオン Widget を選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）のパネルメニューで削除するパネルの名前を選択し、マイナス「-」ボタンをクリックします。
パネルを開いて編集
-
次のいずれかの操作を実行します。
デザインビューで開くパネルのタブの上にマウスポインターを置き、タブの右に表示される目のアイコンをクリックします。
ドキュメントウィンドウでアコーディオン Widget を選択し、プロパティインスペクター（ウィンドウ／プロパティ）のパネルメニューで編集するパネルの名前をクリックします。
パネルの順序の変更
-
ドキュメントウィンドウでアコーディオン Widget を選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、移動するアコーディオンパネルの名前を選択します。
-
上向き矢印または下向き矢印をクリックしてパネルを上または下に移動します。
アコーディオン Widget のカスタマイズ
プロパティインスペクターでは、アコーディオン Widget の簡単な編集は可能ですが、カスタマイズされたスタイル設定タスクはサポートされません。アコーディオン Widget に関する CSS ルールを変更すると、自由にスタイル設定したアコーディオンを作成できます。
アコーディオン Widget のカラーの変更についてのクイックリファレンスは、David Powers の Quick guide to styling Spry tabbed panels, accordions, and collapsible panels（英語）を参照してください。
高度なスタイル設定タスクについて詳しくは、www.adobe.com/go/learn_dw_spryaccordion_custom_jp を参照してください。
次のトピックに登場する CSS ルールは、すべて SpryAccordion.css ファイルに格納された初期設定ルールです。Spry アコーディオン Widget を作成すると、Dreamweaver によってサイトの SpryAssets フォルダーに SpryAccordion.css ファイルが保存されます。このファイルには、その Widget に適用される様々なスタイルに関するコメント付き情報も格納されます。このため、このファイルを参照すると役に立つ場合があります。
注意：
アコーディオン Widget に関するルールは CSS ファイルで直接編集することもできますが、CSS スタイルパネルを使用してアコーディオンの CSS を編集することもできます。CSS スタイルパネルでは、Widget の様々な部分に割り当てられた CSS クラスを見つけやすくなっています。特に「現在」モードがこの点に優れています。
アコーディオン Widget のテキストのスタイル設定
アコーディオン Widget のテキストのスタイルを設定するには、アコーディオン Widget コンテナ全体のプロパティを設定するか、Widget の各コンポーネントのプロパティを個別に設定します。
-
アコーディオン Widget のテキストスタイルを変更するには、次の表を使用して適切な CSS ルールを見つけ、独自のテキストスタイルプロパティおよび値を追加します。
変更するテキスト
関連する CSS ルール
追加するプロパティおよび値の例
アコーディオン全体（タブとコンテンツパネルの両方を含む）のテキスト
.Accordion または .AccordionPanel font: Arial; font-size:medium;
アコーディオンパネルタブのテキストのみ
.AccordionPanelTab font: Arial; font-size:medium;
アコーディオンコンテンツパネルのテキストのみ
.AccordionPanelContent font: Arial; font-size:medium;
アコーディオン Widget の背景色の変更
-
アコーディオン Widget の様々な部分の背景色を変更するには、次の表を使用して適切な CSS ルールを見つけ、背景色プロパティおよび値を追加または変更します。
変更する Widget の部分
関連する CSS ルール
追加または変更するプロパティおよび値の例
アコーディオンパネルタブの背景色
.AccordionPanelTab background-color: #CCCCCC;（これが初期設定値です）
アコーディオンコンテンツパネルの背景色
.AccordionPanelContent background-color: #CCCCCC;
開いたアコーディオンパネルの背景色
.AccordionPanelOpen .AccordionPanelTab background-color: #EEEEEE;（これが初期設定値です）
マウスポインターがあるときのパネルタブの背景色
.AccordionPanelTabHover color: #555555;（これが初期設定値です）
マウスポインターがあるときの開いたパネルタブの背景色
.AccordionPanelOpen .AccordionPanelTabHover color: #555555;（これが初期設定値です）
アコーディオンの幅の固定
初期設定では、アコーディオン Widget は使用可能なスペースいっぱいに拡張されます。ただし、アコーディオンコンテナの幅プロパティを設定すると、アコーディオン Widget の幅を制限できます。
-
SpryAccordion.css ファイルを開くことによって .Accordion CSS ルールを見つけます。これは、アコーディオン Widget のメインコンテナエレメントのプロパティを定義するルールです。注意：
アコーディオン Widget を選択して CSS スタイルパネル（ウィンドウ／CSS スタイル）を調べることによってルールを探すこともできます。パネルが「現在」モードに設定されていることを確認します。
-
このルールに、width: 300px; のように幅プロパティと値を追加します。
