マニュアルキャンセル

コーディングの環境設定

検索

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

Dreamweaver

アプリを開く

Dreamweaver でコーディングの環境設定、コードテーマ、フォーマット、コードの書き換えの環境設定を設定する方法について説明します。

特定のニーズに合わせて、コードフォーマットやコードカラーリングなど、コーディングに関する各種の環境設定を指定できます。

注意：

高度な環境設定を行うには、タグライブラリエディターを使用します（詳しくは、タグライブラリの管理を参照してください）。
Dreamweaver では、CSS、JS および PHP ファイルタイプでのフォーマットの適用がサポートされています。PHP、CSS、JS コードフォーマットのカスタマイズ方法について詳しくは、コードのフォーマットを参照してください。

コードの表示方法の設定

ワードラップの設定、コードの行番号の表示、コードエレメントのシンタックスカラーリングの設定、インデントの設定、非表示の文字の表示は、表示／コードビューオプションメニューから行います。

コードビューまたはコードインスペクターでドキュメントを表示します。
表示／コードビューオプションを選択します。
必要に応じて以下のオプションを選択または選択解除します。

ワードラップ

コードがウィンドウ幅に合わせて折り返され、水平方向にスクロールすることなく参照できるようになります。これはコードを見やすくするための機能で、実際に改行が挿入されるわけではありません。

行番号

コードの横に行番号を表示します。

非表示の文字

ホワイトスペースの代わりに特殊文字を表示します。例えば、スペースはドットに置き換わり、タブは二重山カッコに置き換わり、改行は段落マーカーに置き換わります。

注意：

ワードラップ用に Dreamweaver で表示されるソフト改行は、段落マーカーと一緒には表示されません。

シンタックスカラーリング

コードの色付けを有効または無効にします。カラーリングスキームの変更方法については、コードカラーリングの設定を参照してください。

自動インデント

コードの入力中に Enter キーが押されたときに、コードを自動的にインデント表示します。コードの新しい行は、前の行と同じレベルにインデントされます。インデント幅の変更方法については、コードフォーマットの変更の「タブサイズ」オプションを参照してください。

コードフォーマットの変更

コードの表示を変更するには、フォーマット環境設定でインデント、行の長さ、タグ名と属性名の大文字と小文字の区別などを指定します。

「常に無視する」を除くすべてのコードフォーマットオプションは、新規ドキュメントか、または既存のドキュメントに対する新規追加分にのみ自動適用されます。

既存の HTML ドキュメントのフォーマットを変更するには、そのドキュメントを開いて、編集／コード／ソースフォーマットの適用を選択します。

編集／環境設定を選択します。
左のカテゴリーリストから「コードフォーマット」を選択します。
次のいずれかのオプションを設定します。

インデント

Dreamweaver で生成されるコードを（コードフォーマット環境設定で指定したインデント規則に従って）インデントするかどうかを指定します。

注意：

このダイアログボックスのインデントオプションのほとんどは、Dreamweaver によって生成されるコードにのみ適用され、ユーザーが入力したコードには適用されません。ユーザーが入力した新しいコード行を前の行と同じレベルにインデントするには、表示／コードビューオプション／自動インデントを選択します。詳しくは、コードフォーマットの設定を参照してください。

以下を使用

（テキストボックスおよびポップアップメニュー）Dreamweaver で生成されるコードのインデントに使用するスペースまたはタブの数を指定します。例えば、テキストボックスに「3」と入力し、ポップアップメニューで「タブ」を選択すると、Dreamweaver によって生成されるコードは各インデントレベルで 3 つのタブ文字を使用してインデントされます。

タブサイズ

コードビューに表示する各タブの幅を文字数で指定します。例えば、「タブサイズ」を 4 に設定すると、コードビューに表示される各タブの幅は、4 つの空白文字分になります。このとき、「インデント」オプションで「タブ」および「3」に設定されていると、Dreanweaver によって生成されるコードは各インデントレベルで 3 つのタブ文字を使用してインデントされるので、コードビューでは 12 文字分の空白が表示されます。

注意：

Dreamweaver では、スペースまたはタブを使用してインデントが設定されます。コードの挿入時に一連のスペースがタブに変換されることはありません。

Emmet

コーディング時に Emmet 省略コードを使用する場合は、このオプションを選択します。このオプションを選択した場合、Tab キーを押すと、Emmet 省略コードが完全な HTML コードまたは CSS コードに変換されます。Emmet の使用法について詳しくは、Dreamweaver での Emmet ツールキットの使用を参照してください。

改行タイプ

リモートサイトのホストとして動作するリモートサーバーの種類（Windows、Mac OS、または UNIX）を指定します。正しい改行タイプを選択することにより、リモートサーバー上で HTML ソースコードが正しく表示されます。この改行設定は、特定の種類の改行文字しか認識しない外部テキストエディターで作業するときにも有用です。例えば、外部エディターとしてメモ帳（Windows）を使用する場合は CR LF を設定し、SimpleText（Mac OS）を使用する場合は CR を設定します。

