マニュアル キャンセル

ページのプレビュー

  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 の web ページをプレビューします。

リアルタイムプレビューでは、ページのコードを変更したときに、その結果をブラウザーでリアルタイムにプレビューできます。

ライブビューでは、ページが web でどのように表示されるかをプレビューし、コードビューで様々なアイテムを編集できます。

ページが web でどのように表示されるかは、デザインビューでもプレビューできます。ただし、ブラウザーとまったく同じように表示されるわけではありません。

「ブラウザーで開く」機能を使用すると、ブラウザーにおけるページ表示を確認できます。これはリアルタイムではないので、データベースから動的データを使用するページに適しています。

詳しくは、Dreamweaver のプレビューオプションの種類に関する説明を参照してください。

ブラウザーでのリアルタイムプレビュー

Dreamweaver で web ページのコード作成またはデザインを実行しているときに、web ページをリアルタイムでプレビューできます。この機能を使用すると、web ページのコードを作成しているときに、web ページを複数のブラウザーで同時にプレビューできます。 

ブラウザーでの変更のリアルタイムプレビュー
ブラウザーでの変更のリアルタイムプレビュー

  1. Dreamweaver のステータスバーの「リアルタイムプレビュー」をクリックします。

    リアルタイムプレビュー
    リアルタイムプレビュー

    Web ページをブラウザーでリアルタイムにプレビューするオプションがあります。

  2. Web ページをブラウザーでプレビューするには、使用できるブラウザーのオプションのいずれかをクリックします。

    このリストに表示されるブラウザーを編集することができます。このリストに対してブラウザーを追加または削除するには、ブラウザーでのプレビューの環境設定を参照してください。

    テストサーバーがある場合は、テストサーバーの設定で「テストサーバーにファイルを自動的にプッシュ」が有効になっていることを確認してください。  

    リアルタイムプレビューは、テストサーバーのファイルを使用せずに機能します。テストサーバーへのファイルの自動的なプッシュを有効にすることで、変更がリアルタイムに表示されます。 

  3. Web ページと関連ファイルを保存することを求められたら、保存を実行します。

    ブラウザーが開いて web ページが表示されます。

  4. ページのコード作成を続け、コードを変更したときの変化をブラウザーで確認します。

ブラウザーでのプレビューの環境設定

リアルタイムプレビューとブラウザーでのプレビューを切り替えることができます。サイトのプレビュー時にブラウザーを使用する場合の環境設定と、初期設定のプライマリブラウザーおよびセカンダリブラウザーを定義します。

これらのブラウザーの環境設定は、リアルタイムプレビューを使用してサイトをライブでプレビューするか、ブラウザーでページを開くかに関係なく使用されます。

  1. ファイル/リアルタイムプレビュー/ブラウザーリストの編集を選択します。

    リアルタイムプレビュー
    静的ブラウザープレビューを既定値に設定

    静的ブラウザープレビューを既定値に設定オプションの選択を解除した場合、リアルタイムプレビューは無効になります。メインブラウザーとサブブラウザーのキーボードショートカットを使用して、ブラウザーでプレビューを開くことができます。または、ファイルメニューを使用するか、ステータスバーのデバイスプレビューアイコンをクリックすることもできます。

  2. リストにブラウザーを追加するには、「+」ボタンをクリックし、ブラウザーの追加ダイアログボックスに情報を入力して、「OK」をクリックします。
  3. リストからブラウザーを削除するには、ブラウザーを選択してから「-」ボタンをクリックします。
  4. 選択したブラウザーの設定を変更するには、「編集」ボタンをクリックし、ブラウザーの編集ダイアログボックスで設定を変更して、「OK」をクリックします。
  5. 「メインブラウザー」または「サブブラウザー」オプションを選択し、選択したブラウザーがプライマリブラウザーかセカンダリブラウザーのどちらであるかを指定します。

    F12 キー(Windows)または Option + F12 キー(macOS)を押すと、ドメインブラウザーが開きます。Ctrl + F12 キー(Windows)または Command + F12 キー(macOS)を押すと、サブブラウザーが開きます。

  6. 「一時ファイルを使用してプレビュー」を選択し、プレビューおよびサーバーのデバッグ用に一時的なコピーを作成します。ドキュメントを直接更新する場合は、このオプションをオフにします。

静的ブラウザープレビューを既定値に設定  これにより、ユーザーはブラウザーでファイルをプレビューするモードを選択できます。チェックボックスをオンにすると、ユーザーはメニューの「ブラウザーで開く」とショートカットを使用してファイルをプレビューできます。チェックを外すと、ブラウザーでファイルをプレビューするためにリアルタイムプレビューが使用されます。デフォルトでは、チェックボックスはオフになっており、ブラウザーでファイルをプレビューするためにリアルタイムプレビューが使用されます。

