ページ上でテキストをクリックするか、オブジェクトを選択します。
最終更新日 :
2021年4月27日
このトピックでは、Adobe Dreamweaver のプロパティインスペクターを使用してデザインビューでコードを編集する方法について説明します。
Dreamweaver では、基になる ソースコードを気にすることなく、web ページを視覚的に 作成および編集できますが、web ページをより詳細にコントロールしたり、トラブルシューティングしたりするために コードを編集する必要がある場合があります。Dreamweaver では、デザインビューで作業しながらコードを編集できます。
このセクションは、Design ビューでの作業を好むが、コードにも素早くアクセスしたいユーザー向けに設計されています。
デザインビューでの子タグの選択
Design ビューで子タグを含むオブジェクト（例：HTML テーブル）を選択した場合、 編集／子を選択を選択することで、そのオブジェクトの最初の子タグを素早く選択 できます。
メモ
このコマンドは、デザインビューのみで有効になります。
例えば、<table> タグには通常 <tr> 子タグがあります。タグセレクターで <table> タグを 選択した場合、編集／子を選択を選択することで テーブルの最初の行を選択できます。Dreamweaver では タグセレクター内の最初の <tr> タグが選択されます。<tr> タグ自体にも子タグ（つまり <td> タグ）があるため、 編集／子を選択を再度選択すると、テーブルの最初の セルが選択されます。
プロパティインスペクターでのコードの編集
プロパティインスペクターを使用して、ページ上の テキストやオブジェクトの属性を調査および編集できます。プロパティインスペクターに表示されるプロパティは、通常タグの属性に対応しています。プロパティインスペクターでプロパティを変更することは、通常コードビューで対応する属性を変更することと同じ効果があります。
メモ
タグインスペクターとプロパティインスペクターはどちらも タグの属性を表示および編集できます。タグインスペクターでは、特定のタグに関連付けられた すべての属性を表示および編集できます。プロパティインスペクター では最も一般的な属性のみが表示されますが、それらの属性の値を変更するための より豊富なコントロール セットが提供され、特定の タグに対応しない特定のオブジェクト（テーブル列など）を編集できます。
テキストまたはオブジェクトのプロパティインスペクターが ドキュメントウィンドウの下に表示されます。プロパティインスペクターが表示されていない場合は、 ウィンドウ／プロパティを選択します。
プロパティインスペクターで、属性を変更します。
プロパティインスペクターでの CFML の編集
プロパティ インスペクターを使用して、Design ビューで ColdFusion マークアップを調査および変更します。
プロパティインスペクターで、属性
ボタンをクリックしてタグの属性を編集するか、新しい属性を追加します。
タグが開始タグと終了タグの間にコンテンツを保持している場合は、
コンテンツボタンをクリックしてコンテンツを編集します。
コンテンツボタンは、選択されたタグが 空のタグでない場合（つまり、開始タグと終了 タグの両方がある場合）にのみ表示されます。
タグに条件式が含まれている場合は、
式ボックスで変更を行います。
クイックタグ編集の概要
クイックタグエディターを使用して Design ビューを離れることなく、HTML タグを素早く調査、挿入、編集 します。
クイックタグエディターで無効な HTML を入力した場合、Dreamweaver では必要に応じて 終了引用符と終了山括弧を挿入して 自動的に修正を試みます。
クイックタグエディターオプションを設定するには、Control+T（Windows）または Command+T（Macintosh）を 押してクイックタグエディターを開きます。
クイックタグ編集には以下の 3 つのモードがあります。
- HTML の挿入モードでは、新しい HTML コードを挿入できます。
- タグの編集モードでは、既存のタグを編集できます。
HTML の挿入モードでは、新しい HTML コードを挿入できます。
タグの編集モードでは、既存のタグを編集できます。
折り返しタグモードでは、現在の選択範囲を新しいタグで囲むことができます。
メモ
クイックタグ編集で使用されるモードは、デザインビューで現在選択している内容に応じて決まります。
いずれのモードでも、クイックタグ編集を使用する際の基本手順は同じです。つまり、エディターを開き、タグと属性を入力または編集して、エディターを閉じます。
クイックタグ編集をアクティブにして、Ctrl + T（Windows）または Command + T（Mac OS）を押すと、各モードに順番に切り替えることができます。
クイックタグ編集でのコードの編集
クイックタグ編集（編集／クイックタグ編集）を使用して、HTML タグの挿入と編集をデザインビューを離れずに簡単に行うことができます。
HTML タグの挿入
Design ビューで、コードを挿入したい位置でページ内をクリックして挿入ポイントを配置します。
Ctrl + T（Windows）または Command + T（Mac OS）を押します。
HTML の挿入モードで、クイックタグ編集が開きます。
HTML タグを入力して Enter キーを押します。
タグがコードに挿入され、該当する場合は対応する 終了タグも一緒に挿入されます。
変更しないで終了する場合は、Esc キーを押します。
HTML タグの編集
デザインビューでオブジェクトを選択します。
ドキュメントウィンドウの下部にあるタグセレクターから編集したいタグを選択することもできます。詳しくは、タグセレクターを使用したコードの編集を参照してください。
Ctrl + T（Windows）または Command + T（Mac OS）を押します。
タグの編集モードで、クイックタグ編集が開きます。
新しい属性を入力するか、既存の属性を編集するか、
タグの名前を編集します。
Tabキーを押すと1つの属性から次の属性に移動し、
Shift+Tabを押すと前に戻ります。
メモ
デフォルトでは、TabキーまたはShift+Tabを押すと 変更がドキュメントに適用されます。
クイックタグエディターを閉じてすべての変更を適用するには、
Enterキーを押します。
これ以上変更しないで終了するには、Esc キーを押します。
現在の選択範囲を HTMLタグで囲む
デザインビューで書式設定されていないテキスト
またはオブジェクトを選択します。
メモ
開始 HTML タグまたは終了 HTML タグを含むテキストやオブジェクトを選択した場合、クイックタグ編集は、折り返しタグモードではなくタグの編集モードで開きます。
Control+T（Windows）またはCommand+T（Macintosh）を押すか、
プロパティインスペクターのクイックタグエディターボタンをクリックします。
折り返しタグモードで、クイックタグ編集が開きます。
strongなどの開始タグを1つ入力し、
Enter（Windows）またはReturn（Macintosh）を押します。
タグが現在の選択範囲の最初に挿入され、 対応する閉じタグが最後に挿入されます。
これ以上変更しないで終了するには、Esc キーを押します。
クイックタグエディターでヒントメニューを使用する
クイックタグエディターには、 編集または挿入しているタグのすべての有効な属性をリストする属性ヒントメニューが含まれています。
クイックタグエディターでヒントメニューを無効にしたり、メニューがポップアップするまでの遅延を調整することもできます。
タグの有効な属性をリストするヒントメニューを表示するには、 クイックタグエディターで属性名を編集中に少し停止します。ヒントメニューが表示され、編集中のタグの すべての有効な属性がリストされます。
同様に、有効なタグ名をリストするヒントメニューを 表示するには、クイックタグエディターでタグ名を入力または編集中に少し停止します。
メモ
クイックタグエディターの コードヒント環境設定は、通常のコードヒント環境設定によって制御されます。 詳しくは、コードヒントの環境設定を参照してください。
次のいずれかの操作を実行します。
タグ名または属性名の入力を開始します。 コードヒントメニューの選択は、入力した文字で 始まる最初の項目にジャンプします。
上向き矢印キーや下向き矢印キーを使用して項目を選択してください。
項目を探すには、スクロールバーを使用します。
Enterキーを押して選択した項目を挿入するか、項目を
ダブルクリックして挿入します。
項目を挿入せずにヒントメニューを閉じるには、
Escapeキーを押すか、入力を続けます。
ヒントメニューを無効にするか、 表示されるまでの遅延を変更する
編集／環境設定
（Windows）またはDreamweaver／環境設定（Macintosh）
を選択し、コードヒントを選択します。
「コードヒント」環境設定ダイアログボックスが表示されます。
ヒントメニューを無効にするには、「コードヒントを有効にする」オプションのチェックを外します。
タグセレクターでのコードの編集
タグセレクターを使用すると、デザインビューを離れずに、タグを選択、編集、または削除することができます。 タグセレクターはドキュメントウィンドウの最下部のステータスバーに表示され、一連のタグで構成されています。
タグの編集または削除
ドキュメント内をクリックします。
挿入ポイントに適用されるタグがタグセレクターに表示されます。
タグセレクターのタグを右クリック（Windows）またはControlキーを押しながらクリック（Macintosh）します。
タグを編集するには、メニューから「タグの編集」を選択します。 クイックタグエディターで変更を行います。詳細については、クイックタグエディターでコードを編集を参照してください。
タグを削除するには、メニューから「タグを削除」を選択します。
タグに対応するオブジェクトを選択
ドキュメント内をクリックします。
挿入ポイントに適用されるタグがタグセレクターに表示されます。
タグセレクターのタグをクリックします。
タグで表示されるオブジェクトが、ページ上で選択されます。
メモ
この方法を使用して、個々のテーブル行（trタグ）またはセル（tdタグ）を選択します。
デザインビューでスクリプトを作成および編集する
クライアントサイドJavaScriptとVBScriptは、コードビューとデザインビューの両方で以下の方法で作業できます：
デザインビューを離れることなく、ページ用のJavaScriptまたはVBScriptスクリプトを作成します。
デザインビューを離れることなく、ドキュメント内の外部スクリプトファイルへのリンクを作成します。
デザインビューを離れることなく、スクリプトを編集します。
開始する前に、表示 > ビジュアルエイド > 非表示エレメントを選択して、スクリプトマーカーがページに表示されるようにします。
クライアントサイドスクリプトの記述
スクリプトを挿入したい位置に挿入ポイントを置きます。
挿入／HTML／スクリプトを選択します。
ファイルの選択ウィンドウでスクリプトを選択します。
メモ
開始および終了の script タグを含める必要はありません。
選択したファイルのスクリプトタグがドキュメントに挿入されます。
スクリプトの編集
スクリプトマーカーを選択します。
プロパティインスペクターの、「編集」ボタンをクリックします。
スクリプトプロパティダイアログボックスにスクリプトが表示されます。
外部スクリプトファイルにリンクした場合、そのファイルがコードビューで開き、編集を行うことができます。
メモ
スクリプトタグの間にコードがある場合、外部スクリプトファイルへのリンクもある場合でも、スクリプトプロパティダイアログボックスが開きます。
言語ボックスで、スクリプトの言語としてJavaScriptまたはVBScriptを指定します。
タイプポップアップメニューで、スクリプトのタイプ（クライアントサイドまたはサーバーサイド）を指定します。
（オプション）ソースボックスで、外部リンクされたスクリプトファイルを指定します。
フォルダーアイコンまたは「参照」ボタンをクリックして、ファイルを選択するか、またはパスを入力します。
スクリプトを編集し、「OK」をクリックします。
デザインビューでASPサーバーサイドスクリプトを編集
ASPスクリプトプロパティインスペクターを使用して、デザインビューでASPサーバーサイドスクリプトを検査および変更します。
デザインビューで、サーバー言語タグのビジュアルアイコンを選択します。
ASPスクリプトプロパティインスペクターで、編集ボタンをクリックします。
ASP サーバーサイドスクリプトを編集して「OK」をクリックします。
プロパティインスペクターを使用してページのスクリプトを編集します
プロパティインスペクターで、言語ポップアップメニューからスクリプト言語を選択するか、言語ボックスに言語名を入力します。
メモ
JavaScriptを使用していて、バージョンが不明な場合は、 JavaScript1.1やJavaScript1.2ではなく、JavaScriptを選択してください。
「種類」ポップアップメニューで、スクリプトの種類を、クライアントサイドまたはサーバーサイドのいずれかから指定します。
（オプション）「ソース」ボックスで、外部にリンクされたスクリプトファイルを指定します。 フォルダーアイコンをクリックしてファイルを選択するか、またはパスを入力します。
「編集」をクリックして、スクリプトを編集します。
JavaScript ビヘイビアーの使用
タグインスペクターの「ビヘイビアー」タブを使用すると、 ページ要素にJavaScript（クライアントサイド）ビヘイビアーを 簡単に添付できます。 詳しくは、組み込みJavaScriptビヘイビアーの適用 Dreamweaverを参照してください。