注意：

FTP を使用して接続する各サーバーでは、このオプションはバイナリ転送モードにのみ適用されます。Dreamweaver の ASCII 転送モードでは、このオプションは無視されます。ASCII モードでファイルをダウンロードする場合、Dreamweaver では、使用しているコンピューターのオペレーティングシステムに基づいて改行が設定されます。一方、ASCII モードでファイルをアップロードする場合は、すべての改行が CR LF に設定されます。

TD タグ：TD タグ内に改行を含めない

<td> タグの直後または </td> タグの直前に空白文字または改行があるときに、一部の古いブラウザーで起こる表示上の問題に対処します。このオプションを選択すると、Dreamweaver では <td> タグの後または </td> タグの前に改行が必要なフォーマットがタグライブラリで設定されている場合でも、それらの位置に改行が挿入されなくなります。

詳細フォーマット

タグライブラリエディターで、個々のタグや属性の書式設定オプションを設定できます。

空白文字

（日本語版のみ）HTML コード用に   または全角スペースのいずれかを選択できます。ここで選択した空白文字は、テーブルの作成時や、日本語エンコーディングのページで「連続するスペースを入力可能にする」オプションがオンになっている場合に、空のタグに使用されます。

コード折りたたみ最小サイズ

コードの折りたたみの既定サイズは 2 行です。この既定の設定では、コードが 2 行以上あるすべてのコード部分を折りたためます。2 行未満のコード部分は、コードを選択することによってのみ、折りたたむことができます。詳しくは、コードの折りたたみと展開を参照してください。

コードの書き換えの環境設定

コードの書き換えの環境設定では、ドキュメントを開いたとき、フォームのエレメントをコピー＆ペーストしたとき、プロパティインスペクターなどのツールを使用して属性値や URL を入力したときに、コードを自動的に修正するかどうかと、その方法を指定します。この環境設定の内容は、コードビューでの HTML やスクリプトの編集には影響しません。

コードの書き換えのオプションを無効にすると、ドキュメントウィンドウ上の HTML に、本来であれば書き換えられる無効なマークアップアイテムが表示されます。

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択します。
左のカテゴリーリストから「コードの書き換え」を選択します。
次のいずれかのオプションを設定します。

無効なネストや開始タグを修正する

オーバーラップしているタグを書き換えます。例えば、text は、text に書き換えられます。このオプションを選択すると、閉じ引用符や閉じカッコが抜けている場合、適宜挿入されます。

ペーストするときにフォームアイテムの名前を変更

フォームオブジェクト名の重複を回避できます。このオプションは初期設定では有効になっています。

注意：

この環境設定ダイアログボックス内の他のオプションと異なり、このオプションは、ドキュメントを開いたときには適用されず、フォームエレメントをコピー＆ペーストしたときにのみ適用されます。

余分な終了タグを削除する

対応する開始タグがない終了タグを削除します。

タグの修正や削除の際に警告する

技術的に誤りがあり、Dreamweaver によって修正された HTML についての要約を表示します。この要約には、問題のある場所の行番号と桁位置が示されるため、修正された部分を参照して、適切に処理されているかどうかを確認できます。

コードの書き換え禁止：拡張子付きのファイル内

指定した拡張子のファイルについて、コードを書き換えないように Dreamweaver を設定できます。これは、サードパーティのタグはファイルに含まれている場合に役立ちます。

& を使用して属性値の <、>、&、" をエンコード

プロパティインスペクターなどの Dreamweaver ツールを使用して入力または編集した属性値を、正当な文字だけで構成されるように自動修正します。このオプションは初期設定では有効になっています。

注意：

このオプションおよび後続のオプションは、コードビューで入力した URL には適用されません。また、ファイル内の既存のコードは変更されません。

特殊文字をエンコードしない

正当な文字だけが使用されるように、Dreamweaver による URL の自動修正機能を無効にします。このオプションは初期設定では有効になっています。

&# を使用して URL の特殊文字をエンコード

プロパティインスペクターなどの Dreamweaver ツールを使用して URL を入力または編集した場合、これらの URL が正当な文字だけで構成されるように自動修正します。

％を使用して URL の特殊文字をエンコード

1 つ前のオプションと同じ処理が行われますが、特殊文字のエンコード方法が異なります。このエンコード方法（パーセント記号を使用）の方が古いブラウザーとの互換性という点では優れていますが、一部の言語の文字を適切に処理できません。

コードヒントの環境設定

コードヒントの環境設定では、コードヒントの動作方法を設定できます。

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択します。
左のカテゴリーから「コードヒント」を選択します。
次のいずれかのオプションを設定します。

終了タグ