ライブビュー内でのページのプレビュー

ライブビューが従来の Dreamweaver デザインビューと異なる点は、実際のブラウザー上にページが表示される様子を、より正確にレンダリングできることです。また、これを編集することも可能です。 

デザインビューを使用しているときは、いつでもライブビューに切り替えることができます。ただし、Dreamweaver における従来からのビュー切り替え(コード / 分割 / デザイン)と、ライブビューへの切り替えは意味が異なります。デザインビューからライブビューに切り替えることは、単にデザインビューを編集可能な状態から「ライブ」状態に切り替えることです。

ライブビューを使用している間、デザインビューの動作は停止しますが、コードビューでの編集操作は引き続き可能です。このため、コードに変更を加えてライブビューの表示を更新すれば変更の結果を確認できます。ライブビューの使用中は、ライブコードを確認するための追加オプションが有効になります。これはライブコードビューと呼ばれ、当該ページをレンダリングするためにブラウザーで実行される実際のコードが表示されます。ライブビューと同じく、ライブコードビューも編集不可能なビューです。

ライブビューのもう 1 つのメリットは、JavaScript の実行を停止する機能を備えていることです。例えば、ユーザーの操作に反応して行のカラーが変化するよう jQuery ベースのテーブルを設定している場合、ライブビューにおいて行をマウスでポイントするなどの操作を実行するとテーブルが反応します。その時点で JavaScript の実行を停止すると、ライブビュー上のページは現在の状態のまま動かなくなります。これにより、停止した状態で CSS や JavaScript に変更を加え、ページの表示を更新して変更結果を確認することが可能になります。ライブビューの JavaScript 停止機能は、従来のデザインビューでは表示できない、ポップアップメニューなどインタラクティブなエレメントの状態が変化したときのプロパティについて、確認や変更の作業が必要な場合に便利です。

ページをライブビューでプレビューするには:

  1. 現在のビューが、デザインビュー(表示/デザイン)またはコードやデザインの分割ビュー(表示/コードとデザイン)のいずれかになっていることを確認します。

  2. 「ライブビュー」ボタンをクリックします。

  3. (オプション)コードビュー、CSS スタイルパネル、外部 CSS スタイルシート、その他の関連ファイルなどに対して変更を加えます。

    ライブビューは編集不可能ですが、他の領域(例えば、コードビューの CSS スタイルパネルなど)で編集操作を実行してからライブビュー内をクリックすると、変更の結果が表示に反映されます。

    関連ファイル(CSS スタイルシートなど)をドキュメント上部の関連ファイルツールバーから開くと、ライブビューからフォーカスを外すことなく関連ファイルに対する作業ができます。

  4. コードビューまたは関連ファイルに対して変更を加えた場合は、ドキュメントツールバーの「更新」ボタンをクリックするか F5 キーを押して、ライブビューの表示を更新します。

  5. 編集可能なデザインビューに戻るには、ライブビューボタンをもう一度クリックします。

ライブコードのプレビュー

ライブコードビューに表示されるコードは、ブラウザーでページソースの表示を実行した場合に表示されるコードに近い内容です。ただし、ブラウザーのページソース表示は現在表示しているページのソースを見るだけの静的なものであるのに対し、ライブコードビューの表示は動的であり、ライブビューでページを操作するとそれに応じてコードが変化します。

  1. 現在のビューがライブビューになっていることを確認します。

  2. 「ライブコード」ボタンをクリックします。

    当該ページを実行する際にブラウザーで使用されると考えられる実際のコードが表示されます。このコードは黄色でハイライト表示され、編集はできません。

    ページ上のインタラクティブなエレメントを操作する場合は、ライブコードによってコード内の動的な変更がハイライト表示されます。

  3. ライブコードでの変更のハイライト表示をオフにするには、表示/ライブビューオプション/ライブコードで変更をハイライト表示を選択します。

  4. 編集可能なコードビューに戻るには、「ライブコード」ボタンをもう一度クリックします。

ライブコードの環境設定を変更するには、編集/環境設定(Windows)または Dreamweaver/環境設定(macOS)を選択し、コードカラーリングカテゴリを選択します。

JavaScript の停止

次のいずれかの操作を実行します。

  • F6 キーを押します。

  • ライブビューボタンのポップアップメニューから、「JavaScript の停止」を選択します。

