マニュアル キャンセル

ライブビューでの編集

  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 サイトのテスト

 

ライブビューで Web ページをデザイン、編集、プレビューする方法を説明します。コードビューに切り替えずに、エレメントの再配置または挿入、セレクターの適用、画像属性の編集、挿入、編集、テキストの書式設定を実行できます。

ライブビューに搭載されたクロムベースのレンダリングエンジンにより、Dreamweaver でコンテンツをお気に入りの Web ブラウザーで表示したのと同じように表示できます。開発中に、ライブビューに切り替えて、ページを素早くプレビューできます。また、ライブビュー内で HTML エレメントを直接編集して、ビュー(コードおよびデザインビュー)を切り替える手間を省くこともできます。

ライブビューはすぐに更新され、ページの変更箇所が表示されます。

ライブビューでは、次のコンポーネントを使用してページを編集できます:

  • DOM パネル:(ウィンドウ/DOM)ドキュメントの HTML 構造を表示したり、ビュー内でエレメントをコピー&ペースト、複製、削除、再配置したりできます。詳しくは、DOM パネルを参照してください。
  • エレメントディスプレイ:ライブビューで選択された HTML エレメントの上に表示されます。エレメントディスプレイでは、HTML エレメントとクラスおよび ID を関連付けることができます。詳しくは、HTML エレメントとクラス/ID の関連付けを参照してください。
  • クイックプロパティインスペクター:エレメントディスプレイでサンドイッチアイコンをクリックするか、テキストを選択すると表示されます。クイックプロパティインスペクターを使用して、ライブビューで画像属性の編集やテキストの書式設定をおこなうことができます。詳しくは、クイックプロパティインスペクターを参照してください。
  • ライブビュープロパティインスペクタードキュメントウィンドウの下に表示され、ライブビューで HTML や CSS の各種プロパティを編集できます。詳しくは、ライブビュープロパティインスペクターを参照してください。
  • 挿入パネル:(ウィンドウ/挿入)エレメントをパネルから直接ライブビューにドラッグできます。詳しくは、ライブビューにエレメントを直接挿入するを参照してください。
注意:

ページが動的に変化する場合(スクリプト使用)または metarefresh が有効になっている場合は、ライブビューでおこなった編集内容が失われる可能性があります。

ヒント

  • ページを編集しているときにライブビューが空白になった場合は、ライブビューをいったんオフにしてからオンに切り替えます。
  • 編集箇所がページ反映されない場合は、ライブビューの「更新」ボタンをクリックします。

データベースまたは JavaScript を使用して動的にレンダリングされるコンテンツや、テンプレートの編集不可領域はライブビューで編集できません。ライブビューでこのようなエレメントをクリックすると、該当エレメントがグレーの境界線で囲まれます。これはエレメントを編集できないことを示します。

ライブビューで境界線がグレーのエレメントは編集できません。
ライブビューで境界線がグレーのエレメントは編集できません。

注意:

ライブビューでは、選択したエレメントに適用できるオプションのみをメインメニューで選択できます。適用できないオプションは、エレメントが選択されるとグレー表示になります。

エレメントディスプレイ

エレメントディスプレイを使用して、ライブビューで直接 HTML エレメントとクラスおよび ID を関連付けることができます。エレメントディスプレイに使用可能なクラスと ID が表示されるため、必要なオプションをすばやく表示および選択できます。 

エレメントディスプレイを使用して表を書式設定することもできます。詳しくは、リンクを参照してください。

HTML エレメントとクラス/ID の関連付け

ライブビューで目的のエレメントをクリックします。エレメントディスプレイが表示され、現在関連付けられているクラスと ID が表示されます。

ライブビューでは、DOM パネルの HTML エレメントをクリックして、そのエレメントのエレメントディスプレイを表示することもできます。

