Cafi Netつながる情報技術
  1. トップ>
  2. DW CS4 の使い方>
  3. Spry 縮小可能パネル

Spry(スプライ)縮小可能パネルのCSSを編集

タブ付きパネル Widget に続いて、Adobe Dreamweaver CS4 を使って Spry(スプライ) 縮小可能パネル Widget を編集してみたいと思います。

解説に使用するドリームウィーバーのバージョンは CS4 なので、CS3 か CS5 をお使いの方は、若干操作画面の違いがあるかも知れませんので、その際は微調整をお願いいたします。

Spry 縮小可能パネルを挿入する

ドリームウィーバーのメニューバー「挿入」から「Spry」へ進み、「Spry 縮小可能パネル」をクリックします。

Spry 縮小可能パネルがワンクリックで挿入されました

クリックすると Spry 縮小可能パネル Widget が挿入されます。ドリームウィーバーでは、ほぼ全ての作業が自動で行われますので、後は「タブ名」と「コンテンツ」を入力して、SpryAssets フォルダを一緒にアップロードすれば使用できます。

Spry のデザインを変更しない方は、CSS を編集する作業は必要ありませんので、そのままアップロードして使用してください。

Spry 縮小可能パネルのタブ名とコンテンツを入力する

タブ名とコンテンツを入力しました。

Spry 縮小可能パネルをF12でプレビューする

プレビュー(F12)をクリックして、編集内容を確認します。ここからは個人的なデザインになりますが、タブの文字が小さいことなどが気になりましたので、SpryCollapsiblePanel.css からデザインの変更を行ないます。

SpryCollapsiblePanel.css を編集する

縮小可能パネル全体の CSS ルールは「.CollapsiblePanel」、タブのみの CSS ルールは「.CollapsiblePanelTab」、コンテンツのみの CSS ルールは「.CollapsiblePanelContent」で編集します。

SpryCollapsiblePanel.css の CSS ルール定義ダイアログボックス

今回は、「.CollapsiblePanel」のボーダーの幅(width)とカラー(color)、タブのフォントサイズ・padding(パディング)・背景(オープン時の背景は「.CollapsiblePanelOpen .CollapsiblePanelTab」で設定します)、コンテンツの背景には フリー写真素材のPhoto Chips 様の四葉のクローバーの写真を設定しました。

SpryCollapsiblePanel.css のすべてのルール

CSS すべてのルール「SpryCollapsiblePanel.css」から、CSS ルール定義 ダイアログボックスを開いて確認すると、CSS のどの部分を編集したら良いかよく分かると思います。

Spry 縮小可能パネル の CSS
Spry 縮小可能パネル のデザイン変更は、SpryCollapsiblePanel.css で行ないます。幅・テキスト・背景などのカスタマイズが可能です。

Spry 縮小可能パネル を搭載することで、わずかなスペースにも多くのコンテンツを掲載することができます。

ユーザーがタブをクリックすると展開、もう一度タブをクリックすると縮小します。これにより、コンテンツの表示/非表示を切り替えることができます。


こちらが編集後の、Spry 縮小可能パネル Widget です。タブをクリックで展開、もう一度クリックで縮小します。

Spry 縮小可能パネル の初期設定の状態を「閉じた状態」に設定する

Spry 縮小可能パネル が、ブラウザでアクセスしたときに開いた状態になっている場合は、縮小可能パネル全体を選択し、画像のように初期設定の状態「閉じた状態」を選択してください。

Spry 縮小可能パネル Widget は、ウェブサイトの小さなスペースにもコンテンツを格納できるので、お役に立つ場面があるかと思います。