DreamweaverでjQueryを使用してタブ付きパネルを作成する方法 - DreamweaverのjQuery UIタブオプション

ビデオ: 【Dreamweaver・html 超・基礎入門】#23　リンクとエラーチェック 2025

DreamweaverのjQuery UIタブオプションを使用すると、一連のタブに対応するコンテンツを表示または非表示にする一連のパネルを簡単に追加できます。折り畳みパネルと同様に、このjQuery UI機能を使用すると、ブラウザウィンドウ内のより少ないスペースに多くの情報を表示できます。アコーディオンパネルと同様に、タブ付きパネルを使用して、テキスト、画像、およびマルチメディアを表示することができる。

<！ - 1 - >

DreamweaverでjQuery UIウィジェットを使用してタブ付きパネルを作成するときに、ページの最初の読み込み時に表示される内容を効果的に制御するタブの順序を指定できます。

次の手順に従って、タブ付きパネルグループを作成します。

タブ付きパネルを表示するページにカーソルを置きます。

「挿入」→「jQuery UI」→「タブ」を選択するか、「jQuery UI挿入」パネルの「タブ」項目をクリックします。
<！ - 2 - >
タブ付きパネルがページに挿入され、対応するCSSファイルがCSSデザイナのソースパネルに表示されます。
メインワークスペースで、
Tab1、Tab2、、および Tab 3 テキストを順番に選択し、各タブ見出しをパネルのタブに表示するテキストに置き換えますエリア。タブの内容は、プロパティインスペクタではなく、ワークスペースでのみ編集できます。デフォルトでは、タブ領域のテキストは太字と黒ですが、対応するCSSルールを変更することでその書式を変更できます。

<！ - 3 - >
各タブのサイズを調整するには、タブを選択し、プロパティインスペクタで高さと幅の設定を使用します。
個々のタブを選択すると、プロパティインスペクタにそのタブの設定が具体的に表示されます。

コンテンツを追加するには、選択したタブパネルのメインエリアで
Content という単語を選択し、テキスト、イメージ、またはマルチメディアを入力します。ページにテキストを貼り付けるのと同じように、パネルにテキストを貼り付けることで、テキストをコピーすることができます。同様に、ページの他の場所と同じように、パネルに画像を挿入します。挿入→画像→画像を選択し、表示するGIF、JPEG、またはPNGファイルを選択します。 Dreamweaverを使用して画像を最適化する場合は、マルチメディアファイルまたはPhotoshopファイルを追加することもできます。

フォントやフォントなどのタブやパネルの外観を変更するには、対応するCSSルールを編集します。
たとえば、タブ内のテキストの色やフォントを編集するには、タブの周りのボックスを選択すると、CSSデザイナーセレクタパネルでスタイルの周囲のボックスが自動的に選択されます。

タブ付きパネルの数または順序を編集するには、デザイン領域のパネルの上部にある青いjQueryタブをクリックします。
青色のタブをクリックすると、パネルの設定がプロパティインスペクタに表示されます。青色の囲まれた領域の外側をクリックすると、プロパティインスペクタがデフォルト設定に戻ります。

タブを追加するには、プロパティインスペクタでプラス記号（+）アイコンをクリックします。
ワークスペースに新しいタブが表示されます。

タブの順序を変更するには、プロパティインスペクタでタブ名を選択し、パネルフィールドの矢印を使用してパネルを移動します。
注文が変更されると、パネル名がメニューの上下に移動します。パネルとその対応するタブは、プロパティインスペクタに表示される順序でWebページに表示されます。

ページがWebブラウザに読み込まれたときに表示するパネルを[パネル]ドロップダウンリストから選択します。
ドロップダウンリストは、ワークスペースの各タブに付けた名前に対応しています。

ファイル→保存を選択してページを保存します。 [依存ファイルのコピー]ダイアログボックスが表示されたら、[OK]をクリックしてすべての関連ファイルを自動的に生成します。
jQuery UIの機能を使用するには、Webページをアップロードするときに、これらのファイルをWebサーバーにアップロードする必要があります。

ワークスペースの上部にある地球儀のアイコンをクリックし、ブラウザを選択してブラウザで作業をプレビューします。
Webブラウザによっては、ActiveXコントロールがコンピュータのページをプレビューできるようにする必要があります。