マニュアル キャンセル

ページへの動的コンテンツの追加

  1. Dreamweaver ユーザーガイド
  2. はじめに
    1. レスポンシブ web デザインの基本
    2. Dreamweaver の新機能
    3. Dreamweaver を使用した web 開発 - 概要
    4. Dreamweaver / よくある質問
    5. キーボードショートカット
    6. Dreamweaver の必要システム構成
    7. 機能の概要
  3. Dreamweaver と Creative Cloud
    1. Dreamweaver 設定と Creative Cloud の同期
    2. Dreamweaver での Creative Cloud ライブラリ
    3. Dreamweaver での Photoshop ファイルの使用
    4. Adobe Animate と Dreamweaver の操作
    5. ライブラリから web 用に最適化された SVG ファイルを抽出する
  4. Dreamweaver のワークスペースとビュー
    1. Dreamweaver ワークスペース
    2. ビジュアル開発のための Dreamweaver ワークスペースの最適化
    3. ファイル名またはコンテンツに基づいたファイルの検索 | Mac OS
  5. サイトの設定
    1. Dreamweaver サイトについて
    2. ローカルバージョンのサイトの設定
    3. Publishing server への接続
    4. テストサーバーの設定
    5. Dreamweaver サイトの設定の読み込みおよび書き出し
    6. リモートサーバーからローカルサイトのルートに既存の web サイトを取り込む
    7. Dreamweaver のアクセシビリティ機能
    8. 詳細設定
    9. ファイル転送に関するサイト環境設定の設定
    10. Dreamweaver でのプロキシサーバー設定の指定
    11. Dreamweaver 設定と Creative Cloud の同期
    12. Dreamweaver での Git の使用
  6. ファイルの管理
    1. ファイルの作成およびオープン
    2. ファイルとフォルダーの管理
    3. サーバーからのファイルの取得とサーバーへのファイルの送信
    4. ファイルのチェックインとチェックアウト
    5. ファイルの同期
    6. ファイルの違いの比較
    7. Dreamweaver サイト内のファイルおよびフォルダーのクローク
    8. Dreamweaver サイトでのデザインノートの有効化
    9. Gatekeeper の脆弱性の悪用を防ぐ
  7. レイアウトとデザイン
    1. レイアウト用ビジュアルエイドの使用
    2. CSS を使用したページのレイアウトについて
    3. Bootstrap を使用したレスポンシブな web サイトのデザイン
    4. Dreamweaver でのメディアクエリーの作成と使用
    5. テーブルを使用したコンテンツの表示
    6. カラー
    7. 可変グリッドレイアウトによるレスポンシブデザイン
    8. Dreamweaver 内の Extract
  8. CSS
    1. カスケーディングスタイルシートについて
    2. CSS デザイナーを使用したページのレイアウト
    3. Dreamweaver での CSS プリプロセッサーの使用
    4. Dreamweaver で CSS スタイルの環境設定を行う方法
    5. Dreamweaver での CSS ルールの移動
    6. Dreamweaver でのインライン CSS の CSS ルールへの変換
    7. Div タグの操作
    8. 背景へのグラデーションの適用
    9. Dreamweaver での CSS3 移行効果の作成および編集
    10. コードのフォーマット
  9. ページコンテンツとアセット
    1. ページプロパティの設定
    2. CSS 見出しプロパティおよび CSS リンクプロパティの設定
    3. テキストの操作
    4. テキスト、タグ、属性の検索と置換
    5. DOM パネル
    6. ライブビューでの編集
    7. Dreamweaver でのドキュメントのエンコード
    8. ドキュメントウィンドウでのエレメントの選択および表示
    9. プロパティインスペクターでのテキストプロパティの設定
    10. web ページのスペルチェック
    11. Dreamweaver での区切り線の使用
    12. Dreamweaver でのフォントの組み合わせの追加と変更
    13. アセットを使用した作業
    14. Dreamweaver での日付の挿入と更新
    15. Dreamweaver でのお気に入りアセットの作成と管理
    16. Dreamweaver でのイメージの挿入と編集
    17. メディアオブジェクトの追加
    18. Dreamweaver でのビデオの追加
    19. HTML5 ビデオの挿入
    20. SWF ファイルの挿入
    21. オーディオエフェクトの追加
    22. Dreamweaver での HTML5 オーディオの挿入
    23. ライブラリ項目の操作
    24. Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
  10. リンクおよびナビゲーション
    1. リンクおよびナビゲーションについて
    2. リンク
    3. イメージマップ
    4. リンクのトラブルシューティング
  11. jQuery Widget と効果
    1. Dreamweaver での jQuery UI Widget と Mobile Widget の使用
    2. Dreamweaver での jQuery 効果の使用
  12. web サイトのコーディング
    1. Dreamweaver でのコーディングについて
    2. Dreamweaver のコーディング環境
    3. コーディングの環境設定
    4. コードカラーリングのカスタマイズ
    5. コードの記述と編集
    6. コードヒントとコード補完機能
    7. コードの折りたたみと展開
    8. スニペットでコードを再利用する
    9. 構文チェックコード
    10. コードの最適化
    11. デザインビューでのコードの編集
    12. ページのヘッドコンテンツの操作
    13. Dreamweaver でのサーバーサイドインクルードの挿入
    14. Dreamweaver でのタグライブラリの使用
    15. Dreamweaver へのカスタムタグの読み込み
    16. JavaScript ビヘイビアーの使用(基本操作)
    17. JavaScript に組み込まれているビヘイビアーの適用
    18. XML および XSLT について
    19. Dreamweaver でのサーバーサイド XSL 変換の実行
    20. Dreamweaver でのクライアントサイド XSL 変換の実行
    21. Dreamweaver での XSLT の文字エンティティの追加
    22. コードのフォーマット
  13. 製品間ワークフロー
    1. Dreamweaver への拡張機能のインストールと使用
    2. Dreamweaver のアプリ内アップデート
    3. Dreamweaver での Microsoft Office 文書の挿入(Windows のみ)
    4. Fireworks および Dreamweaver による作業
    5. Contribute を使用した Dreamweaver サイトでのコンテンツの編集
    6. Dreamweaver と Business Catalyst の統合
    7. パーソナライズされた電子メールキャンペーンの作成
  14. テンプレート
    1. Dreamweaver テンプレートについて
    2. テンプレートおよびテンプレートから作成されたドキュメントの認識
    3. Dreamweaver テンプレートの作成
    4. テンプレート編集可能領域の作成
    5. Dreamweaver でのリピート領域およびテーブルの作成
    6. テンプレートの任意の領域の使用
    7. Dreamweaver での編集可能なタグ属性の定義
    8. Dreamweaver でネストされたテンプレートを作成する方法
    9. テンプレートの編集、更新、削除
    10. Dreamweaver での xml コンテンツの書き出しおよび読み込み
    11. 既存のドキュメントでのテンプレートの適用または削除
    12. Dreamweaver テンプレートでのコンテンツの編集
    13. Dreamweaver でのテンプレートタグのシンタックスルール
    14. テンプレート領域のハイライト表示の環境設定
    15. Dreamweaver でテンプレートを使用する利点
  15. モバイルとマルチスクリーン
    1. メディアクエリーの作成
    2. モバイルデバイス向けのページ方向の変更
    3. Dreamweaver を使用したモバイルデバイス向けの web アプリの作成
  16. 動的サイト、ページおよび web フォーム
    1. web アプリケーションについて
    2. アプリケーション開発のためのコンピューター設定
    3. データベース接続のトラブルシューティング
    4. Dreamweaver での接続スクリプトの削除
    5. 動的ページのデザイン
    6. 動的コンテンツソースの概要
    7. 動的コンテンツのソースの定義
    8. ページへの動的コンテンツの追加
    9. Dreamweaver での動的コンテンツの変更
    10. データベースのレコードの表示
    11. Dreamweaver でのライブデータの入力とトラブルシューティング
    12. Dreamweaver でのカスタムサーバービヘイビアーの追加
    13. Dreamweaver を使用したフォームの作成
    14. フォームを使用したユーザーからの情報の収集
    15. Dreamweaver での ColdFusion フォームの作成と有効化
    16. web フォームの作成
    17. フォームエレメントの HTML5 サポート強化
    18. Dreamweaver を使用したフォームの開発
  17. アプリケーションのビジュアル開発
    1. Dreamweaver でのマスターページと詳細ページの作成
    2. 検索ページと結果ページの作成
    3. レコード挿入ページの作成
    4. Dreamweaver でのレコードの更新ページの作成
    5. Dreamweaver でのレコード削除ページの作成
    6. Dreamweaver での ASP コマンドによるデータベースの修正
    7. 登録ページの作成
    8. ログインページの作成
    9. 許可されたユーザーのみがアクセスできるページの作成
    10. Dreamweaver を使用した ColdFusion のフォルダーの保護
    11. Dreamweaver での ColdFusion コンポーネントの使用
  18. web サイトのテスト、プレビュー、パブリッシュ
    1. ページのプレビュー
    2. 複数のデバイスでの Dreamweaver web ページのプレビュー
    3. Dreamweaver サイトのテスト

 

