マニュアルキャンセル

デザインビューでのコードの編集

検索

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

このトピックでは、Adobe Dreamweaver のプロパティインスペクターを使用してデザインビューでコードを編集する方法について説明します。

Dreamweaver では、基になるソースコードを記述しなくても、Web ページを視覚的に作成して編集することができます。ただし、作成した Web ページの細かな調整やトラブルシューティングを行うために、コードを直接編集する必要が生じる場合もあります。Dreamweaver では、デザインビューで作業しながら一部のコードを編集することができます。

このセクションは、主にデザインビューで作業しながら、コードもすばやく確認したいというユーザーを対象にしています。

デザインビューでの子タグの選択

デザインビューで子タグを含むオブジェクト（例えば HTML テーブル）を選択した状態で編集／子タグを選択すると、そのオブジェクトの最初の子タグをすばやく選択できます。

注意：

このコマンドは、デザインビューのみで有効になります。

例えば、<table> タグには、通常 <tr> という子タグがあります。タグセレクターで <table> タグを選択する場合、編集／子タグを選択すると、テーブルの最初の行を選択できます。Dreamweaver により、タグセレクターの最初の <tr> タグが選択されます。<tr> タグには子タグ（<td> タグ）があるので、再度編集／子タグを選択すると、テーブルの最初の子セルが選択されます。

プロパティインスペクターでのコードの編集

プロパティインスペクターを使用して、ページ上のテキストやオブジェクトの属性を調べたり、編集することができます。一般に、プロパティインスペクターに表示されるプロパティはタグの属性と対応しています。プロパティインスペクターでプロパティを変更すると、通常、それに対応する属性をコードビューで変更した場合と同じ結果が得られます。

注意：

タグインスペクターおよびプロパティインスペクターのどちらでも、タグの属性を表示および編集できます。タグインスペクターでは、タグに関連付けられたすべての属性を表示および編集できます。プロパティインスペクターには一部の最も一般的な属性しか表示されませんが、属性値の変更機能がタグインスペクターよりも充実しており、特定のタグに対応していない特定のオブジェクト（テーブル列など）を編集することができます。

ページ上でテキストをクリックするか、オブジェクトを選択します。

ドキュメントウィンドウの下に、テキストまたはオブジェクトのプロパティインスペクターが表示されます。プロパティインスペクターが表示されない場合は、ウィンドウ／プロパティを選択します。
プロパティインスペクターで、属性を変更します。

プロパティインスペクターでの CFML の編集

プロパティインスペクターを使用して、デザインビューで ColdFusion マークアップを調べたり、修正したりすることができます。

プロパティインスペクターで「属性」ボタンをクリックして、タグの属性を編集するか、または新しい属性を追加します。
開始タグと終了タグの間にコンテンツが含まれている場合は、「コンテンツ」ボタンをクリックして、そのコンテンツを編集します。

「コンテンツ」ボタンは、選択されたタグが空のタグでない場合（つまり、開始タグと終了タグが両方ともある場合）のみ表示されます。
タグに条件式が含まれている場合は、「式」ボックスでその条件式を変更してください。

クイックタグ編集の概要

クイックタグ編集を使用すると、HTML タグの確認、挿入、編集をデザインビューを離れずに簡単に行うことができます。

クイックタグ編集で無効な HTML を入力すると、Dreamweaver によって閉じ引用符や山形閉じカッコが必要な箇所に挿入され、自動的に修正されます。

クイックタグ編集のオプションを設定するには、Ctrl + T（Windows）または Command + T（Mac OS）を押してクイックタグ編集を開きます。

クイックタグ編集には以下の 3 つのモードがあります。

HTML の挿入モードでは、新しい HTML コードを挿入できます。
タグの編集モードでは、既存のタグを編集できます。

HTML の挿入モードでは、新しい HTML コードを挿入できます。
タグの編集モードでは、既存のタグを編集できます。
折り返しタグモードでは、現在の選択範囲を新しいタグで囲むことができます。

注意：

クイックタグ編集で使用されるモードは、デザインビューで現在選択している内容に応じて決まります。

いずれのモードでも、クイックタグ編集を使用する際の基本手順は同じです。つまり、エディターを開き、タグと属性を入力または編集して、エディターを閉じます。

クイックタグ編集をアクティブにして、Ctrl + T（Windows）または Command + T（Mac OS）を押すと、各モードに順番に切り替えることができます。

クイックタグ編集でのコードの編集

クイックタグ編集（編集／クイックタグ編集）を使用して、HTML タグの挿入と編集をデザインビューを離れずに簡単に行うことができます。

HTML タグの挿入

デザインビューで、コードを挿入するページ内の場所をクリックして、挿入ポイントを置きます。
Ctrl + T（Windows）または Command + T（Mac OS）を押します。

HTML の挿入モードで、クイックタグ編集が開きます。

「HTML の挿入」モードでのクイックタグ編集
HTML タグを入力して Enter キーを押します。

タグがコードに挿入され、対応する終了タグがある場合はそれも挿入されます。
変更しないで終了する場合は、Esc キーを押します。

HTML タグの編集

デザインビューでオブジェクトを選択します。

ドキュメントウィンドウの最下段にあるタグセレクターから、編集するタグを選択することもできます。詳しくは、タグセレクターでのコードの編集を参照してください。
Ctrl + T（Windows）または Command + T（Mac OS）を押します。

タグの編集モードで、クイックタグ編集が開きます。
新しい属性を入力するか、既存の属性を編集します。またはタグ名を変更します。
次の属性に進むには Tab キーを押します。前の属性に戻るには Shift + Tab を押します。

注意：

初期設定では、Tab キーまたは Shift + Tab を押すと、変更がドキュメントに適用されます。
すべての変更を適用してクイックタグ編集を閉じるには、Enter キーを押します。
これ以上変更しないで終了するには、Esc キーを押します。

選択範囲を HTML タグで囲む

デザインビューで、書式設定されていないテキストまたはオブジェクトを選択します。

注意：

開始 HTML タグまたは終了 HTML タグを含むテキストやオブジェクトを選択した場合、クイックタグ編集は、折り返しタグモードではなくタグの編集モードで開きます。
Ctrl + T（Windows）または Command + T（Mac OS）を押すか、またはプロパティインスペクターの「クイックタグ編集」ボタンをクリックします。

折り返しタグモードで、クイックタグ編集が開きます。
strong などの単一の開始タグを入力し、Enter キー（Windows）または Return キー（Mac OS）を押します。

現在の選択部分の始めに開始タグが挿入され、終わりに終了タグが挿入されます。
これ以上変更しないで終了するには、Esc キーを押します。

クイックタグ編集でのヒントメニューの使用

クイックタグ編集には、編集中または挿入中のタグに指定可能な属性を一覧表示する属性ヒントメニューがあります。

クイックタグ編集では、ヒントメニューを使用不可にしたり、メニューが表示されるまでの待ち時間を調節することもできます。

タグに指定できる属性をヒントメニューに一覧表示するには、クイックタグ編集で属性名の編集中に数秒間作業を停止します。ヒントメニューが表示され、編集中のタグで使用できるすべての属性が一覧表示されます。

同様に、有効なタグ名をヒントメニューで表示するには、クイックタグ編集でタグ名の入力中または編集中に数秒間作業を停止します。

注意：

クイックタグ編集のコードヒントの環境設定は、通常のコードヒントの環境設定によって制御されます。詳しくは、コードヒントの環境設定を参照してください。

次のいずれかの操作を実行します。
- タグ名または属性名の入力を開始します。コードヒントメニューで選択すると、入力した文字で始まる最初の項目にジャンプします。
- 上向き矢印キーや下向き矢印キーを使用して項目を選択してください。
- 項目を探すには、スクロールバーを使用します。
選択した項目を挿入するには、Enter キーを押すか、項目をダブルクリックします。
項目を挿入しないでヒントメニューを閉じるには、Esc キーを押すか、入力を続けます。

ヒントメニューの無効化または表示待ち時間の調整

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択し、「コードヒント」を選択します。

「コードヒント」環境設定ダイアログボックスが表示されます。
ヒントメニューを使用不可にするには、「コードヒントを使用可能にする」オプションをオフにします。

タグセレクターでのコードの編集

タグセレクターを使用すると、デザインビューを離れずに、タグを選択、編集、または削除することができます。タグセレクターはドキュメントウィンドウの最下部のステータスバーに表示され、一連のタグで構成されています。

タグの編集または削除

ドキュメント内をクリックします。

挿入ポイントに適用できるタグが、タグセレクターに表示されます。
タグセレクターのタグを右クリック（Windows）または Control キーを押しながらクリック（Mac OS）します。
タグを編集するには、メニューから「タグの編集」を選択します。クイックタグ編集で適宜変更を行います。詳しくは、クイックタグ編集でのコードの編集を参照してください。
タグを削除するには、メニューから「タグを削除」を選択します。

タグに対応するオブジェクトの選択

ドキュメント内をクリックします。

挿入ポイントに適用できるタグが、タグセレクターに表示されます。
タグセレクターのタグをクリックします。

タグで表示されるオブジェクトが、ページ上で選択されます。

注意：

この方法を使用して、テーブルの行（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 に組み込まれているビヘイビアーの適用を参照してください。

その他の関連ヘルプ

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る