この文書は、Dreamweaver CS4 の基本的な使用方法を分かりやすく図解した内容となっています。

Spry メニューバーやアコーディオンなどは、外観や効果を自由にカスタマイズして使用することができます。この文書では例として Spry アコーディオンをカスタマイズする方法について説明します。Spry 項目の設定は主に CSS の変更を行う操作ですが、Dreamweaver の [CSS スタイル] パネル上で簡単に設定を変更することができます。

なお、CSS については以下の文書も合わせて参照することをお勧めします。

文書番号 233334 [基本操作] CSS(スタイルシート)について(Dreamweaver CS4)


 

アコーディオン項目を追加してみよう

アコーディオン項目の高さを調節してみよう

アコーディオン項目に色を指定してみよう

 

 

 アコーディオン項目を追加してみよう

 

 

[ウィンドウ] メニューの [挿入] をクリックします。


 

 

 

[カテゴリ] ポップアップメニューから [Spry] を選択します。



 

 

 

[Spry アコーディオン] をクリックします。



 

 

 

Spry アコーディオン Widget が配置されます。



Spry アコーディオンのラベルをクリックし、Spry アコーディオン全体を選択します。



 

 

 

「Spry アコーディオン」が選択されている状態で、プロパティインスペクタの [パネル] セクションでプラス(+)ボタンをクリックして項目を追加します。また、右側の「▲▼」ボタンをクリックすると項目の順番を変更することができます。



 

 

 

アコーディオンの新しい項目が追加されました。



 

 

 

↑top

 

 アコーディオン項目の高さを調節してみよう

 

 

アコーディオン項目のコンテンツ枠線をクリックして選択し、プロパティインスペクタで [CSS の編集] をクリックします。



 

 

 

[CSS スタイル] パネルで現在の範囲が表示されます。["AcordionPanelContent"のプロパティ] で [height(高さ)] の値をクリックします。



 

 

 

[height] の値に任意の数値を入力します。ここでは例として [height] の値を 100 に変更します。



 

 

 

コンテンツが指定した高さに変更されました。



 

 

 

↑top

 

 アコーディオン項目に色を指定してみよう

 

アコーディオン項目のラベルに色を指定します。色を指定するラベルを選択します。



 

 

 

[CSS スタイル] パレットで [background-color(背景色)] の横にある [カラーピッカー] ボタンをクリックします。



 

 

 

[カラーピッカー] パネルが表示されたら、ラベルの背景色に指定する色を選択します。



 

 

 

選択した背景色が指定されます。



 

 

 

 

その他の Widget も自由にカスタマイズ

 

[CSS スタイル] パネルを使用することで、その他の Spry フレームワークもアコーディオンと同じように色やサイズなどをカスタマイズがすることができます。[CSS スタイル] パネルで、[プロパティの追加] をクリックし、指定するプロパティを選択します。



 

↑top

 

 

 

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

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