注意:

Dreamweaver 以降では、ユーザーインターフェイスが簡素化されています。そのため、この記事で説明されているオプションの一部が Dreamweaver 以降には存在しない場合があります。詳しくは、こちらの記事を参照してください。

動的コンテンツの追加について

動的コンテンツのソースを定義すると、そのソースを使用してページに動的コンテンツを追加できます。コンテンツソースの内容として可能なものには、レコードセットの列、HTML フォームを使用して送信された値、サーバーオブジェクトに含まれている値およびその他のデータがあります。

Dreamweaver では、Web ページやその HTML ソースコードのほとんどすべての場所に動的コンテンツを配置できます。動的コンテンツを挿入ポイントに配置したり、テキストストリングを置き換えたりできる他、HTML 属性として挿入することもできます。例えば、動的コンテンツを使用して、イメージの src 属性やフォームフィールドの value 属性を定義することができます。

バインディングパネルでコンテンツのソースを選択して、ページに動的コンテンツを追加できます。Dreamweaver によってページのコードにサーバーサイドスクリプトが挿入されます。これは、ブラウザーからこのページが要求されたときに、コンテンツソースからページの HTML コードにデータを転送することをサーバーに指示するものです。

あるページエレメントを動的にする(ダイナミック化する)には、通常、複数の方法があります。例えば、イメージを動的にする場合は、バインディングパネル、プロパティインスペクター、または挿入メニューの「イメージ」コマンドを使用することができます。

