Dreamweaver のコーディング環境を使用して、より迅速にコードを作成する方法を説明します。

Dreamweaver でコードを操作する場合は、開発者ワークスペースを使用できます。このワークスペースには初期設定でコードビューが表示され、画面の左側にはファイルパネルとスニペットパネルだけがドッキングされています。

追加の機能が必要な場合は、「ウィンドウ」をクリックして、適切なパネルを選択します。

注意:

事前にデザインされたワークスペースでは、実際のニーズを十分に満たせない場合は、ワークスペースのレイアウトを独自にカスタマイズできます。パネルを開いて、必要な場所でドッキングし、ワークスペースをカスタムワークスペースとして保存します。詳しくは、カスタムワークスペースの作成を参照してください。

Dreamweaver でのコードの操作

Dreamweaver では、複数の方法でコードを操作できます。次のビューを使用できます。

ワークスペースの上部にあるコード、分割およびデザイン/ライブの切り替えボタンをクリックして、ビューを切り替えることができます。

コードインスペクターを使用して、フローティングウィンドウに HTML を表示することもできます。コードインスペクターでは、ビューを半分に分割しなくても、Web サイトのデザインとコードを同時に確認できます。詳しくは、コードインスペクターによる別ウィンドウでのコードの表示を参照してください。

ドキュメントウィンドウでのコードの表示 - コードビュー

表示/コードを選択します。

ドキュメントウィンドウでのコーディングとページ編集の同時進行 - 分割ビュー

  1. 表示/コードとデザインを選択します。

    上のペインにコード、下のペインにページが表示されます。

  2. ページを上部に表示するには、ドキュメントツールバーの表示オプション/デザインビューを上に表示を選択します。
  3. ドキュメントウィンドウ内のペインのサイズを調整するには、分割バーを目的の位置までドラッグします。分割バーは、2 つのペインの間にあります。

    デザインビューで変更を加えると、コードビューが自動的に更新されます。コードビューで変更を加えた場合は、デザインビューをクリックするか、F5 キーを押して、デザインビューのドキュメントを手動で更新します。

コードインスペクターによる別ウィンドウでのコードの表示

コードインスペクターを使用すると、コードビューで実行できるのと同じ作業を独立したコーディングウィンドウでおこなうことができます。

  1. ウィンドウ/コードインスペクターを選択します。ツールバーには、次のオプションが表示されます。

    ファイル管理

    ファイルを PUT または GET します。

    ブラウザーでのプレビュー/デバッグ

    ドキュメントをブラウザーでプレビューまたはデバッグできます。

    デザインビューの更新

    デザインビューでドキュメントを更新し、コードに対する変更内容を反映します。コードに対する変更内容は、ファイルの保存や、このボタンのクリックなどの操作を実行しない限り、デザインビューに自動的には反映されません。

    コードのナビゲーション

    コード内をすばやく移動できます。詳しくは、JavaScript または VBScript の関数へのジャンプを参照してください。

    表示オプション

    コードの表示方法を指定できます。詳しくは、コードの表示方法の設定を参照してください。

Dreamweaver でのコーディングの効率化

Dreamweaver のコードビューには、デザイナーがコードビューでの開発に移行するために役立つコーディング対応の機能が用意されています。経験豊富なプログラマーは、自動インデント、コードカラーリング、サイズ変更可能なフォントなどのビジュアルエイドを活用して、エラーを削減し、読みやすさを向上することができます。

Dreamweaver に用意されているいくつかの機能を次に示します。

コードヒントとコード補完機能

Dreamweaver のコードヒント(またはコード補完)機能を使用すると、入力時にタグ、属性、CSS スタイルをポップアップメニューから選択できます。このコードの自動補完機能によって、コードを迅速に記述し、エラーを減らすことができます。

HTML でこの機能がどのように役立つかを次の例に示します。 

Dreamweaver で「<」と入力すると、使用可能なすべての HTML タグを含むポップアップメニューが表示されます。タグの入力を続けると、使用可能な HTML オプションが自動更新され、適切なタグを選択できます。Enter キーを押すと、タグが自動的に挿入されます。次に、そのタグの使用可能なすべてのプロパティを含む 2 つ目のポップアップメニューが表示されます。

コードヒントのサポートは、CSS、JavaScript および PHP(PHP バージョン 5.6 および 7.1)でも使用できます。 

詳しくは、コードヒントとコード補完機能を参照してください。

PHP 5.6 および 7.1 バージョンのサポート

Dreamweaver は PHP バージョン 5.6 および 7.1 をサポートします。 

