ページ上の Widget を挿入する位置にカーソルがあることを確認します。
最終更新日 :
2026年4月30日
jQuery UI Widget と Mobile Widget を使用して Dreamweaver Web プロジェクトにアプリケーションのような機能を追加する方法について説明します。 コードを記述することなく、アコーディオン、タブ、スライダー、自動補完の各ボックスを挿入します。
Widget は、DHTML や JavaScript などの言語で記述され、Web ページに挿入して実行できる小規模な Web アプリケーションです。 Widget の最大の利点は、Web ページでデスクトップの操作性を複製できることです。
アコーディオン、タブ、日付選択、スライダー、自動補完などの jQuery UI Widget を利用して、Web 上でデスクトップの操作性を得ることができます。
例えば、タブ Widget を使用して、デスクトップ アプリケーションのダイアログボックスのタブ機能を複製できます。
また、Dreamweaver には、モバイル Web アプリでよく使用されるフォームエレメントなどの機能の作成に使用できる jQuery Mobile Widget のコレクションも用意されています。 例えば、jQuery Mobile Widget を使用して、モバイルフレンドリなフォームエレメント（テキスト領域、チェックボックスなど）を追加することができます。
jQuery Widget の挿入
jQuery Widget を挿入すると、次のものが自動的にコードに追加されます。
- すべての依存ファイルへの参照
- Widget 用の jQuery API を含むスクリプト タグ 追加 Widget は同じスクリプト タグに追加されます。
jQuery Widget について詳しくは、http://jqueryui.com/demos/ を参照してください。
メモ
jQuery 効果の場合、jquery-1.8.24.min.js ファイルは効果を追加したときに自動的に含まれるため、このファイルへの外部参照は追加されません。
「挿入／jQuery UI」を選択し、挿入する Widget を選択します。
挿入パネルを使用した場合、Widget は挿入パネルの「jQuery UI」セクションに表示されます。
jQuery Widget を選択すると、そのプロパティがプロパティパネルに表示されます。
ライブビューで、または jQuery Widget をサポートするブラウザで、jQuery Widget をプレビューできます。
jQuery Widget の変更
変更する Widget を選択します。
プロパティパネルで、プロパティを変更します。
例えば、タブ Widget にタブを追加するには、Widget を選択し、プロパティパネルで「+」をクリックします。
モバイル jQuery Widget の挿入
jQuery Mobile Widget を使用するには、まず、挿入／jQuery Mobile／ページを選択して jQuery Mobile ページを定義する必要があります。
jQuery Mobile ファイルダイアログボックスが表示されます。
jQuery Mobile ファイルダイアログボックスのデフォルト設定を変更するか、パス設定をデフォルト値のままにして「OK」をクリックします。
表示されたページダイアログボックスで、ID フィールドに名前を入力し、モバイルページにヘッダーおよびフッターセクションを設けるかどうかに基づいてヘッダーおよびフッターの横のチェックボックスをオンまたはオフにします。
Dreamweaver に表示されたページで、ヘッダー、コンテンツ、フッターを、モバイルページで使用するテキスト、画像などのエレメントに置き換えます。
メモ
小さいモバイル画面に合うように短いテキストや小さい画像を使用することをお勧めします。
必要に応じて、jQuery Mobile Widget を追加します。
デバイスでページをプレビューします。
詳しくは、複数のデバイスでの Dreamweaver Web ページのプレビューを参照してください。
jQuery Mobile ページとすべての関連ファイルを保存します。
新しいバージョンの jQuery で jQuery モバイルテーマが適用されない
問題
jQuery 3.7.1 など、新しいバージョンの jQuery を使用すると、jQuery Mobile テーマ（スウォッチやパネルなど）が適用されません。 その結果、jquery テーマが正しくレンダリングされない、または期待どおりに動作しない場合があります。
原因
jQuery Mobile は非推奨となり、保守が終了しています。 jQuery 3.x バージョンをサポートしておらず、新しいリリースとの互換性問題の原因となります。
解決策／対処方法
jQuery Mobile 機能（テーマ、スウォッチ、およびパネル）を使用し続けるには、互換性のある古いバージョンの jQuery を使用します。
推奨バージョン：jQuery 1.11.1（または他のサポートされている 1.x バージョン）
例
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
サポートされている jQuery バージョンを追加します。 例えば、1.11.1 です。
jQuery スクリプトの後に jQuery Mobile ライブラリが読み込まれることを確認します。
ページをリロードし、テーマ、スウォッチ、パネルが正しくレンダリングされることを確認してください。
メモ
jQuery Mobile は非推奨となり、更新されなくなったので、既存の jQuery Mobile プロジェクトには、互換性のあるレガシー jQuery バージョンを使用し続けてください。