Dreamweaver でのタグの閉じ方を指定します。
- "</" の入力後 -
- 開始タグ ">" の入力後 - 開始タグを閉じた後に終了タグが自動的に追加されるようにしたい場合は、このオプションを選択します。
- Never（閉じない）- 終了タグが自動的に追加されないようにするには、このオプションを設定します。
コードヒントを使用可能にする

Dreamweaver でのコードヒントとコード補完機能を有効または無効にするには、このオプションを選択します。Dreamweaver のコードヒントとコード補完機能について詳しくは、コードヒントとコード補完機能を参照してください。

ツールヒントを有効にする

コードヒントに説明が表示されるようにするには、このオプションを選択します。これらの説明では、記述しているコードについての追加情報が示されます。

括弧を自動挿入 オンにすると、ユーザーが開始括弧を入力するたびに、閉じ括弧が自動的に挿入されます。オフにすると、ユーザーが開始括弧を入力しても閉じ括弧は挿入されません。すべてのファイルタイプ（html、php、css、js）で、すべての種類の括弧に適用されます。

引用符を自動挿入 オンにすると、ユーザーが開始引用符を入力するたびに、閉じ引用符が自動的に挿入されます。オフにすると、ユーザーが開始引用符を入力しても閉じ引用符は挿入されません。すべてのファイルタイプ（html、php、css、js）で、一重引用符と二重引用符の両方に適用されます。

コードの自動補完の環境設定を指定する

カッコや引用符の自動挿入を有効または無効にするには、次の手順を実行します。

次の場所から brackets.json ファイルを開きます。
- Windows の場合： %appdata%¥Adobe¥Dreamweaver CC 2018¥en_US¥Configuration¥Brackets¥
- Mac の場合：~/Library/Application Support/Adobe/Dreamweaver CC 2018/en_US/Configuration/Brackets/
角括弧、丸括弧の閉じ括弧の自動挿入を無効にするには、autoCloseBraces を False に設定します。
対応する引用符の自動挿入を無効にするには、autoCloseQuotes を False に設定します。

閉じ括弧、閉じ引用符の自動挿入を有効にするは、上記の値を true に設定します。

Dreamweaver でコードの自動補完の環境設定を指定する
.json ファイルを保存し、Dreamweaver を再起動します。

PHP 環境設定の指定

目的の PHP コーディング開発環境を設定できます。作業対象の個々のサイトごとに、または Dreamweaver サイト外に保存されたすべての PHP ファイル全体に対して設定できます。

Dreamweaver により、選択した PHP 各国語バージョンのコードヒントと構文チェックが設定されます。

非サイト固有のファイルの PHP コードバージョンの環境設定を指定するには、次の手順を実行します。

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択します。
左のカテゴリーリストから「PHP」を選択します。
PHP バージョンドロップダウンリストから PHP バージョンを選択し、「適用」をクリックします。

特定サイトの PHP バージョンを設定するには、次の手順を実行します。

サイト設定ダイアログボックスの「詳細設定」で「PHP」を選択します。
PHP バージョンドロップダウンリストから PHP バージョンを選択し、「保存」をクリックします。

サイト固有の PHP 環境設定の指定

カラーテーマとコードテーマの設定

Dreamweaver の起動時に、環境設定に応じたカラーテーマを選択できます。この環境設定はいつでも変更できます。

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択します。
左のカテゴリーリストから「インターフェイス」を選択します。
カラーテーマリストからテーマを選択します。
インターフェイステーマを設定したら、コードテーマを設定します。

暗めのテーマと明るめのテーマから選択できます。
「適用」をクリックして変更を保存します。

必要に応じて、さらにコードカラーリングをカスタマイズできます。詳しくは、コードカラーリングのカスタマイズを参照してください。

外部エディターの使用

特定の拡張子のファイルを編集するときに使用する外部エディターを指定できます。例えば、Dreamweaver から BBEdit、メモ帳、TextEdit などのテキストエディターを起動して、JavaScript（JS）ファイルを編集できます。

様々なファイル拡張子に異なる外部エディターを割り当てることができます。

ファイルタイプに対する外部エディターの設定

編集／環境設定を選択します。
左側のカテゴリーリストから「ファイルタイプ/エディター」を選択し、オプションを設定して「OK」をクリックします。

コードビューで開く

Dreamweaver のコードビューで自動的に開くファイルの拡張子を指定します。

変更をリロード

Dreamweaver で開かれているドキュメントが外部エディターで変更された場合に、Dreamweaver によって検出される動作を指定します。

実行時に保存

Dreamweaver で編集中のドキュメントを、外部エディターを起動する前に必ず保存するか、ドキュメントを保存しないか、または外部エディターを起動するたびに保存の確認を行うかを指定します。

Fireworks

アプリケーションへのパスをここで指定することによって、Dreamweaver に Fireworks を接続することができます。

その他の関連ヘルプ

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

新規ユーザーの場合