初期設定では、HTML ページには一度に 1 レコードだけを表示できます。レコードセットの他のレコードを表示するには、一度に 1 つずつレコード間を移動するリンクを追加します。または、リピート領域を作成して、複数のレコードを同じページに表示します。

動的テキストについて

動的テキストには、既存のテキストまたは挿入ポイントに設定されているテキストフォーマットがすべて適用されます。例えば、選択したテキストに CSS(Cascading Style Sheet)スタイルが設定されている場合は、そのテキストを置き換える動的コンテンツにもそのスタイルが適用されます。動的コンテンツのテキストフォーマットは、Dreamweaver のテキストフォーマットツールを使用して追加または変更できます。

動的テキストには、データフォーマットを適用することもできます。例えば、データに日付が含まれている場合、米国のビジターには 04/17/00、カナダのビジターには 17/04/00 など、特定の日付フォーマットを指定することができます。

テキストを動的にする

既存のテキストを動的テキストで置き換えることも、動的テキストをページ上の特定の挿入ポイントに挿入することもできます。

動的テキストの追加

  1. デザインビューで、ページ上のテキストを選択するか、動的テキストを追加する場所をクリックします。
  2. バインディングパネル(ウィンドウ/バインディング)のリストからコンテンツソースを選択します。レコードセットを選択する場合は、レコードセット内の希望の列を指定します。

    コンテンツソースとして使用するのは、その内容がプレーンテキスト(ASCII テキスト)のものです。プレーンテキストには HTML も含まれます。リストにコンテンツソースがまったく表示されない場合や、表示されたコンテンツソースの中に要求を満たすものがない場合は、「+」ボタンをクリックして新しいコンテンツソースを定義します。

  3. (オプション)テキストのデータフォーマットを選択します。
  4. 「挿入」をクリックするか、コンテンツソースをページにドラッグします。

    動的コンテンツプレースホルダーが表示されます。ページ上のテキストが選択されている場合は、選択範囲がプレースホルダーで置換されます。レコードセットコンテンツを表すプレースホルダーのシンタックスは {RecordsetName.ColumnName} です。ここで、Recordset はレコードセットの名前、ColumnName はレコードセットから選択した列の名前です。

    動的テキストのプレースホルダーの長さによっては、ドキュメントウィンドウでのページのレイアウトが変形することがあります。この問題を解決するには、次のトピックで説明されているように、空の波カッコをプレースホルダーとして使用します。

動的テキストのプレースホルダーの表示

  1. 編集/環境設定/不可視エレメント(Windows)または Dreamweaver/環境設定/不可視エレメント(Mac OS)を選択します。
  2. 動的テキストの表示方法ポップアップメニューで { } を選択して、「OK」をクリックします。

イメージを動的にする

ページ上のイメージを動的にすることができます。例えば、チャリティオークションで販売する商品を表示するページをデザインするとします。1 ページに 1 つの商品の説明と写真を掲載します。ページの基本的なレイアウトは全商品に共通ですが、写真と説明は商品によって異なります。

  1. デザインビュー(表示/デザイン)でページを開き、イメージを表示する場所に挿入ポイントを置きます。
  2. 挿入/イメージを選択します。

    イメージソースの選択ダイアログボックスが表示されます。

  3. 「データソース」オプション(Windows)または「データソース」ボタン(Mac OS)をクリックします。

    コンテンツソースのリストが表示されます。

  4. リストからコンテンツソースを選択し、「OK」をクリックします。

    コンテンツソースは、イメージファイルへのパスを含むレコードセットであることが必要です。サイトのファイル構造によって、パスは絶対パス、ドキュメント相対パス、ルート相対パスのいずれかになります。

    注意:

    現在、Dreamweaver はデータベース内に格納されているバイナリイメージをサポートしていません。

    リストにレコードセットがまったく表示されない場合や、表示された中に必要なレコードセットがない場合は、新しいレコードセットを定義します。

