ライブビューでの編集

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

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

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

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

ヒント：

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

データベースまたは 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 ドキュメントで、クイックプロパティインスペクターに、画像をカスタマイズするためのオプションも追加されています。

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

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

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

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

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

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

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

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

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

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

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

HTML 属性の編集

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

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

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

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

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

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

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

ライブビューでテキスト要素を直接編集できます。編集したいテキストエレメントをクリック、または 「エレメントを表示」モードの場合、Enter キーを押して、テキストを編集します。 また、2つ以上の要素を選択してテキストを編集することもできます。

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

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

ライブビューでテキスト要素間でテキストを編集する際、切り取り、コピー・ペースト、元に戻す・やり直しがサポートされています。ペーストでは、テキストはプレーンテキストとしてペーストされます。

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

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

テキストの書式設定

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

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

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

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

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

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

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

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

マーキー選択

マーキー選択により、ライブビューで要素間のテキストをマージできます。次に、切り取りオプションで要素間のテキストを選択して結合します。削除またはバックスペースキーを使用して要素をマージすることもできます。
ライブビューでタグ内をクリックしてドラッグすることで、テキストブロックを簡単に選択できます。2014.1 以前の Dreamweaver リリースでは、テキストブロックをクリック＆ドラッグすると、エレメント全体が移動していました。 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

セレクター間の移動

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

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

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

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

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

その他の関連ヘルプ

• CSS デザイナーを使用したページのレイアウト