エレメントのエレメントディスプレイ
エレメントのエレメントディスプレイ

  • HTML エレメントとクラスまたは ID の関連付けを解除するには、クラスまたは ID の横にある「x」をクリックします。
  • HTML エレメントに関連付けられたクラスまたは ID を変更するには、ボックスをクリックします。使用可能なクラスと ID の一覧が表示されます。目的のオプションをクリックします。
  • クラスまたは ID を追加し、エレメントに適用するには、「+」をクリックし、名前を入力します。変更を保存するには、「+」をクリックするか、Enter キーを押します。

CSS デザイナーを使用して、このクラスまたは ID を含むセレクターを定義することもできます。詳しくは、CSS デザイナーを使用したページのレイアウトを参照してください。

注意:

トランジションエレメントのエレメントディスプレイは、トランジションがトリガーされても一緒に移動しません。ただし、エレメントディスプレイを使用しておこなった変更は、エレメントディスプレイがトランジションエレメントと同じ場所にない場合でも有効になります。 

クイックプロパティインスペクター

画像のクイックプロパティインスペクター

クイックプロパティインスペクターは、ライブビューで選択したエレメントの真上に表示されます。このプロパティインスペクターを使用して、ライブビューで属性の編集やテキストの書式設定をおこなうことができます。

ライブビューでページエレメントの真上に表示されるクイックプロパティインスペクター
ライブビューでページエレメントの真上に表示されるクイックプロパティインスペクター

クイックプロパティインスペクターを表示/非表示にするには、Ctrl+Alt+H キー(Windows)/ Command+Ctrl+H キー(Mac OS)を押します。

注意:

クイックプロパティインスペクターを使用しているときは、コードナビゲーターアイコンはライブビューに表示されません。

Bootstrap ドキュメントで、クイックプロパティインスペクターに、画像をカスタマイズするためのオプションも追加されています。

Bootstrap ドキュメントでの画像用のクイックプロパティインスペクター
Bootstrap ドキュメントでの画像用のクイックプロパティインスペクター

  • シェイプで切り抜く:画像の角をクリックして、円形または角丸に、またはサムネール画像としてクリップします。
  • 画像をレスポンシブにする:クリックして、様々な画面サイズに対応するよう画像をレスポンシブにします。

テキスト用のクイックプロパティインスペクター

テキスト用のクイックプロパティインスペクターをライブビューで使用して、テキストを簡単に書式設定、インデント設定、ハイパーリンク設定できます。テキスト用のクイックプロパティインスペクターは、テキストエレメント(h1 ~ h6、pre、p)のサンドイッチアイコンをクリックすると表示されます。

テキスト用のクイックプロパティインスペクター
テキスト用のクイックプロパティインスペクター

  • 書式設定オプションにより、エレメントタグを h1 ~ h6、p、pre のいずれかのタグに素早く変更できます。 
  • リンクオプションでは、テキストエレメントをハイパーリンクできます。 
  • ボールド/イタリックのアイコンでは、<strong> と <em> タグをテキストエレメントに追加できます。
  • インデントアイコンでは、テキストのインデントを追加または削除できます。<blockquote> タグが適宜、コードに追加またはコードから削除されます。

Bootstrap ドキュメントでは、テキスト用のクイックプロパティインスペクターを使用して、テキストエレメントを整列および変形することもできます。

  • 整列:対応するクラスを適用して、Bootstrap テキストエレメントを左、中央、右に揃えるか、均等配置します。
  • 変形:小文字、大文字、文頭のみ大文字のクラスを適用して、エレメントのテキストの大文字/小文字を変更します。

ライブビュープロパティインスペクター

ライブビュープロパティインスペクターは、ドキュメントウィンドウの下部にある従来のプロパティインスペクターです。

ライブビュープロパティインスペクターでは、テキストや挿入されたオブジェクトなど、現在選択されているページエレメントの一般的なプロパティを確認および編集できます。ライブビュープロパティインスペクターの内容は、選択したエレメントによって異なります。

注意:

ライブビューのプロパティインスペクターは可変グリッドページでは使用できません。

特定のプロパティインスペクターに関するヘルプを参照するには、プロパティインスペクターの右上隅にあるヘルプボタンをクリックするか、プロパティインスペクターのオプションメニューから「ヘルプ」を選択します。

