マニュアルキャンセル

ドキュメントウィンドウでのエレメントの選択および表示

検索

最終更新日 : 2021年4月28日

Dreamweaver

アプリを開く

Dreamweaver でエレメントを選択および表示し、不可視エレメントの表示／非表示を切り替えて、不可視エレメントの環境設定を行います。

ドキュメントウィンドウのデザインビューでエレメントを選択するには、そのエレメントをクリックします。エレメントが不可視になっている場合は、そのエレメントを表示しないと選択できません。

HTML コードの一部には、ブラウザーで表示されないものがあります。たとえば、comment タグは、ブラウザーには表示されません。ただし、ページの作成時に不可視エレメントを選択、編集、移動、および削除できるようにしておくと便利です。

Dreamweaver では、ドキュメントウィンドウのデザインビューで、不可視エレメントの位置を示すアイコンを表示するかどうかを指定できます。「不可視エレメント」の環境設定でオプションを設定することにより、表示するエレメントのマーカーを指定できます。例えば、アンカーポイントを表示し、改行を非表示にするよう指定できます。

一部の不可視エレメント（コメントやアンカーポイントなど）は、環境設定／不可視エレメントダイアログボックスで作成および変更できます。

エレメントの選択

ドキュメントウィンドウで表示エレメントを選択するには、エレメントをクリックするか、エレメント上をドラッグします。
不可視エレメントを選択するには、デザインビューで、表示／デザインビューのオプション／ビジュアルエイド／不可視エレメントを選択してから（このメニュー項目がまだ選択されていない場合）、ドキュメントウィンドウでエレメントのマーカーをクリックします。

オブジェクトによっては、ページ上で対応するコードが挿入されている位置とは別のところに表示される場合があります。例えば、デザインビューでは絶対位置のエレメント（AP エレメント）はページの任意の位置に配置できますが、コードビューでは AP エレメントを定義するコードは固定位置に配置されます。不可視エレメントを表示している場合、Dreamweaver では、不可視エレメントのコードの位置を示すマーカーがドキュメントウィンドウに表示されます。マーカーを選択すると、エレメント全体が選択されます。例えば、AP エレメントのマーカーを選択すると、その AP エレメント全体が選択されます。
完全なタグを、その内容と共に選択するには、ドキュメントウィンドウの左下にあるタグセレクターでタグをクリックします。タグセレクターは、デザインビューおよびコードビューの両方に表示されます。タグセレクターには常に、現在の選択範囲または挿入ポイントを含むタグが表示されます。左端のタグは、現在の選択範囲または挿入ポイントを含む一番外側のタグです。次のタグは、一番外側のタグのすぐ内側にあり、次に表示されるのは前のタグのすぐ内側のタグです。右端のタグは、現在の選択範囲または挿入ポイントを含む一番内側のタグです。

HTML コードの表示

選択したテキストまたはオブジェクトに関連付けられている HTML コードを表示するには、次のいずれかの操作を行います。
- ドキュメントツールバーで、「コード」をクリックします。
- 表示／コードを選択します。
- 表示／分割／コード - ライブ、コード - デザイン、またはコード - コードオプションを選択します。
- ウィンドウ／コードインスペクターを選択します。
  
  コードエディター（コードビューまたはコードインスペクター）で選択したものは、通常、ドキュメントウィンドウでも選択されています。2 つのビューを同期させないと、選択したものが表示されないことがあります。

不可視エレメントのマーカーアイコンの表示/非表示の切り替え

表示／デザインビューのオプション／ビジュアルエイド／不可視エレメントを選択します。

注意：

不可視エレメントを表示すると、他のエレメントが数ピクセル分移動するので、ページのレイアウトがわずかに変化する場合があります。レイアウトを正確に表示するには、不可視エレメントを非表示にしてください。

不可視エレメントの環境設定の設定

「不可視エレメント」環境設定を使用して、表示／ビジュアルエイド／不可視エレメントを選択したときに表示されるエレメントの種類を指定します。

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択して、「不可視エレメント」をクリックします。
表示する必要のあるエレメントを選択し、「OK」をクリックします。

注意：

ダイアログボックスでエレメント名の横に表示されるチェックマークは、表示／ビジュアルエイド／不可視エレメントを選択すると、そのエレメントが表示されることを表します。

アンカーポイント

ドキュメント内の各アンカーポイント（a name = ""）の位置を示すアイコンが表示されます。

スクリプト

ドキュメント本文で JavaScript コードまたは VBScript コードの位置を示すアイコンが表示されます。このアイコンを選択すると、プロパティインスペクターでスクリプトを編集することも、外部スクリプトファイルにリンクすることもできます。

コメント

HTML コメントの位置を示すアイコンが表示されます。このアイコンを選択すると、プロパティインスペクターにコメントが表示されます。

改行

各改行（BR）の位置を示すアイコンが表示されます。このオプションはデフォルトではオフになっています。

クライアント側のイメージマップ

ドキュメント内の各クライアントサイドイメージマップの位置を示すアイコンが表示されます。

埋め込みスタイル

ドキュメントのボディセクションに埋め込まれた CSS スタイルの位置を示すアイコンが表示されます。ドキュメントのヘッドセクションに配置されている CSS スタイルは、ドキュメントウィンドウには表示されません。

非表示フォームフィールド

type 属性が "hidden" に設定されているフォームフィールドの位置を示すアイコンが表示されます。

フォーム区切り

フォームの周りの境界線が表示されるので、フォームエレメントを挿入する位置を確認できます。この境界線は、form タグの範囲を表すので、この境界線内のフォームエレメントはすべて、form タグに適切に囲まれています。

AP エレメントのアンカーポイント

AP エレメントを定義するコードの位置を示すアイコンが表示されます。AP エレメント自体は、ページの任意の位置に配置できます。AP エレメントは不可視エレメントではありません。AP エレメントを定義するコードだけが不可視です。このアイコンを選択して AP エレメントを選択すると、AP エレメントが非表示に指定されていても、その AP エレメントの内容が表示されます。

整列のアンカーポイント

align 属性を指定可能なエレメントの HTML コードの位置を示すアイコンが表示されます。このようなエレメントには、イメージ、テーブル、ActiveX オブジェクト、プラグイン、アプレットなどがあります。エレメントの HTML コードが、表示オブジェクトから分離されている場合もあります。

ビジュアルサーバーマークアップタグ

内容をドキュメントウィンドウに表示できないサーバーマークアップタグ（Active Server Pages タグや ColdFusion タグなど）の位置が表示されます。通常、これらのタグはサーバーで処理される際に HTML タグに変換されます。例えば、<CFGRAPH> タグが ColdFusion サーバーで処理されると HTML テーブルが生成されます。Dreamweaver では、ページの動的な出力結果が最終的にどうなるかを知ることはできないため、このタグは ColdFusion の不可視エレメントとして表されます。

非ビジュアルサーバーマークアップタグ

内容をドキュメントウィンドウに表示できないサーバーマークアップタグ（Active Server Pages タグや ColdFusion タグなど）の位置が表示されます。これには、普通、HTML タグを生成しないセットアップタグ、処理タグ、論理タグ（<CFSET>、<CFWDDX>、<CFXML> など）が該当します。

CSS 表示：なし

リンクされた、または埋め込まれたスタイルシートの display:none プロパティによって非表示にされているコンテンツの位置を示すアイコンが表示されます。

動的テキストの表示方法

{Recordset:Field} の形式を使用して、初期設定でページに動的テキストを表示します。これらの値の長さが十分にあり、ページのフォーマットを変形できる場合、表示を {} に変更できます。

サーバーサイドインクルード

各サーバーサイドインクルードファイルの実際のコンテンツを表示します。