(サイトごとに)サイト設定ダイアログボックスを使用するか、(Dreamweaver サイト外で保存されたすべての PHP ファイルについて)アプリケーションの環境設定を使用して PHP バージョン 5.6 または 7.1 を使ってサイトの PHP ファイルをコンパイルすることができます。Dreamweaver により、選択した PHP 各国語バージョンのコードヒントと構文チェックが設定されます。

Dreamweaver の新規サイトの場合、デフォルトの PHP コンパイラーは、編集/環境設定/PHP で指定したバージョンに設定されます。

Dreamweaver での PHP のサポートについて詳しくは、 を参照してください。

PHP バージョン 5.6 および 7.1 の一般的な情報については、次のリソースを参照してください。

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

Dreamweaver は、JavaScript のオブジェクトのコードヒントをサポートしています。Dreamweaver には、配列、日付、数値、文字列などの基本的な JavaScript オブジェクトのコードヒントが用意されています。 

また、Dreamweaver では、ユーザーが作成した JavaScript 関数を記録し、独自の関数名を使用してコードヒントを提供します。

詳しくは、コードヒントとコード補完機能を参照してください。

JavaScript コードのリファクタリング

Dreamweaver では、コードのリファクタリングがサポートされています。コードのリファクタリングは、外部ビヘイビアーを変更せずに既存のコンピューターコードを再構築するプロセスです。コードは読みやすくなり、理解しやすくなります。関数が小さくなり、適切な置換が行われるため、コードのデバッグにかかる時間が短縮されます。JavaScript のリファクタリングでは、スコープを認識した状態で関数と変数の名前を変更できます。

詳しくは、コードの記述と編集を参照してください。

様々なファイルの種類のコードカラーリング

Dreamweaver では、次に対するコードのカラーリングがサポートされています:HTML、JS、CSS、PHP、XML、LESS、Sass、SCSS、SVG、Bash、C、C#、C++、clojure、CoffeeScript、Dart、Diff、EJS、Embedded Ruby、Groovy、Handlebars、Haskell、Haxe、Java、JSON、Lua、Markdown、Markdown(GitHub)、Perl、Properties、Python、RDF Turtle、Ruby、Scala、SQL、Stylus、Text、VB、VBScript、XML、YAML。

繰り返しタスクでのマルチカーソル

一度に複数のコード行を記述すると、ブレットリストの作成、一連の文字列の更新、複数の編集の同時実行などの作業を迅速におこなえます。

この機能を使用すると、同じコード行を何度も記述する必要がないので、生産性が大幅に向上します。マルチカーソルによって、この処理がまとめておこなわれます。

コードの編集時には、次の操作を実行できます。

  • マルチカーソルを追加して、複数の場所に新しいコンテンツを追加する
  • 複数の場所でテキストを選択して、同じ編集をドキュメントの様々な部分に適用する

詳しくは、マルチカーソルまたは複数選択の追加を参照してください。

関連するコードファイルを迅速に編集可能

コードをすばやく変更するには、特定のコードスニペットにカーソルを置き、コンテキストメニューを使用するか、Ctrl+E キー(Windows)または Command+E キー(Mac)を押して、クイック編集にアクセスします。

Dreamweaver では、コンテキスト固有のコードオプションとツールがインラインに表示されます。

使用事例

次の例で考えてみましょう。

HTML ファイルの編集時に、ライブビューで表示が不適切な部分が見つかりました。コードビューに切り替えたところ、問題を修正するには、別の関連ファイル(CSS ファイルなど)の編集が必要であることがわかりました。 

タブを切り替える代わりに、関連するコードを右クリックして「クイック編集」をクリックするか、キーボードショートカットを使用すると、関連する CSS ファイルのコードの該当セクションが HTML ファイル内で開きます。

これで、タブから離れたり、タブを切り替えたりすることなく CSS コードを編集できます。変更内容は CSS ファイルで自動的に更新されます。

詳しくは、クイック編集を参照してください。

コンテキスト内 CSS ドキュメント

クイックドキュメントには、CSS プロパティのドキュメントが表示されます。このドキュメントはコードビュー内で直接確認できます。

CSS プロパティについて確認するために、Dreamweaver の外部の Web ページに移動する必要はありません。クイックドキュメントを表示するには、Ctrl+K キー(Windows)または Command+K キー(Mac)を押します。

詳しくは、 クイックドキュメントの使用による Dreamweaver 内の CSS に関するヘルプの表示を参照してください。

Emmet の組み込みのサポート

Emmet は、HTML および CSS コードの高速なコーディングおよび生成を可能にするプラグインです。

Emmet プラグインは Dreamweaver に組み込まれており、プラグインをインストールしなくても Emmet 省略記法を使用できます。

Dreamweaver のコードビューまたはコードインスペクターで Emmet 省略記法を使用して Tab キーを押すと、これらの省略コードが HTML マークアップまたは CSS に展開されます。

HTML 省略コードは、HTML および PHP ページに展開されます。

CSS 省略コードは CSS、LESS、Sass、SCSS ページ、または HTML ページのスタイルタグ内に展開されます。

Emmet の使用法について詳しくは、Dreamweaver での Emmet ツールキットの使用を参照してください。

コードの折りたたみ

Dreamweaver では、コードセクションを折りたためるので、現在編集中のセクションにより簡単に集中できます。 

コードは、タグや大括弧に基づいて折りたたむことも、選択項目に基づいて折りたたむこともできます。 

詳しくは、コードの折りたたみと展開を参照してください。

コード検証

Dreamweaver には、コード内のエラーをデバッグするための強力な構文チェック機能が用意されています。 

この機能は、コードを解析して、潜在的なエラーやコードの疑わしい使用を検出します。Dreamweaver の構文チェックで検出されるものには、HTML 構文エラー、CSS での解析エラー、JavaScript ファイルでの警告などがあります。

Dreamweaver のコードの構文チェックについて詳しくは、構文チェックコードを参照してください。

PHP の操作時に無効なコードがドキュメントに含まれている場合、Dreamweaver はそのコードをデザインビュー(開いている場合)に表示し、コードビューではコードを強調表示します(設定済みの環境設定によって異なります)。

いずれかのビューでコードを選択すると、そのコードが無効である理由と、その修正方法が、プロパティインスペクターに表示されます。

注意:

コードビューで無効なコードをハイライト表示するオプションは、初期設定でオフになっています。このオプションをオンにするには、コードビューに切り替えてから(表示/コード)、表示/コードビューオプション/無効なコードをハイライト表示を選択します。

また、ドキュメントを開いたときに各種の無効なコードが自動的に書き換えられるように設定することができます。

コーディングの環境設定について詳しくは、コーディングの環境設定を参照してください。

CSS プリプロセッサーのサポート

Dreamweaver では、コードカラーリング、コードヒント、コンパイルの機能をすべて備えた一般的な CSS プリプロセッサー(Sass、LESS、SCSS など)がサポートされるようになりました。 

CSS プリプロセッサーのサポートによって、複雑なスタイルシートを使用する大規模なサイトの操作時に時間を節約できます。

Dreamweaver の CSS プリプロセッサーのサポートについて詳しくは、Dreamweaver での CSS プリプロセッサーの使用を参照してください。

コードスニペットの保存と再利用

スニペットパネル内で、よく使用されるコードブロックをコードスニペットとして保存します。保存したコードブロックは、複数のページに挿入できます。

スニペットパネルに保存したスニペットはサイト固有のものではないので、サイト間で再利用できます。

同期設定を使用して、異なるデバイス間、および異なるバージョンの Dreamweaver 間でスニペットを使用することもできます。

詳しくは、スニペットでコードを再利用するを参照してください。

ブラウザーでのリアルタイムプレビュー

コードの変更をブラウザーですばやくリアルタイムにプレビューできます。ブラウザーを手動で更新する必要はありません。Dreamweaver をブラウザーに接続できるようになったので、ページをリロードしなくてもすぐに変更がブラウザーに表示されます。

詳しくは、ブラウザーでのリアルタイムプレビューを参照してください。

キーボードショートカットをカスタマイズする

Dreamweaver では、好みのキーボードショートカットを使用できます。特定のキーボードショートカットによる操作(例えば、Shift+Enter で改行を挿入、Ctrl+G でコード内の特定の位置に移動)に慣れている場合は、キーボードショートカットエディターを使用してそのショートカットを Dreamweaver に追加することができます。

操作方法については、キーボードショートカットをカスタマイズするを参照してください。

初期設定でファイルをコードビューで開く

HTML が通常記述されていないタイプのファイル(JavaScript ファイルなど)を開くと、このファイルはデザインビューではなくコードビュー(またはコードインスペクター)に表示されます。コードビューでどのファイルタイプを開くかを指定することができます。

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。
  2. 左のカテゴリーリストから「ファイルタイプ/エディター」を選択します。
  3. 「コードビューで開く」ボックスに、自動的にコードビューで開くファイルタイプの拡張子を追加します。

    各拡張子の間にはスペースを入れます。入力できる拡張子の数に制限はありません。

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

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