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

最終更新日 : 2021年12月20日

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

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

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

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

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

エレメントの選択

  • ドキュメントウィンドウで表示エレメントを選択するには、エレメントをクリックするか、エレメント上をドラッグします。

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

    オブジェクトによっては、ページ上で対応するコードが挿入されている位置とは別のところに表示される場合があります。 例えば、デザインビューでは絶対位置のエレメント(AP エレメント)はページの任意の位置に配置できますが、コードビューでは AP エレメントを定義するコードは固定位置に配置されます。 不可視エレメントを表示している場合、Dreamweaver では、不可視エレメントのコードの位置を示すマーカーがドキュメントウィンドウに表示されます。 マーカーを選択すると、エレメント全体が選択されます。例えば、AP エレメントのマーカーを選択すると、その AP エレメント全体が選択されます。

  • 完全なタグを、その内容と共に選択するには、ドキュメントウィンドウの左下にあるタグセレクターでタグをクリックします。 タグセレクターは、デザインビューおよびコードビューの両方に表示されます。 タグセレクターには常に、現在の選択範囲または挿入ポイントを含むタグが表示されます。 左端のタグは、現在の選択範囲または挿入ポイントを含む一番外側のタグです。 次のタグは、一番外側のタグのすぐ内側にあり、次に表示されるのは前のタグのすぐ内側のタグです。右端のタグは、現在の選択範囲または挿入ポイントを含む一番内側のタグです。

HTML コードの表示

選択したテキストまたはオブジェクトに関連付けられている HTML コードを表示するには、次のいずれかの操作を行います。

  • ドキュメントツールバーで、「コード」をクリックします。

  • 表示/コードを選択します。

  • 表示/分割/コード - ライブ、コード - デザイン、またはコード - コードオプションを選択します。

  • ウィンドウ/コードインスペクターを選択します。

    コードエディター(コードビューまたはコードインスペクター)で選択したものは、通常、ドキュメントウィンドウでも選択されています。 2 つのビューを同期させないと、選択したものが表示されないことがあります。

非表示要素のマーカーアイコンを表示または非表示にします

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

メモ

非表示要素を表示すると、ページのレイアウトがわずかに変更され、他の要素が数ピクセル移動する場合があります。そのため、正確なレイアウトを行う場合は、非表示要素を非表示にしてください。

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

表示 > ビジュアルエイド > 非表示要素を選択したときに表示される要素の種類を指定するには、非表示要素環境設定を使用します。

編集 > 環境設定(Windows)またはDreamweaver > 環境設定(Macintosh)を選択し、「非表示要素」をクリックします。
表示する要素を選択し、「OK」をクリックします。

ダイアログボックスで要素名の横にチェックマークが付いている場合、表示 > ビジュアルエイド > 非表示要素を選択したときにその要素が表示されることを意味します。

アンカーポイント

ドキュメント内の各名前付きアンカー(a name = "")の場所を示すアイコンを表示します。

スクリプト

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

コメント

HTMLコメントの場所を示すアイコンを表示します。アイコンを選択すると、プロパティインスペクターでコメントを確認できます。

改行

各改行(BR)の場所を示すアイコンを表示します。このオプションはデフォルトではオフになっています。

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

ドキュメント内の各クライアントサイド画像マップの場所を示すアイコンを表示します。

埋め込みスタイル

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

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

type属性が「hidden」に設定されているフォームフィールドの場所を示すアイコンを表示します。

フォーム区切り

フォーム要素を挿入する場所がわかるように、フォームの周囲にボーダーを表示します。ボーダーはformタグの範囲を示すため、そのボーダー内にあるすべてのフォーム要素はformタグで適切に囲まれています。

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

AP要素を定義するコードの場所を示すアイコンを表示します。AP エレメント自体は、ページの任意の位置に配置できます。 (AP要素は非表示要素ではありません。AP要素を定義するコードのみが非表示になります。)アイコンを選択してAP要素を選択します。AP要素が非表示としてマークされている場合でも、AP要素の内容を確認できます。

整列のアンカーポイント

align属性を受け入れる要素のHTMLコードの場所を示すアイコンを表示します。これには、画像、表、ActiveXオブジェクト、プラグイン、アプレットが含まれます。場合によっては、要素のコードが可視オブジェクトから分離されることがあります。

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

ドキュメントウィンドウで内容を表示できないサーバーマークアップタグ(Active Server PagesタグやColdFusionタグなど)の場所を表示します。これらのタグは、通常、サーバーで処理される際にHTMLタグを生成します。例えば、<CFGRAPH>タグは、ColdFusionサーバーで処理される際にHTMLテーブルを生成します。Dreamweaver はページの最終的な動的出力を決定できないため、このタグを ColdFusion 非表示要素で表現します。

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

ドキュメントウィンドウで内容を表示できないサーバーマークアップタグ(Active Server Pages タグや ColdFusion タグなど)の場所を表示します。これらのタグは通常、HTMLタグを生成しないセットアップ、処理、またはロジックタグ(例:<CFSET>、<CFWDDX>、<CFXML>)です。

CSS 表示:なし

リンクまたは埋め込みスタイルシートのdisplay:noneプロパティによって非表示になっているコンテンツの場所を示すアイコンを表示します。

動的テキストの表示方法

ページ上の動的テキストをデフォルトで{Recordset:Field}の形式で表示します。これらの値の長さがページの書式を歪めるほど長い場合は、代わりに {} を表示するように変更できます。

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

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

その他の関連ヘルプ