コーディング時間を最小限に抑えるには、Dreamweaver のコードヒントとコード補完機能を使用します。

Dreamweaver のインテリジェントなコード補完またはコード ヒント機能を使用すると、入力ミスやその他のよくある間違いを減らしてコードをすばやく挿入および編集できます。

この機能を使用して、次の項目を確認することもできます。

  • タグに対して使用可能な属性
  • 関数に対して使用可能なパラメーター
  • オブジェクトに対して使用可能なメソッド

サポートされる言語およびテクノロジ

Dreamweaver では、次の言語およびテクノロジに関するコードヒントがサポートされています。

コードヒントとコード補完機能がこれらの言語でどのように機能するかについて説明します。

コードヒントを使用可能にする

コードヒントを使用可能にするには、編集/環境設定/コードヒントを選択し、「コードヒントを使用可能にする」を選択します。コードヒントを使用不可にするには、「コードヒントを使用可能にする」の選択を解除します。

コードヒントで説明を有効にするには、「ツールヒントを有効にする」を選択します。その後、コードヒントに説明が表示されます。

HTML コードヒント

HTML では次のタイプのコードヒントを使用できます。

  • タグのヒント
  • 属性名のヒント
  • 属性値のヒント

タグのヒント

キーボードの < キーを押してコードの入力を開始します。入力を始めると、有効な HTML タグが表示されます。入力しようとしているストリングがメニューに表示されている場合は、そのストリングまでスクロールして Enter キーまたは Return キーを押すと、入力が完了します。

例えば、「<」を入力すると、ポップアップメニューにタグ名のリストが表示されます。タグ名の残り部分を入力する代わりに、メニューからタグを選択してテキストに追加することができます。

基本的な HTML のコードヒント
基本的な HTML のコードヒント

これらの HTML タグのヒントには、タグの簡単な説明(ある場合)も含まれています。

属性名のヒント

Dreamweaver でのコーディングの際には、タグの適切な属性が表示されます。使用できる有効な属性名を表示するには、タグ名を入力してスペースバーを押します。

属性名のコードヒント
属性名のコードヒント

属性値のヒント

属性値のヒントテキストは静的または動的のどちらでもかまいません(例えば、コードヒントには、関連ファイルの内容に基づいて値が表示されます)。

ほとんどの属性値のヒントは静的です。target 属性値の例を次に示します。この値自体が静的なので、ヒントも静的になります。 

静的な属性値のヒントの例
静的な属性値のヒントの例

Dreamweaver では、必要とする属性値(id、target、src、href、class など)の動的なコードヒントが表示されます。

動的に表示されるコードヒントの例を次にいくつか示します。 

src の動的なコードヒント

この例では、「src」と入力すると有効な属性値が表示され、「images」を選択すると、画像フォルダー内にある実際の有効な画像が Dreamweaver に表示されます。次に、下にスクロールして目的の画像を選択します。

src の動的なコードヒント
src の動的なコードヒント

CC ライブラリのアセットがある場合は、「src」と入力したときにそのアセットも表示されます。これらの CC ライブラリアセットはクラウドアイコンで示されます。

CC ライブラリアセットを選択すると、画像サイズをリサンプリングして画像の形式を変更するためのポップアップメニューが表示されます。

CC ライブラリアセットをコードに含める
CC ライブラリアセットをコードに含める

注意:

コードヒント内に表示できる CC ライブラリアセットは 50 個のみです。これらのヒントはアルファベット順に表示されます。

注意:

リモートの CC ライブラリアセットを Dreamweaver のコードに含めることはできません。

href の動的なコードヒント

「href」と入力すると、Dreamweaver ではフォルダー内のファイルのリストが表示されます。また、リンク先となるファイルを参照して選択するためのオプションも表示されます。

href の動的なコードヒント
href の動的なコードヒント

id および style の動的なコードヒント

CSS ファイルで ID を定義済みの場合は、HTML ファイルで「id」と入力すると、使用可能なすべての ID が表示されます。

id の動的なコードヒント
id の動的なコードヒント

同様に、CSS スタイルを定義済みの場合は、HTML ファイルで「style」と入力すると、使用可能なすべてのスタイルが表示されます。

style の動的なコードヒント
style の動的なコードヒント

CSS コードヒント

コードヒントは、次のように様々なタイプの CSS に使用できます。

  • @ルール
  • プロパティ
  • 擬似セレクターおよび擬似エレメント
  • ショートハンド