ライブビュープロパティインスペクターを使用して編集できるエレメントを次に示します。

  • HTML
  • CSS
  • 画像
  • テーブル
  • メディア - HTML5 オーディオおよび HTML5 ビデオのみ
  • アンカー
  • フォーム
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric
注意:

jQuery UI およびテンプレートに関連するプロパティは、ライブビューのプロパティインスペクターで編集できません。

HTML 属性の編集

クイックプロパティインスペクターを使用してライブビューで直接、画像の HTML 属性を簡単に追加、編集、削除できます。

サンドイッチアイコン をクリックすると、画像のクイックプロパティインスペクターが表示されます。スペースの空き状況に応じてプロパティインスペクターは画像の右、左、上、下に表示されます。プロパティインスペクターは好きな場所に自由に配置できます。

クイックプロパティインスペクターで属性を編集
クイックプロパティインスペクターで属性を編集

属性を編集するには、クイックプロパティインスペクターのサンドイッチアイコンをクリックします。画像のソースや、「タイトル」、「代替」などのその他属性を変更できます。変更は即座に反映されます。同様に、ライブビューで画像の高さも調整できます。

変更は、次のいずれかの操作を実行すると保存されます。

  • プロパティインスペクターの外側の任意の場所をクリックしたとき
  • Enter キーを押したとき
  • プロパティインスペクターの別の属性を編集するために Tab キーを押したとき
  • ファイルを保存したとき

画像を動的に読み込んだ場合、画像のクイックプロパティインスペクターを使用して、画像に設定された属性を簡単に確認できます。

ライブビューでテキストを直接編集する

ライブビューでテキストエレメントを直接編集できます。編集したいテキストエレメントをクリック、または「エレメントを表示」モードの場合、Enter キーを押して、テキストを編集します

注意:

編集モードに変わってから Enter キーを押したときの結果は、Enter キーを押す前に挿入ポイントがどこにあったかによって異なります。このような変化は、デザインビューでテキストの編集中に Enter キーを押したときの動作に似ています。

テキストエレメントの周囲のオレンジ色の境界線は、モードが編集モードに変わったことを示しています。 

編集モードを示すオレンジ色の境界線
編集モードを示すオレンジ色の境界線

カーソルの挿入位置は、クリックした場所になります。テキストエレメントのすべてのテキストを選択するには、テキストエレメントを 3 回連続クリックします。

ライブビューでのテキスト編集では、カット、コピー&ペースト、取り消し/やり直しがサポートされています。ペーストでは、テキストはプレーンテキストとしてペーストされます。

自動同期機能で、ライブビューの編集内容とコードビューの自動同期が可能になります。 

次の表では、ライブビューでのテキスト編集でサポートされている、またはサポートされていないシナリオを説明します。

サポートされているシナリオ

サポートされていないシナリオ

テキストを含むことのできるすべての HTML エレメントおよびセマンティックタグ

無効なタグまたは壊れたタグの編集。HTML に壊れたタグや無効なタグが含まれていると、このようなタグの編集は、次のように、ブラウザーがこれらのタグを認識することによって制御されます。

  • ブラウザーが HTML を自動修正して壊れたタグが解決した場合、ライブビューでタグを編集できるようになります。
  • ブラウザーがレンダリング中に新しいタグを追加した場合は、壊れたタグまたは無効なタグは編集できません。

 

ライブビューのテンプレートから派生した HTML ファイル

jQuery ページの編集

インラインエレメントを含む構造タグ。これらは 1 つのボックスでまとめて編集できます。

静的および動的コンテンツの両方を持つタグの編集。このようなタグのセレクターは編集できますが、ライブビューでテキストを直接編集することはできません。ライブビューでこのようなエレメントをダブルクリックすると、該当エレメントがグレーの境界線で囲まれます。これはテキストを編集できないことを示します。

動的ページ内の静的テキスト

 

エンティティを含むテキスト

 

テキストの書式設定

テキストおよびハイパーリンクのテキストの書式をライブビューで直接編集できるようになりました。テキストの書式設定オプションを表示するには、任意の語句を選択します。書式設定オプションを含むクイックプロパティインスペクターが選択したテキストの真上に表示されます。

クイックプロパティインスペクターでテキストを書式設定
クイックプロパティインスペクターでテキストを書式設定

ライブビューにエレメントを直接挿入する

挿入パネルを使用して、ライブビューのドキュメント内の目的の場所にエレメントを直接ドラッグできます。ライブビューのライブガイドや DOM アイコンなどのビジュアルエイドは、ドラッグしたエレメントを、マウスでポイントしたエレメントに対して配置するのに役立ちます。

エレメントをドロップする前にページ上の様々なエレメントをマウスでポイントすると、ライブガイド(緑色)が表示されます。このガイドは、エレメントを挿入できる位置を示しています。マウスでポイントしたエレメントの上、下、左または右に表示されます。

  • 上下 - インラインタグ以外のタイプのエレメント/タグをマウスでポイントしているときに表示されます。エレメントの上半分をマウスでポイントすると、ポイントしたエレメントの上にガイドが表示されます。エレメントの下半分をマウスでポイントすると、ポイントしたエレメントの下にガイドが表示されます。
上下に表示されたライブガイド
マウスでポイントしたエレメントの上下に表示されたライブガイド

  • 左右 - <a>、<span> などのインラインタグや、「フロートプロパティ」セットを持つタグをマウスでポイントしているときに表示されます。
マウスでポイントしたエレメントの左右に表示されたライブガイド
マウスでポイントしたエレメントの左右に表示されたライブガイド

エレメントをドロップする前にしばらく停止すると、DOM アイコン(</>)が表示されます。このアイコンをマウスでポイントすると、DOM パネルが開き、ドキュメントの DOM 構造内にエレメントをドロップできます。

ライブビューでエレメントを直接挿入するには、次の手順を実行します。

  1. ライブビューに切り替えます。

  2. 挿入パネルで目的のエレメントをクリックし、ドキュメントにドラッグします。または、単に挿入パネルで目的のエレメントをクリックします。

    ヒント:挿入パネルからページにエレメントをドラッグできない場合は、コンピューターを再起動してから再びおこなってください。

  3. ライブガイドに基づいて、エレメントの上、下、右または左にエレメントをドロップします。または、</> をクリックし、DOM パネルを使用してドキュメント構造内の正確な位置にエレメントをドロップします。

    エレメントがページに挿入され、強調表示されます。

マーキー選択

マーキー選択を使うと、ライブビューのタグ内をクリック&ドラッグして、テキストブロックを簡単に選択できます。2014.1 以前の Dreamweaver リリースでは、テキストブロックをクリック&ドラッグすると、エレメント全体が移動していました。 

注意:

ライブビューのマーキー選択は、ブラウザーでサポートされている操作に制限されます。 

エレメントの選択およびドラッグ&ドロップ

ライブビューでエレメントを移動するには、タグ名をクリックし、それを目的の場所にドラッグします。タグ名をクリックすると、タグをドラッグできることを示す手の形のカーソルが表示されます。タグのドラッグを開始すると、ガイドが表示されるため、正確な位置にタグを配置できます。 

ライブビューでタグ名をクリックすることで、コードビュー内のそのタグの完全なコンテンツを選択できます。

ライブビューでタグ名をクリックして、コードビュー内のそのタグの完全なコンテンツを選択
ライブビューでタグ名をクリックして、コードビュー内のそのタグの完全なコンテンツを選択

ライブビューでのコードのインスペクト

ライブビューでインスペクトモードを使用すると、HTML エレメントおよび関連付けられた CSS スタイルをすばやく識別できます。インスペクトモードがオンの場合、ページ上のエレメントにマウスを合わせると、ブロックレベルのエレメントの CSS ボックスモデル属性を表示できます。

インスペクトモードでのボックスモデルの視覚的な表示に加えて、ライブビュー内のエレメントにマウスを置いて CSS デザイナーを使用することもできます。

現在のモードで CSS デザイナーが開いているときにページ上のエレメントにマウスを合わせると、CSS デザイナーのルールとプロパティが自動的に更新され、そのエレメントのルールとプロパティが表示されます。

さらに、マウスが置かれたエレメントに関連するすべてのビューまたはパネルも更新されます(例えば、コードビュー、タグセレクター、プロパティインスペクターなど)。

  1. ドキュメントウィンドウでドキュメントを開き、表示/インスペクトをクリックします。

    注意:

    ライブビューがまだ有効でない場合は、インスペクトモードによって自動的に有効になります。

  2. CSS ボックスモデルを表示するページ上のエレメントにマウスを合わせます。インスペクトモードによって、ボーダー、マージン、余白、コンテンツが異なる色でハイライト表示されます。

  3. (オプション)コンピューターのキーボードの左矢印キーを押すと、現在ハイライト表示されているエレメントの親がハイライト表示されます。子エレメントのハイライト表示に戻るには、右矢印キーを押します。

  4. (オプション)ハイライト表示された選択項目をロックするには、エレメントをクリックします。

    注意:

    エレメントをクリックしてハイライト表示の選択項目をロックすると、インスペクトモードがオフになります。

ライブビューでのキーボード操作

キーボードを使ってエレメントディスプレイ内のページエレメントやセレクター間を移動して、編集処理を迅速におこなうことができます。 

ページエレメント間の移動

上向き矢印キーと下向き矢印キーを使用して、ライブビュー内のページエレメント間を移動できます。移動はドキュメントの DOM 構造に基づいておこなわれます。

ライブビューのキーボード操作により、ネストされたエレメントやラップされたエレメントに簡単にアクセスできます。

上向き矢印キーまたは下向き矢印キーを使用してエレメントにアクセスすると、そのエレメントのエレメントディスプレイが表示されます。エレメントディスプレイ内のセレクターに移動したり、Enter キーを押してライブビューでテキストを直接編集したりできます。

ここでは段落が選択されています
ここでは段落が選択されています。下向き矢印キーをもう一度押すと、次の図に示すように、DOM 構造内の次のエレメントであるボールド書式のテキストが選択されます。

最初は画像にフォーカスがあります
ここでは、最初は画像にフォーカスがあります。下向き矢印キーを押すと、次の図に示すように、画像の下の段落が選択されます。

ボールド書式のテキストが選択されます
ボールド書式のテキストが選択されます。

セレクター間の移動

エレメントディスプレイ内のセレクター間を移動するには、Tab キーを押します。次の図に示すように、フォーカスのあるセレクターが黄褐色の境界線で表示されます。

フォーカスのあるセレクターが強調表示されます
フォーカスのあるセレクターが黄褐色の境界線で強調表示されます。

最後に適用されたセレクターの後に Tab キーを押すと、「セレクターを追加」テキストボックスが表示されます。 

注意:

Ctrl+[(または Command+[)で親エレメントを、Ctrl+](または Command+])で子エレメントを選択できます。

ライブビューの編集を無効にする

ライブビューでエレメントディスプレイとクイックプロパティインスペクターを使用しない場合は、これらの編集機能を無効にできます。

ショートカットキー:

  • (Windows)Ctrl+Alt+H
  • (Mac)Command+Ctrl+H
  1. ライブビューに切り替えて、表示/ライブビューオプションをクリックします。

  2. 「ライブビューの表示を隠す」を選択します。

サポートされていないシナリオ

  • Dreaweaver のテンプレートファイルはライブビューで編集できません。
  • 静的および動的コンテンツの両方を持つタグ。このようなタグのセレクターは編集できますが、ライブビューでテキストを編集することはできません。ライブビューでこのようなエレメントをダブルクリックすると、該当エレメントがグレーの境界線で囲まれます。これはテキストを編集できないことを示します。
  • その場合は、擬似セレクターがあるタグが適用されます。該当するエレメントをライブビューで編集しようとすると、予期しない結果が発生する可能性があります。
  • CSS グリッドは、Dreamweaver 2019 以降のバージョンのライブビューでのみサポートされています。
アドビのロゴ

アカウントにログイン