ドキュメント上部の情報バーに、JavaScript が停止されていることが表示されます。情報バーを閉じるには、閉じるリンクをクリックします。

ライブビューのオプション

ライブビューボタンのポップアップメニュー、または表示/ライブビューオプションメニュー項目には、JavaScript の停止のほかにもいくつかのオプションがあります。

JavaScript の停止 JavaScript の影響を受けるエレメントを現在の状態のまま停止します。

JavaScript を無効にする JavaScript を無効にしてページを再描画し、ブラウザーの設定で JavaScript が有効になっていない場合と同様の表示にします。

プラグインを無効にする プラグインを無効にしてページを再描画し、ブラウザーの設定でプラグインが有効になっていない場合と同様の表示にします。

ライブコードで変更をハイライト表示 ライブコードでの変更のハイライト表示をオンまたはオフに切り替えます。

新規タブでライブビューページを編集 ブラウザーナビゲーションツールバーまたはリンク先を表示機能を使用して参照しているサイトドキュメント用の新しいタブを開きます。新しいタブを作成するには、最初にドキュメントを参照してから「新規タブでライブビューページを編集」を選択する必要があります。

リンク先を表示 ライブビューで次にクリックするリンクをアクティブにします。または、Control キーを押しながらライブビューのリンクをクリックして、リンクをアクティブにすることもできます。

リンク先を連続表示 ライブビューのリンクを無効に戻すか、ページを閉じるまで、連続してリンクをアクティブにします。

自動でリモートファイルを同期 ブラウザーナビゲーションツールバーの更新アイコンをクリックしたときに、ローカルファイルとリモートファイルを自動的に同期します。両方のファイルが同期するように、更新の前に Dreamweaver によってファイルがサーバーに配置されます。

ドキュメントソースにテストサーバーを使用 動的ページ(ColdFusion ページなど)で主に使用されるオプションであり、動的ページに対しては初期設定でオンになっています。このオプションがオンの場合は、ライブビュー表示のソースファイルとして、サイトのテストサーバー上にあるバージョンが使用されます。

ドキュメントのリンクにローカルファイルを使用 動的でないサイトに対しては初期設定でオンになっています。テストサーバーを使用する動的サイトに対してこのオプションをオンにすると、ドキュメントにリンクされているファイル(CSS ファイル、JavaScript ファイルなど)について、テストサーバー上ではなくローカルにあるバージョンが使用されます。これにより、関連ファイルに対する変更をローカルで実行し、テストサーバー上にアップロードする前に変更結果を確認できます。このオプションがオフの場合、関連ファイルはテストサーバー上にあるバージョンが使用されます。

HTTP リクエストの設定 ライブデータ表示の値を入力する詳細設定用のダイアログボックスを開きます。詳しくは、ダイアログボックスの「ヘルプ」ボタンをクリックしてください。

ブラウザーで開く

任意の時点でページをブラウザーで開くことができます。事前にページを web サーバーにアップロードしておく必要はありません。必要なプラグインや ActiveX コントロールがブラウザーにインストールされている状態でページをプレビューすると、JavaScript ビヘイビアー、ドキュメント相対リンクと絶対リンク、ActiveX® コントロール、ブラウザー プラグインなど、すべてのブラウザー関連の機能が動作します。

ドキュメントをブラウザーで開く場合、開く前に保存します。保存しないと、最新の変更がブラウザーに表示されません。

  1. ドキュメントツールバーでファイル名を右クリックし、「ブラウザーで開く」をクリックします。

    注意:

    リストにブラウザーが表示されない場合は、編集/環境設定または Dreamweaver/環境設定(macOS)を選択し、左側にある「ブラウザーでプレビュー」カテゴリーを選択して、ブラウザーを選択します。詳しくは、ブラウザーでのプレビューの環境設定を参照してください。

  2. リンクをクリックし、ページのコンテンツをテストします。
    注意:

    テストサーバーを指定するか、編集/環境設定/ブラウザーでプレビューで「一時ファイルを使用してプレビュー」オプションを選択していない限り、ローカルブラウザーでドキュメントをプレビューしても、サイトのルート相対パスを使ってリンクされたコンテンツは表示されません。これは、サーバーと違って、ブラウザーではサイトのルートを認識できないためです。

    注意:

    ルート相対パスでリンクされているコンテンツをプレビューする場合は、リモートサーバー上にファイルを置き、ファイル/ブラウザーでプレビューを選択します。

  3. テストが終了したら、ブラウザー内のページを閉じます。
アドビのロゴ

アカウントにログイン