コードヒントとは異なり、ヒントは CSS プロパティに使用することもできます。

CSS @ルールのコードヒント

Dreamweaver では、次に示すように、すべてのアットルールのコードヒントが CSS ルールの説明と共に表示されます。

CSS のアットルールのコードヒント
CSS のアットルールのコードヒント

CSS プロパティのヒント

CSS プロパティの入力時にコロンを入力すると、有効な値の選択に役立つコードヒントが表示されます。

次のコード例では、「font-family:」と入力すると、有効なフォントセットが表示されます。

いずれかのフォントセットを選択するか、これらのヒント内からフォントを管理ダイアログを開いて、優先するフォントを設定できます。

CSS プロパティのコードヒントとヘルプ
CSS プロパティのコードヒントとヘルプ

便利なコードヒントのもう 1 つの例として、CSS でカラーを使用する場合が挙げられます。カラーに関連するプロパティ(境界線の色や背景色など)の入力時にコロンを入力すると、コードヒントにカラーのリストが表示されます。このリストからカラーを選択するか、コードヒント内からカラーピッカーを開いて、優先するカラーを設定できます。

CSS カラーに関連するコードヒント
CSS カラーに関連するコードヒント

CC ライブラリのカラースウォッチがある場合は、コードヒントにそのスウォッチも表示されます。

クラウドアイコンで示される CC ライブラリのカラースウォッチ
クラウドアイコンで示される CC ライブラリのカラースウォッチ

注意:

コードヒント内に表示できる CC ライブラリアセットは 50 個のみです。これらのヒントはアルファベット順に表示されます。

擬似セレクターおよび擬似エレメントのヒント

CSS 擬似セレクターをセレクターに追加し、エレメントの特定の状態を定義することができます。たとえば、:hover を使用すると、セレクターによって指定されたエレメントの上にユーザーがマウスを置くとスタイルが適用されます。

「:」と入力すると、カーソルが適切なコンテキストにある場合は、Dreamweaver に有効な疑似セレクターのリストが表示されます。

疑似セレクターのコードヒント
疑似セレクターのコードヒント

「::」と入力すると、カーソルが適切なコンテキストにある場合は、Dreamweaver に有効な疑似エレメント(エレメントの指定された部分のスタイル設定に使用されます)のリストが表示されます。

擬似エレメントのコードヒント
擬似エレメントのコードヒント

CSS ショートハンドのヒント

ショートハンドプロパティは、他の複数の CSS プロパティの値を同時に設定できる CSS プロパティです。CSS ショートハンドプロパティの例には、背景やフォントのプロパティなどがあります。

下の例に示されているように、CSS ショートハンドプロパティ(たとえば、background など)を入力した場合、スペースを入力すると Dreamweaver に次のように表示されます。

  • 関連性順に適切なプロパティ値
  • 使用する必要がある必須の値(たとえば、font を使用する場合、font-size と font-family が必須です)
  • そのプロパティのブラウザー展開
background CSS プロパティのコードヒント
background CSS プロパティのコードヒント

CSS ショートハンドプロパティが入力されると、コードヒントにも入力したプロパティの値が表示されます。

CSS コードヒント

一部の CSS プロパティ(box-shadow または text-shadow など)では、どの値がそのプロパティに従う必要があるかを示すヒントと、アスタリスクを使用してどの値が必須の値であるかを示すヒントが Dreamweaver に表示されます。 

また、ブラウザーが CSS をどのように解釈するかを確認することもできます。

CSS プロパティに表示されるヒント
CSS プロパティに表示されるヒント

JavaScript のコードヒント

JavaScript ファイルでは、変数および関数パラメーターのコードヒントが Dreamweaver によって提供されます。 

次の例では、コードスニペットにタイプが表示されます。

JavaScript のコードヒント
JavaScript のコードヒント

JavaScript に対して表示されるコードヒントリストの内容は、JavaScript ファイルに対しておこなった操作に応じて自動的に更新されます。例えば、プライマリ HTML ファイルに対する作業の途中で、JavaScript ファイルに切り替えて変更を加えたとします。プライマリ HTML ファイルに戻ると、JavaScript ファイルに加えた変更はコードヒントリストに反映されています。 

注意:

この自動更新が機能するのは JavaScript ファイルを Dreamweaver 上で編集した場合のみです。

ライブオブジェクトの検査

Dreamweaver は、JavaScript の型のコードヒントの自動更新もおこないます。

