Dreamweaver でのコーディングに関する一般情報

Web サイト作成に使用される各種コーディング言語の、Dreamweaver でのサポート状況について説明します。

フル機能の Web サイトを設計・開発するために使用される最もポピュラーなプログラミング言語は、フロントエンドについては HTML、HTML5、および CSS で、バックエンドについては、PHP、JavaScript、Java、および jQuery です。

Web サイト全体の外観（フォントや色など）のデザインには、CSS を使用できます。その後、HTML を使用して、画像、テキスト、ビデオ、フォーム、およびその他のコンテンツ要素を挿入し、1 つの Web ページにまとめます。

CSS と HTML を使用して構築できるのは、静的サイトです。ただし、ほとんどの Web サイトでは、何らかのインタラクション（顧客にフォームへの情報入力を求めたり、支払い処理を求めるなど）を行ったり、すべての Web サイトデータを保管するためのデータベースを使用する必要が生じます。

これらのバックエンド通信チャンネルを作成するには、データベースと通信するサーバーサイドプログラミング言語（PHPなど）が必要になります。

Dreamweaverでサポートされているプログラミング言語

Adobe Dreamweaver には、テキストの編集機能だけでなく、コードヒントなど、次の言語でのコーディングを支援する各種の機能が備わっています。

HTML
PHP
CSS
JavaScript

上記以外の言語（Perl など）は、Dreamweaver の言語固有のコーディング機能ではサポートされていません。例えば、Perl ファイルを作成して編集することは可能ですが、Perl のコードヒントは使用できません。

自動コード修正

指定した基準に従って手入力のコードを自動的にクリーンアップするためのオプションを Dreamweaver で設定できます。ただし、コード書き換えオプションを有効にするか、コードを変更するアクションを実行しない限り、コードが書き換えられることはありません。例えば、「ソースフォーマットの適用」コマンドを使用しない限り、Dreamweaver は、ユーザーが記述した空白や属性の大文字小文字を変更しません。

これらのコード書き換えオプションの一部は初期設定で有効になっています。

Dreamweaver の Roundtrip HTML 機能により、オリジナルの HTML ソースコードのコンテンツと構造を維持したまま、テキストベースの HTML エディターと Dreamweaver を交互に切り替えて、両アプリケーションで同じドキュメントを編集できます。これらの機能は、以下のとおりです。

サードパーティ製のテキストエディターを使用して、現在のドキュメントを編集します。
初期設定では、無効なコードであっても、別の HTML エディターで作成または編集したコードが Dreamweaver で変更されることはありません。ただし、コード書き換えオプションを有効にしている場合はこの限りではありません。
Dreamweaver で認識されないタグ（XML タグなど）は、それらのタグを検証する基準がないため、修正されません。認識されないタグが別のタグの上にオーバーラップした場合（例えば、<MyNewTag><em>text</MyNewTag></em>)）、Dreamweaver はそのタグをエラーとしてマークしますが、コードは書き換えられません。
コードビューで無効なコードを黄色でハイライト表示するように Dreamweaver を設定することもできます。ハイライト表示されたセクションを選択すると、プロパティインスペクターにエラーの修正方法が表示されます。

XHTML コード

Dreamweaver では、大半の XHTML 要件を満たすように、新しい XHTML コードの生成や既存の XHTML コードのクリーンアップが行われます。また、その他の XHTML 要件に対応するために必要なツールも用意されています。

注意：

一部の要件は、HTML の各種バージョンの要件と同じです。

以下の表に、Dreamweaver で自動的に満たされる XHTML 要件を示します。

XHTML 要件	Dreamweaver で行われる処理
ドキュメントには、ルートエレメントの前に DOCTYPE 宣言が必要です。この宣言は、XHTML 用の 3 つの DTD（Document Type Definition）ファイル（Strict、Transitional、または Frameset）のいずれかを参照する必要があります。	XHTML DOCTYPE を XHTML ドキュメントに追加します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> または、XHTML ドキュメントにフレームセットがある場合は次のようになります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
ドキュメントのルートエレメントは html にしてください。また、html エレメントは XHTML 名前空間を明示する必要があります。	namespace 属性を html エレメントに追加します。 <html xmlns="http://www.w3.org/1999/xhtml">
標準ドキュメントには、head、title、および body 構造エレメントが必要です。フレームセットドキュメントには、head、title、および frameset 構造エレメントが必要です。	標準ドキュメントには、head、title、および body エレメントが含まれています。フレームセットドキュメントには、head、title、および frameset エレメントが含まれています。
ドキュメントのすべてのエレメントは、適切にネストされる必要があります。 <p>This is a <i>bad example.</p></i> <p>This is a <i>good example.</i></p>	正しくネストされたコードを生成します。また、XHTML をクリーンアップするときに、Dreamweaver によって生成されていないコードのネストを訂正します。
すべてのエレメントおよび属性名は、小文字にする必要があります。	生成される XHTML コードの HTML エレメントおよび属性名を小文字にします。また、タグおよび属性の大文字/小文字の設定にかかわらず、クリーンアップ時に小文字にします。
DTD で EMPTY と宣言されているエレメントを除き、すべてのエレメントには終了タグが必要です。	生成するコードに終了タグを挿入します。また XHTML クリーンアップ時に終了タグを挿入します。
空のエレメントには終了タグを付けるか、開始タグの末尾を /> にする必要があります。例えば、<br> は無効です。正しい形式は、<br></br> または <br/> です。空のエレメントは以下のとおりです。area、base、basefont、br、col、frame、hr、img、input、isindex、link、meta、および param。 XML をサポートしていないブラウザーとの下位互換性のためには、/> の前にスペースが必要です。例えば、<br /> とする必要があり、<br/> ではありません。	生成するコードの空のタグに、終了スラッシュの前にスペースを入れて空のエレメントを挿入します。また、XHTML クリーンアップ時にも同様の操作を行います。
属性を省略して短くすることはできません。例えば、<td nowrap> は無効です。正しい形式は、<td nowrap="nowrap"> になります。この要件は次の属性に適用されます。checked、compact、declare、defer、disabled、ismap、multiple、noresize、noshade、nowrap、readonly、および selected。	生成するコードに、完全な属性値のペアを挿入します。また XHTML クリーンアップ時に同様の処理を行います。注意：HTML ブラウザーが HTML 4 をサポートしていない場合は、完全なフォームで記述されていても、これらのブール値の属性が認識されないことがあります。
すべての属性値は、引用符で囲む必要があります。	生成するコードの属性値を引用符で囲みます。また、XHTML クリーンアップ時に同様の処理を行います。
以下のエレメントには、id 属性と name 属性が必要です。a、applet、form、frame、iframe、img、および map。例えば、<a name="intro">Introduction</a> は無効です。正しい形式は、 <a id="intro">Introduction</a> または <a id="section1" name="intro"> Introduction</a> です。	name 属性および id 属性を同じ値に設定する必要があるのは、name 属性がプロパティインスペクターで設定されたとき、Dreamweaver によってコードが生成されたとき、および XHTML をクリーンアップするときです。
列挙型の値を持つ属性の場合、この値は小文字にする必要があります。列挙型の値は、指定された使用可能な値のリストから得られる値です。例えば、align 属性には、center、justify、left、および right の値を使用できます。	生成するコードの列挙型の値を小文字にします。また、XHTML クリーンアップ時に同様の処理を行います。
すべての script および style エレメントには、type 属性が必要です。 HTML 4 以降は type 属性が script エレメントに必須の属性です（HTML 4 以降、language 属性は推奨されなくなりました）。	type 属性および language 属性を、生成するコードの script エレメントに設定します。また、type 属性を style エレメントに設定します。XHTML クリーンアップ時にも同様の処理を行います。
すべての img エレメントおよび area エレメントに alt 属性が必要です。	生成するコードのこれらの属性を設定します。また、XHTML クリーンアップ時に同様の処理を行い、alt 属性のないものをレポートします。

正規表現

正規表現とは、テキスト内の文字の組み合わせを表すパターンのことです。コードの検索に正規表現を使用すると、例えば「var」で始まる行や、数値を含んだ属性値など、概念的な検索対象を指定できます。

以下の表は、正規表現の特殊文字、その意味、および使用例を示しています。この表のいずれかの特殊文字を含むテキストを検索するには、その特殊文字の前にバックスラッシュを付けてエスケープします。例えば、some conditions apply* というフレーズからアスタリスク（*）を検索する場合の検索パターンは、apply\* のようになります。アスタリスクをエスケープしないと、「apply」にアスタリスクが 1 つ付いているパターンではなく、「apply」の出現箇所（および「appl」、「applyy」、「applyyy」などの出現箇所）がすべて検索されてしまいます。

文字	意味	例
^	入力または行の始め	^T は、「This good earth」の「T」を検索しますが、「Uncle Tom’s Cabin」の「T」は無視します。
$	入力または行の終わり	h$ は、「teach」の「h」を検索しますが、「teacher」の「h」は無視します。
*	直前の文字の 0 回以上の繰り返し	um* は、「rum」の「um」、「yummy」の「umm」、および「huge」の「u」を検索します。
+	直前の文字の 1 回以上の繰り返し	um+ は、「rum」の「um」および「yummy」の「umm」を検索しますが、「huge」の場合は無視します。
?	直前の文字を 0 回または 1 回（直前の文字がオプションであることを示す）	st?on は、「Johnson」の「son」、「Johnston」の「ston」を検索しますが、「Appleton」や「tension」の場合は無視します。
.	新行（改行）以外のすべての単一文字	.an は、「bran muffins can be tasty」の「ran」および「can」を検索します。
x\|y	x または y	FF0000\|0000FF は、bgcolor=”#FF0000” の「FF0000」および font color=”#0000FF” の「0000FF」を検索します。
{n}	直前の文字の n 回繰り返し	o{2} は、「loom」の「oo」および「mooooo」の最初の 2 つの「o」を検索しますが、「money」の場合は無視します。
{n,m}	直前の文字の最低 n 回、最高 m 回の繰り返し	F{2,4} は、「#FF0000」の「FF」および「#FFFFFF」の最初の 4 つの「F」を検索します。
[abc]	カッコ内に含まれる文字 1 つ。ハイフンを使って、特定範囲の文字を指定（[a-f] と [abcdef] は同じ）	[e-g] は、「bed」の「e」、「folly」の「f」、「guard」の「g」を検索します。
[^abc]	カッコ内に含まれない文字 1 つ。ハイフンを使って、特定範囲の文字を指定（[^a-f] と [^abcdef] は同じ）	[^aeiou] は、「orange」の「r」、「book」の「b」、「eek!」の「k」を最初に検索します。
\b	語境界（スペース、改行など）	\bb は、「book」の「b」を検索しますが、「goober」や「snob」の「b」は無視します。
\B	語境界以外のすべて	\Bb は、「goober」の「b」を検索しますが、「book」の「b」は無視します。
\d	数字 1 文字（[0-9] と同じ）	\d は、「C3PO」の「3」および「apartment 2G」の「2」を検索します。
\D	非数字 1 文字（[^0-9] と同じ）	\D は、「900S」の「S」および「Q45」の「Q」を検索します。
\f	用紙送り
\n	改行
\r	キャリッジリターン
\s	スペース、タブ、用紙送り、改行を含むホワイトスペース 1 つ	\sbook は、「blue book」の「book」を検索しますが、「notebook」の場合は無視します。
\S	非ホワイトスペース 1 つ	\Sbook は、「notebook」の「book」を検索しますが、「blue book」の場合は無視します。
\t	タブ 1 つ
\w	下線を含む、英数字 1 つ（[A-Za-z0-9_] と同じ）	b\w* は、「the barking dog」の「barking」および「the big black dog」の「big」と「black」を検索します。
\W	非英数字の 1 つ（[^A-Za-z0-9_] と同じ）	\W は、「Jake＆Mattie」の「＆」および「100％」の「％」を検索します。
Ctrl + Enter または Shift + Enter（Windows）、Control + Return、Shift + Return、または Command + Return（Mac OS）	改行文字。正規表現を使用しない場合に改行文字を検索するときは、「ホワイトスペースの違いを無視」をオフにしてください。この検索では、一般の意味の改行ではない特定の文字が検索されます。例えば、<br> タグや <p> タグは無視されます。デザインビューでは、改行文字は改行ではなくスペースとして表示されます。

カッコで正規表現内をグループ分けし、後で参照できるように区別します。その後で、「置換」フィールドで $1、$2、$3 などを使用して、1 番目、2 番目、3 番目、およびそれ以降のカッコのグループを参照します。

注意：

「検索」ボックスでは、$1、$2、$3 ではなく \1、\2、\3 を使用して、正規表現内のカッコのグループを参照します。

例えば、(\d+)\/(\d+)\/(\d+) を検索し、それを $2/$1/$3 で置換すると、スラッシュで区切られた日付の日、月が入れ替わるので、アメリカ式とヨーロッパ式の日付を変換することができます。

サーバービヘイビアーコード

Dreamweaver では、動的ページの開発時にサーバービヘイビアーパネルからサーバービヘイビアーを選択すると、適切なコードブロックがページに挿入され、そのサーバービヘイビアーが機能するようになります。

このコードブロック内のコードを手動で変更すると、該当するサーバービヘイビアーをバインディングやサーバービヘイビアーなどのパネルを使用して編集することはできなくなります。Dreamweaver は、ページコード内の特定のパターンに基づいてサーバービヘイビアーを検出し、サーバービヘイビアーパネルに表示します。コードブロック内のコードがなんらかの形で変更されると、Dreamweaver ではサーバービヘイビアーを検出できなくなり、したがってサーバービヘイビアーパネルに表示できなくなります。しかしその場合でも、サーバービヘイビアーはページ内に残り、Dreamweaver のコーディング環境で編集できます。

Dreamweaver でのコーディングについて

Dreamweaverでサポートされているプログラミング言語

自動コード修正

XHTML コード

正規表現

サーバービヘイビアーコード

その他の関連ヘルプ

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

アドビサポートコミュニティ

サポート