この文書は、Dreamweaver CS4 の基本的な使用方法を分かりやすく図解した内容となっています。
Spry メニューバーやアコーディオンなどは、外観や効果を自由にカスタマイズして使用することができます。この文書では例として Spry アコーディオンをカスタマイズする方法について説明します。Spry 項目の設定は主に CSS の変更を行う操作ですが、Dreamweaver の [CSS スタイル] パネル上で簡単に設定を変更することができます。
なお、CSS については以下の文書も合わせて参照することをお勧めします。
文書番号 233334 [基本操作] CSS（スタイルシート）について（Dreamweaver CS4）
[ウィンドウ] メニューの [挿入] をクリックします。
[カテゴリ] ポップアップメニューから [Spry] を選択します。
[Spry アコーディオン] をクリックします。
Spry アコーディオン Widget が配置されます。
Spry アコーディオンのラベルをクリックし、Spry アコーディオン全体を選択します。
「Spry アコーディオン」が選択されている状態で、プロパティインスペクタの [パネル] セクションでプラス（+）ボタンをクリックして項目を追加します。また、右側の「▲▼」ボタンをクリックすると項目の順番を変更することができます。
アコーディオンの新しい項目が追加されました。
アコーディオン項目のコンテンツ枠線をクリックして選択し、プロパティインスペクタで [CSS の編集] をクリックします。
[CSS スタイル] パネルで現在の範囲が表示されます。["AcordionPanelContent"のプロパティ] で [height（高さ）] の値をクリックします。
[height] の値に任意の数値を入力します。ここでは例として [height] の値を 100 に変更します。
アコーディオン項目のラベルに色を指定します。色を指定するラベルを選択します。
[CSS スタイル] パレットで [background-color（背景色）] の横にある [カラーピッカー] ボタンをクリックします。
[カラーピッカー] パネルが表示されたら、ラベルの背景色に指定する色を選択します。
選択した背景色が指定されます。
その他の Widget も自由にカスタマイズ
[CSS スタイル] パネルを使用することで、その他の Spry フレームワークもアコーディオンと同じように色やサイズなどをカスタマイズがすることができます。[CSS スタイル] パネルで、[プロパティの追加] をクリックし、指定するプロパティを選択します。