HTML 属性を動的にする

HTML 属性をデータにバインドすることにより、ページの外観を動的に変更できます。例えば、テーブルの background 属性をレコードセットのフィールドにバインドすると、テーブルの背景イメージを変えることができます。

HTML 属性をバインドするには、バインディングパネルまたはプロパティインスペクターを使用します。

バインディングパネルを使用して HTML 属性を動的にする

  1. ウィンドウ/バインディングを選択し、バインディングパネルを開きます。
  2. バインディングパネルに、使用するデータソースが表示されていることを確認します。

    コンテンツソースには、バインドする HTML 属性に対して適切なデータが含まれている必要があります。リストにコンテンツソースがまったく表示されない場合や、表示されたコンテンツソースの中に要求を満たすものがない場合は、「+」ボタンをクリックして新しいコンテンツソースを定義します。

  3. デザインビューで、HTML オブジェクトを選択します。

    例えば、HTML テーブルを選択するには、テーブルの内側をクリックし、ドキュメントウィンドウの左下にあるタグセレクターで <table> タグをクリックします。

  4. バインディングパネルのリストからコンテンツソースを選択します。
  5. 「バインド先」ボックスのポップアップメニューで HTML 属性を選択します。
  6. 「バインド」をクリックします。

    次にアプリケーションサーバーでページが実行されるときは、このデータソースの値が HTML 属性に割り当てられます。

プロパティインスペクターを使用して HTML 属性を動的にする

  1. デザインビューで、HTML オブジェクトを選択し、プロパティインスペクターを開きます(ウィンドウ/プロパティ)。

    例えば、HTML テーブルを選択するには、テーブルの内側をクリックし、ドキュメントウィンドウの左下にあるタグセレクターで <table> タグをクリックします。

  2. 動的コンテンツソースを HTML 属性にバインドする方法は、動的コンテンツソースの位置によって異なります。
    • プロパティインスペクターで、バインドする属性の横にフォルダーアイコンが表示されている場合は、そのフォルダーアイコンをクリックするとファイル選択ダイアログボックスが表示されます。次に「データソース」オプションをクリックすると、データソースのリストが表示されます。

    • バインドする属性の横にフォルダーアイコンがない場合は、プロパティインスペクターの左側の「リスト」タブ(2 つあるタブのうち下のもの)をクリックしてください。

      プロパティインスペクターのリストビューが表示されます。

    • バインドする属性がリストビューに表示されていない場合は、「+」ボタンをクリックして属性名を入力するか、小さい矢印ボタンをクリックしてポップアップメニューから属性を選択します。

  3. 属性の値を動的にするには、属性をクリックして、稲妻アイコンをクリックするか、属性の行の最後にあるフォルダーアイコンをクリックします。

    稲妻アイコンをクリックした場合は、データソースのリストが表示されます。

    フォルダーアイコンをクリックした場合は、ファイル選択ダイアログボックスが表示されます。「データソース」オプションを選択して、コンテンツソースのリストを表示します。

  4. コンテンツソースのリストからコンテンツのソースを選択して、「OK」をクリックします。

    コンテンツソースには、バインドする HTML 属性に対して適切なデータが含まれている必要があります。リストにコンテンツソースがまったく表示されない場合や、表示されたコンテンツソースの中に要求を満たすものがない場合は、新しいコンテンツソースを定義します。

    次にアプリケーションサーバーでページが実行されるときは、このデータソースの値が HTML 属性に割り当てられます。

ActiveX、Flash およびその他のオブジェクトのパラメーターを動的にする

ActiveX、Flash、Shockwave、Director、および Generator オブジェクトのパラメーターだけでなく、Java アプレットやプラグインのパラメーターも動的にすることができます。

作業を始める前に、レコードセットのフィールドに、バインドするオブジェクトパラメーターに対して適切なデータが含まれていることを確認してください。

  1. デザインビューで、ページ上のオブジェクトを選択し、プロパティインスペクターを開きます(ウィンドウ/プロパティ)。
  2. 「パラメーター」ボタンをクリックします。
  3. 動的にするパラメーターがリストに表示されない場合は、「+」ボタンをクリックして「パラメーター」列にパラメーター名を入力します。
  4. パラメーターの「値」列をクリックし、稲妻アイコンをクリックして動的な値を指定します。

    データソースのリストが表示されます。

  5. リストからデータソースを選択し、「OK」をクリックします。

    データソースには、バインドするオブジェクトパラメーターに対して適切なデータが含まれている必要があります。リストにデータソースがまったく表示されない場合や、表示されたデータソースの中に要求を満たすものがない場合は、新しいデータソースを定義します。

アドビのロゴ

アカウントにログイン