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