たとえば、変数を数値と定義した場合、Dreamweaver にその情報が保持されます。コード内でその変数を後で参照すると、その型が示されます。

変数の型(文字列に変更したとします)を変更した場合、Dreamweaver のコードヒントはその変数が文字列であることを自動的に示します。

変数の型を示すコードヒント
変数の型を示すコードヒント

動的文書の追加

特定の関数にコメントを追加した場合、その関数のヒントが表示されると、Dreamweaver にその関数のドキュメントも表示されます。 

PHP コードヒント

Dreamweaver は、PHP 5.6 および 7.1 バージョンのコードヒントをサポートしています。これらの PHP のコードヒントはサイト固有であり、主要なすべての関数、クラスおよび定数を網羅します。

PHP バージョン 5.6 および 7.1 について詳しくは、PHP マニュアルを参照してください。

サイト固有のコードヒントについて詳しくは、サイト固有のコードヒントを参照してください。

便利な PHP のコードヒント機能には、変数の自動補完機能があります。

ドル記号($)を入力すると、現在のスクリプト内のすべての変数のリストが表示されます。目的の変数を選択して、Enter/Return キーを押します。関連ファイルの変数も表示されるので、同じ変数が別の目的で再利用されるリスクを排除できます。

PHP 7.1 が初期値として設定されている場合は PHP 7.1 固有のコードヒントが表示されます。

PHP 7 コードヒント
PHP 7 コードヒント

PHP オブジェクトのコードヒントの例
PHP オブジェクトのコードヒントの例

PHP コードヒントのディレイ設定の編集

.php ファイルでのコード入力のパフォーマンスを向上させるために、Dreamweaver 2017.5 以降には、PHP コードヒントのディレイが追加されています。PHP コードを入力すると、400 ミリ秒後にヒントが表示されます。PHP コードのディレイ設定を変更する場合は、この手順に従います。

  1. Dreamweaver を終了します。

  2. テキストエディターを使用して、次の場所から brackets.json を開きます。

    • Windows%appdata%¥Adobe¥Dreamweaver CC 2017¥<locale>¥Configuration¥Brackets¥
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
  3. ダイアログボックスの右上隅にある「構造を保存」ボタンをクリックします。

    JSON ファイルで、名前と値のペアの後ろにコンマを追加します。

    次の行を、望ましいディレイ時間をミリ秒単位で指定して追加します。"delayInPHPHint": <ミリ秒単位の時間> 例:"delayInPHPHint": 200

  4. ファイルを保存し、Dreamweaver を再起動します。

サイト固有のコードヒント

Dreamweaver では、Joomla、Drupal、Wordpress または他のフレームワークを使用して、コードビューで作成しながら PHP のコードヒントを表示できます。コードヒントを表示するには、サイト固有のコードヒントダイアログボックスを使用して先に設定ファイルを作成する必要があります。設定では、サイト固有のコードヒントを検索する場所を Dreamweaver に指示します。

サイト固有のコードヒントの使用方法に関するビデオチュートリアルについては、www.adobe.com/go/learn_dw_comm13_jp を参照してください。

設定ファイルの作成

Dreamweaver でコードヒントを表示するために必要な設定ファイルを作成するには、サイト固有のコードヒントダイアログボックスを使用します。

デフォルトでは、Dreamweaver は設定ファイルを Adobe Dreamweaver CS5¥configuration¥Shared¥Dinamico¥Presets ディレクトリに保存します。

注意:

作成するコードヒントは、Dreamweaver のファイルパネルで選択されているサイト固有になります。コードヒントを表示するには、作業中のページが現在選択されているサイトに存在している必要があります。

  1. サイト/サイトオプション/サイト固有のコードヒントを選択します。

    デフォルトでは、サイト固有のコードヒント機能はサイトをスキャンして、使用されているコンテンツ管理システム(CMS)を判別します。Dreamweaver は、Drupal、Joomla、Wordpress の 3 種類のフレームワークをデフォルトでサポートします。

    構造ポップアップメニューの右側にある 4 つのボタンを使用して、フレームワークの構造をインポート、保存、名前変更、または削除できます。

    注意:

    既存のデフォルトのフレームワーク構造については、削除または名前を変更することはできません。

  2. 「サブルート」テキストボックスで、フレームワークのファイルを保存するサブルートフォルダーを指定します。テキストボックスの横にあるフォルダーアイコンをクリックして、フレームワークファイルの場所を参照できます。

    フレームワークファイルが含まれるフォルダーのファイルツリー構造が表示されます。スキャンするフォルダーやファイルがすべて表示されている場合は、「OK」をクリックしてスキャンを実行します。スキャンをカスタマイズする場合は、次の手順に進みます。

  3. ファイルウィンドウの上にあるプラス(+)ボタンをクリックして、スキャンに追加するファイルまたはフォルダーを選択します。ファイル/フォルダーを追加ダイアログボックスでは、含める特定のファイル拡張子を指定できます。

    注意:

    特定のファイル拡張子を指定すると、スキャン処理の時間が短くなります。

  4. スキャンからファイルを削除するには、スキャンしないファイルを選択し、ファイルウィンドウの上にあるマイナス(-)ボタンをクリックします。

    注意:

    Drupal または Joomla がフレームワークとして選択されている場合は、Dreamweaver 設定フォルダー内のファイルに対する追加のパスがサイト固有のコードヒントダイアログボックスに表示されます。

    このパスはこれらのフレームワークを使用するときに必要なので、削除しないでください。

  5. サイト固有のコードヒント機能による特定のファイルまたはフォルダーの処理方法をカスタマイズするには、リストから選択し、次のいずれかをおこないます。

    • 選択したフォルダーをスキャンに含めるには、「このフォルダーをスキャン」を選択します。
    • 選択したディレクトリ内のすべてのファイルおよびフォルダーを含めるには、「再帰的」を選択します。
    • 「拡張子」ボタンをクリックして拡張子を検索ダイアログボックスを開き、特定のファイルまたはフォルダーのスキャンに含めるファイル拡張子を指定できます。

サイト構造の保存

サイト固有のコードヒントダイアログボックスで作成したカスタマイズ済みのサイト構造を保存できます。

  1. Dreamweaver を終了します。

  2. 必要に応じてファイルやフォルダーを追加および削除し、対象とするファイルとフォルダーの構造を作成します。

  3. サイト構造の名前を指定して、「保存」をクリックします。

注意:

指定した名前が既に使用されている場合は、別の名前を入力するか、または同じ名前の構造の上書きを確認するかのいずれかを求められます。デフォルトのフレームワーク構造を上書きすることはできません。

サイト構造の名前の変更

サイト構造の名前を変更するときは、3 つのデフォルトのサイトフレームワーク構造の名前または「custom」という単語は使用できないことに注意してください。

  1. 名前を変更する構造を表示します。

  2. ダイアログボックスの右上隅にある「構造の名前を変更」アイコンボタンをクリックします。

  3. 構造の新しい名前を指定して、「名前の変更」をクリックします。

注意:

指定した名前が既に使用されている場合は、別の名前を入力するか、または同じ名前の構造の上書きを確認するかのいずれかを求められます。デフォルトのフレームワーク構造を上書きすることはできません。

サイト構造へのファイルまたはフォルダーの追加

フレームワークに関連付けられている任意のファイルまたはフォルダーを追加できます。ファイルまたはフォルダーを追加したら、スキャンするファイルのファイル拡張子を指定できます。 

  1. ファイルウィンドウの上部にあるプラス(+)ボタンをクリックして、ファイル / フォルダーを追加ダイアログボックスを開きます。

  2. 「ファイル / フォルダーを追加」テキストボックスに、追加するファイルまたはフォルダーのパスを入力します。テキストボックスの横にあるフォルダーアイコンをクリックして、ファイルまたはフォルダーを参照することもできます。

  3. 拡張子ウィンドウの上部にあるプラス(+)ボタンをクリックして、スキャンするファイルのファイル拡張子を指定します。

    注意:

    特定のファイル拡張子を指定すると、スキャン処理の時間が短くなります。

  4. 「追加」をクリックします。

サイトでのファイル拡張子のスキャン

サイト構造に含まれるファイル拡張子を表示および編集するには、拡張子を検索ダイアログボックスを使用します。

  1. サイト固有のコードヒントダイアログボックスで、「拡張子」ボタンをクリックします。

    拡張子を検索ダイアログボックスに、現在スキャン可能になっている拡張子が一覧表示されます。

  2. リストに別の拡張子を追加するには、拡張子ウィンドウの上部にあるプラス(+)ボタンをクリックします。

  3. リストから拡張子を削除するには、マイナス(-)ボタンをクリックします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー