Dreamweaver ワークスペース

Dreamweaver をインストールした後、最初にアプリケーションを起動すると、3 つの質問を尋ねるクイックスタートメニューが画面に表示されます。これらの質問に答えることにより、Dreamweaver ワークスペースを必要に応じてパーソナライズできます。

Dreamweaver は、これらの質問の回答に基づき、開発者ワークスペースまたは標準ワークスペースのいずれかで開きます（開発者ワークスペースは、コードに焦点を当てた最小限のレイアウト、標準ワークスペースは、コーディング時のアプリ内プレビューとビジュアルツールを含む分割レイアウトです）。

ワークスペースを選択した後、使いやすいカラーテーマを選択します。これらの操作をおこなった後、作業を開始することができます。

改善されたホーム画面

Dreamweaver のホーム画面では、最近使用したファイル、ファイルの種類およびスターターテンプレートにすばやくアクセスできます。

サブスクリプションステータスに応じて、スタートワークスペースにはユーザーの要件に合わせたコンテンツが表示されることがあります。

Dreamweaver でホーム画面が表示されるのは、起動時または開いているドキュメントがないときです。

Dreamweaver のスタートワークスペースを操作する際のオプション

「学習」をクリックすると、この画面から Dreamweaver チュートリアルにすばやくアクセスできます。

Dreamweaver でドキュメントの作成を開始するには、表示されているファイルタイプをクリックします。

Dreamweaver に付属しているスターターテンプレートの 1 つを開きます。

「ホーム」をクリックすると、スタート画面に戻ります。

スタート画面で最近作業したファイルを表示できます。最近使用したファイルがない場合は、このタブは空になります。

この画面の右上隅の検索アイコンを使用して、検索機能を使用することもできます。検索クエリーを入力すると、そのクエリーと一致する最近使用したファイル、Creative Cloud アセット、ヘルプリンク、ストック画像が表示されます。

「新規作成」をクリックして、新しい Dreamweaver ファイルの作成を開始できます。ファイルがシステム内に既にある場合は、「開く」をクリックします。Dreamweaver でドキュメントを作成したり、開いたりする方法については、ファイルの作成およびオープンを参照してください。

ワークスペースの概要

Dreamweaver のワークスペースには、ドキュメントと、オブジェクトのプロパティが表示されます。ワークスペースにはツールバーがあり、最も一般的な操作の多くを実行するためのボタンが配置されているため、ドキュメントを変更する作業をすばやく実行できます。

ワークスペース要素の概要

ワークスペースには、次のエレメントがあります。

アプリケーションウィンドウの上部にあります。ワークスペース切り替えコントロール、メニュー（Windows のみ）、および他のアプリケーションコントロールが備わっています。

ドキュメントウィンドウの様々なビュー（デザインビュー、ライブビュー、コードビューなど）のオプションを選択できるボタンが含まれています。

標準ツールバーを表示するには、ウィンドウ／ツールバー／標準を選択します。ツールバーには、ファイルメニューと編集メニューに含まれる操作のうち、よく使用される「新規作成」、「開く」、「保存」、「すべて保存」、「コードの印刷」、「カット」、「コピー」、「ペースト」、「取り消し」および「やり直し」のボタンがあります。

アプリケーションウィンドウの左側にあり、ビュー固有のボタンが含まれています。

現在作成または編集しているドキュメントが表示されます。

選択したオブジェクトまたはテキストのプロパティを確認し、変更することができます。各オブジェクトにはそれぞれ違ったプロパティがあります。

ドキュメントウィンドウの下部のステータスバーにあります。現在の選択範囲を囲むタグの階層が表示されます。階層内の任意のタグをクリックして、そのタグを含むタグの内容をすべて選択します。

作業の監視や変更を行う場合に使用します。挿入パネル、CSS デザイナーパネル、ファイルパネルなどがあります。パネルを展開するには、そのタブをダブルクリックします。

Creative Cloud に PSD ファイルをアップロードし、表示することができます。このパネルを使用すると、PSD カンプの CSS、テキスト、イメージ、フォント、カラー、グラデーションおよび測定値をドキュメントに抽出できます。

イメージ、テーブル、メディアエレメントなどの様々な種類のオブジェクトをドキュメントに挿入するためのボタンがあります。各オブジェクトは 1 つの HTML コードで、挿入時に様々な属性を設定できます。例えば、挿入パネルの「テーブル」ボタンをクリックすると、テーブルを挿入できます。挿入パネルの代わりに挿入メニューを使用してオブジェクトを挿入することもできます。

Dreamweaver サイトとリモートサーバーの両方のファイルとフォルダーを管理できます。また、ファイルパネルからは、ローカルディスクにあるすべてのファイルへのアクセスが可能です。詳しくは、ファイルとフォルダーの管理を参照してください。

Dreamweaver の様々な Web ページ、サイトおよびインストール済み環境でコードスニペットを保存したり、再利用したりできます（同期設定を使用）。詳しくは、スニペットでコードを再利用するを参照してください。

は、CSS スタイル、ファイル、設定済みプロパティ、メディアクエリーを「視覚的」に作成できる CSS プロパティインスペクターです。

ドキュメントウィンドウの概要

ドキュメントウィンドウに現在のドキュメントが表示されます。ドキュメントのビューを切り替えるには、ドキュメントツールバーの表示オプションを使用します。

表示メニューの表示オプションを使用してビューを切り替えることもできます。

ドキュメントをブラウザー上に表示した場合の実際の様子が忠実に再現され、ブラウザー上とまったく同じようにドキュメントを操作できます。ライブビュー内で HTML エレメントを直接編集し、同じビューで即座に変更をプレビューすることもできます。ライブビューの編集について詳しくは、ライブビューで HTML エレメントを編集するを参照してください。

ページのレイアウトおよび編集を視覚的におこなうことができる、迅速にアプリケーション開発をおこなうためのデザイン環境です。このビューでは、Dreamweaver で編集可能なドキュメントが、ブラウザーでページを表示したときのように視覚的に表示されます。

HTML、JavaScript およびその他の種類のコードを作成および編集するためのハンドコーディング環境です。

コードビューを分割し、ドキュメントの異なるセクションにスクロールして同時に作業をおこなうことができます。

同じドキュメントのコードビューとライブビューの両方を単一のウィンドウ内に表示できます。

では、同じドキュメントのコードビューとデザインビューの両方を単一のウィンドウ内に表示できます。

当該ページを実行するためにブラウザーで使用される実際のコードが表示されます。ライブビューでページを操作すると、それに応じて表示内容が変化します。

ドキュメントウィンドウを最大化（初期設定）すると、ドキュメントウィンドウの上部にタブが表示され、開いているすべてのドキュメントのファイル名が示されます。Dreamweaver では、変更が保存されていないファイル名の後にアスタリスク（*）が表示されます。

また、ドキュメントのタブの下（ドキュメントを複数の異なるウィンドウで表示している場合はドキュメントのタイトルバーの下）には関連ファイルツールバーが表示されます。関連ファイルとは、現在のファイルに関連付けられたドキュメント（CSS ファイル、JavaScript ファイルなど）です。いずれかの関連ファイルをドキュメント ウィンドウで開くには、関連ファイルツールバーで、目的のファイル名をクリックします。

表示の切り替え

ドキュメントツールバーを使用すると、様々なビューをすばやく切り替えることができます。詳しくは、ドキュメントツールバーの概要を参照してください。

表示メニューの次のオプションを使用してビューを切り替えることもできます。

• コードビューのみ：コードを選択します
• 分割ビュー：「分割」を選択し、いずれかの分割オプションを選択します
• ビューモード：ライブビューとデザインビューを切り替えます
• ビューの切り替え：あるビューから別のビューに切り替えます。

ドキュメントウィンドウを重ねて表示、並べて表示または再配置

一度にたくさんのドキュメントを開いている場合は、ドキュメントを重ねて表示、または並べて表示できます。

ドキュメントウィンドウを重ねて表示するには、ウィンドウ／整列／重ねて表示を選択します。

ドキュメントウィンドウを並べて表示するには：

• （Windows）ウィンドウ／整列／上下に並べて表示または左右に並べて表示を選択します。
• （Mac OS）ウィンドウ／整列／並べて表示を選択します。

複数のファイルを開くと、ドキュメントウィンドウはタブ付きで表示されます。タブ付きドキュメントウィンドウの順序を変更するには、ウィンドウのタブをグループ内の新しい位置にドラッグします。

ドキュメントウィンドウのサイズ変更

ステータスバーには、ドキュメントウィンドウの現在のサイズがピクセル単位で表示されます。特定のサイズで最適に表示されるページをデザインするには、ドキュメントウィンドウをあらかじめ設定されているサイズに合わせます。あらかじめ設定されているサイズを編集したり、サイズを作成することもできます。

デザインビューまたはライブビューでページのビューサイズを変更すると、ビューサイズだけが変化します。ドキュメントサイズは変化しません。

表示される選択肢には、あらかじめ定義されたサイズとカスタムサイズの他に、メディアクエリーで指定されたサイズが含まれています。いずれかのメディアクエリーに対応したサイズを選択すると、該当するメディアクエリーが表示に使用されます。また、ページの方向を変更すると、持ち方に応じてページレイアウトが変化するモバイルデバイスでの表示をプレビューできます。

ドキュメントウィンドウをサイズ変更するには、ドキュメントウィンドウの下部にあるウィンドウサイズポップアップメニューからサイズを選択します。

表示されているウィンドウサイズは、枠線を含まないブラウザーウィンドウの内側のサイズを示します。モニターサイズまたはモバイルデバイスの一覧が左側に表示されます。

ウィンドウサイズポップアップメニューに表示されている数値の変更

ウィンドウサイズポップアップメニューへの新しいサイズの追加

ドキュメントツールバーの概要

ドキュメントツールバーには、ドキュメントの各種ビューをすばやく切り替えるためのボタンがあります。ツールバーには、ドキュメントの表示やローカルサイトとリモートサイト間でのドキュメント転送に関連する共通のコマンドやオプションも表示されます。

ドキュメントツールバーには、以下のオプションが表示されます。

ドキュメントウィンドウにコードビューのみを表示します。

コードビューとライブ／デザインビュー間でドキュメントウィンドウを分割します。可変グリッドドキュメントではデザインビューオプションは使用できません。

HTML5 プロジェクトを正確にレンダリングし、リアルタイムで更新して変更箇所を即座に表示する、インタラクティブなプレビューです。ライブビューで HTML エレメントを編集することもできます。ライブビューとデザインビューを切り替えるには、「ライブ」オプションの隣のドロップダウンリストを使用します。このドロップダウンリストは可変グリッドドキュメントでは使用できません。

このビューに表示されるドキュメントを見ると、Web ブラウザーでドキュメントがどのように表示されるかが分かります。

標準ツールバーの概要

標準ツールバーを表示するには、ウィンドウ／ツールバー／標準を選択します。ツールバーには、ファイルメニューと編集メニューに含まれる操作のうち、よく使用される「新規作成」、「開く」、「保存」、「すべて保存」、「コードの印刷」、「カット」、「コピー」、「ペースト」、「取り消し」および「やり直し」のボタンがあります。

ブラウザーナビゲーションツールバーの概要

ブラウザーナビゲーションツールバーはライブビューで有効になり（ウィンドウ／ツールバー／標準を選択して有効にした場合のみ）、ドキュメントウィンドウで表示中のページのアドレスを示します。ライブビューは標準のブラウザーのように動作するため、ローカルサイトの外部にあるサイト（例えば http://www.adobe.com）の閲覧中でも、ドキュメントウィンドウにページが読み込まれます。

初期設定では、ライブビューのリンクはアクティブではありません。リンクがアクティブでないため、ドキュメントウィンドウでリンクテキストを選択またはクリックしたときに、他のページには移動しません。ライブビューでリンクをテストするには、表示／ライブビューオプション／リンク先を表示（Ctrl キーを押しながらリンクをクリック）またはリンク先を連続表示を選択して、1 回のクリックまたは連続したクリックを有効にします。

ツールバーの概要

ツールバーは、ドキュメントウィンドウの左側に縦に表示され、すべてのビュー（コードビュー、ライブビューおよびデザインビュー）で表示されます。ツールバーのボタンは、ビューごとに異なり、作業しているビューで使用可能なものだけが表示されます。例えば、ライブビューで作業している場合は、コードビュー独自のオプション（「ソースコードのフォーマット」など）は表示されません。

ツールバーをカスタマイズ

このツールバーでメニューオプションを追加したり、不要なメニューオプションを削除したりして、必要に応じてツールバーをカスタマイズすることができます。

ツールバーをカスタマイズするには、次の操作を行います。

ツールバーのボタンをデフォルトに戻すには、ツールバーをカスタマイズダイアログボックスで「デフォルトに戻す」をクリックします。

ステータスバーの概要

ドキュメントウィンドウの下部にあるステータスバーには、作成中のドキュメントに関する追加の情報が表示されます。

タグセレクター

現在の選択範囲を囲むタグの階層が表示されます。階層内の任意のタグをクリックして、そのタグを含むタグの内容をすべて選択します。ドキュメントのボディ全体を選択するには、<body> をクリックします。タグセレクターでタグの class または id 属性を設定するには、タグを右クリック（Windows）するか、Control キーを押しながらクリック（Mac OS）し、いずれかのクラスまたは ID をコンテキストメニューから選択します。

出力パネル

このアイコンをクリックすると、出力パネルが表示され、ドキュメントのコーディングエラーを確認できます。

コードの色付け

（コードビューでのみ使用可能）

このポップアップメニューからコーディング言語を選択し、表示するコードの色付けをプログラミング言語に応じて変更します。

挿入と上書きを切り替える

（コードビューでのみ使用可能）

挿入モードと上書きモードを切り替えながらコードビューで作業できます。

行番号と列番号

（コードビューでのみ使用可能）

カーソルがある場所の行番号と列番号が表示されます。

プロパティインスペクターの概要

プロパティインスペクター（ウィンドウ／プロパティ）では、テキストや挿入されたオブジェクトなど、現在選択されているページエレメントの一般的なプロパティを確認および編集できます。

プロパティインスペクターの内容は、選択したエレメントによって異なります。例えば、ページ上のイメージを選択すると、プロパティインスペクターにはそのイメージのプロパティ（イメージへのファイルパス、イメージの幅と高さ、イメージを囲むボーダーなど）が表示されます。

初期設定では、プロパティインスペクターはワークスペースの下端に表示されますが、ドッキングを解除してワークスペースのフローティングパネルにすることもできます。

特定のプロパティインスペクターに関するヘルプを参照するには、プロパティインスペクターの右上隅にあるヘルプボタンをクリックするか、プロパティインスペクターのオプションメニューから「ヘルプ」を選択します。

ページエレメントのプロパティの表示および変更

コンテキストメニュー

コンテキストメニューを使用すると、現在の作業対象であるオブジェクトやウィンドウに関連する、有用なほとんどのコマンドとプロパティに容易にアクセスできます。コンテキストメニューには、現在の選択内容に対して使用できるコマンドのみが表示されます。

コンテキストメニューを開くには、コードビューのコードセクション、またはライブビューもしくはデザインビューのオブジェクトを右クリック（Windows の場合）、または Ctrl キーを押しながらクリック（Mac の場合）します。

Dreamweaver のパネルの再配置

必要に応じて Dreamweaver のすべてのパネルの配置と外観をカスタマイズできます。

パネルのドッキングとドッキング解除

• パネルをドッキングするには、そのタブをドックの上部、下部または他のパネルの間にドラッグします。
• パネルグループをドッキングするには、そのタイトルバー（タブの上にある、何も記述されていない単一色のバー）をドックにドラッグします。
• パネルまたはパネルグループをドックから解除するには、そのタブまたはタイトルバーをドックの外にドラッグします。そのまま他のドックにドラッグできるほか、ドッキングせずにフローティング状態にしておくこともできます。

パネルの移動

パネルを移動すると、移動可能な位置に青色でハイライトされたドロップゾーンが表示されます。例えば、ドックの内部でパネルを上下に移動して他のパネルの上または下に表示される細い青色のドロップゾーンまでドラッグすることで、ドック内部でのパネル位置を変更できます。ドロップゾーンではない位置にドラッグすると、パネルはワークスペースの中でフローティング状態になります。

• パネルを移動するには、そのタブをドラッグします。
• パネルグループを移動するには、タイトルバーをドラッグします。

パネルの追加と削除

ドックにあるパネルをすべて削除すると、そのドックはなくなります。ドロップゾーンが表示されるまでパネルをワークスペースの右端に移動すると、ドックを作成できます。

• パネルを削除するには、パネルのタブを右クリック（Windows）または Control キーを押しながらクリック（Mac OS）して「閉じる」を選択するか、ウィンドウメニューでパネルの選択を解除します。
• パネルを追加するには、ウィンドウメニューでそのパネルを選択し、目的の場所にドッキングします。

パネルグループの操作

• パネルをグループに移動するには、グループ内のハイライトされたドロップゾーンにそのパネルのタブをドラッグします。
• グループの中でパネルを並べ替えるには、パネルのタブをグループ内の新しい場所までドラッグします。
• パネルをグループから解除してフローティング状態にするには、そのパネルのタブをグループ外部にドラッグします。
• グループを移動するには、タイトルバー（タブの上にある部分）をドラッグします。

フローティングパネルのスタック

ドック外部のドロップゾーン以外の場所にパネルをドラッグすると、そのパネルはフローティング状態になります。フローティングパネルはワークスペース内のどこにでも配置できます。フローティング状態のパネルまたはパネルグループをまとめてスタックすると、最前面のタイトルバーをドラッグしたときに全体を 1 つの単位として移動できます。

• フローティングパネルをスタックするには、そのタブを他のパネルの下端にあるドロップゾーンまでドラッグします。
• スタック順を変更するには、パネルのタブを前面方向または背面方向にドラッグします。
• パネルまたはパネルグループをスタックから解除してフローティング状態にするには、そのタブまたはタブ領域（タブの横にある空の領域）あるいはタイトルバーをスタックの外にドラッグします。

パネルのサイズ変更

• パネル、パネルグループ、パネルのスタックを最小化または最大化するには、タブをダブルクリックするか、タブ領域（タブの横にある空の領域）をダブルクリックします。
• パネルのサイズを変更するには、パネルのいずれかの側をドラッグします。

パネルのアイコン化と展開

雑然としたワークスペースにならないように、パネルをアイコン化できます（あらかじめ用意されたワークスペースには、パネルが最初からアイコン化されているものもあります）。

• 列にあるすべてのパネルをアイコン化または展開するには、ドックの上端にある二重矢印をクリックします。
• 単独のパネルを展開するには、そのアイコンをクリックします。
• パネルアイコンのサイズを変更し、ラベルがないアイコンのみの表示にするには、テキストが表示されなくなるまでドックの幅を調整します。アイコンのテキストを再表示するには、ドックの幅を広くします。
• 展開したパネルを閉じるには、パネルのタブ、パネルのアイコンまたはパネルのタイトルバーにある二重矢印をクリックします。

カスタムワークスペースの作成

必要に応じてパネルを追加または削除することにより、ワークスペースをカスタマイズできます。これらのワークスペースの変更を保存すると、後でドキュメントツールバーのワークスペース切り替えコントロールからこれらの変更にアクセスできます。

現在のパネルのサイズと位置を名前の付いたワークスペースとして保存しておくと、パネルを移動したり閉じたりした後でも、そのワークスペースを呼び出すことができます。

カスタムワークスペースを保存するには：

1. ウィンドウ／ワークスペースのレイアウト／新規ワークスペースを選択します。
2. ワークスペースの名前を入力します。

ワークスペースが保存されると、ドキュメントツールバーのワークスペース切り替えコントロールに表示されます。

カスタムワークスペースを削除するには：

アプリケーションバーのワークスペース切り替えコントロールから「ワークスペースの管理」を選択し、ワークスペースの管理ダイアログボックスを開きます。ワークスペースを選択して「削除」をクリックします。

ワークスペースの表示を切り替えるには：

ドキュメントツールバーのワークスペース切り替えコントロールから、ワークスペースを選択します。

マルチユーザーシステムでの Dreamweaver のカスタマイズ

Windows XP や Mac OS X などのマルチユーザーオペレーティングシステムであっても、ユーザーのニーズに合わせて Dreamweaver をカスタマイズすることができます。

Dreamweaver では、あるユーザーがカスタマイズした設定と、他のユーザーがカスタマイズした設定とが、互いに影響し合うことはありません。これは、マルチユーザーオペレーティングシステムで、ユーザーが初めて Dreamweaver を実行したときに、そのユーザー用の様々な設定ファイルのコピーが作成されるためです。これらのユーザー設定ファイルは、ユーザーのフォルダーに保存されます。

Dreamweaver を再インストールまたはアップグレードするときは、Dreamweaver によって既存のユーザー設定ファイルのバックアップコピーが自動的に作成されます。このため、手動でこれらのファイルをカスタマイズしていた場合でも、以前の変更内容を利用できます。

タブ付きドキュメントの表示（Mac のみ）

1 つのドキュメントウィンドウに複数のドキュメントを表示でき、各ドキュメントを示すタブが表示されます。フローティングワークスペースの一部として表示することもでき、このとき、ドキュメントはそれぞれ別のウィンドウに表示されます。

タブ付きドキュメントを別のウィンドウで開く

Control キーを押しながらタブをクリックし、コンテキストメニューから「新規ウィンドウに移動」を選択します。

タブ付きドキュメントの初期設定の変更

1. Dreamweaver／環境設定を選択し、「一般」カテゴリーを選択します。
2. 「タブを使用してドキュメントを開く」をオンまたはオフにし、「OK」をクリックします。

Dreamweaver では、環境設定を変更しても、現在開いているドキュメントの表示は変更されません。ただし、新しい環境設定を選択した後に開いたドキュメントは、選択した環境設定に従って表示されます。

Dreamweaver の起動時、および何もドキュメントが開いていないときは、ようこそ画面が表示されます。ようこそ画面を非表示にするように選択しておき、後で表示することも可能です。ようこそ画面を非表示にすると、開いているドキュメントがない場合にはドキュメントウィンドウは空白になります。

Dreamweaver でよく使用されるパネル

Dreamweaver では、多数のパネルを操作します。ここでは、よく使用されるパネルをいくつか説明します。

挿入パネルの概要

挿入パネル（ウィンドウ／挿入）には、テーブル、イメージ、リンクなどのオブジェクトを作成し、挿入するためのボタンがあります。ボタンはカテゴリー別に分けられ、上部のドロップダウンリストから必要なカテゴリーを選択して切り替えることができます。

一部のカテゴリーには、ポップアップメニューを表示するボタンが含まれています。ポップアップメニューからオプションを選択すると、そのオプションが当該ボタンのデフォルトのアクションになります。例えば、「文字」ボタンのポップアップメニューから「改行」を選択した場合、次回「文字」ボタンをクリックすると、改行が挿入されます。ポップアップメニューから新しいオプションを選択すると、そのボタンのデフォルトのアクションをいつでも変更できます。

挿入パネルは、次のカテゴリーに分かれています。

div タグ、イメージやテーブルといったオブジェクトなど、頻繁に使用される HTML エレメントを作成および挿入できます。

フォームを作成するためのボタンと、検索、月、パスワードなどのフォームエレメントを挿入するためのボタンがあります。

ドキュメントをテンプレートとして保存し、特定の領域を編集可能領域、オプション領域、リピート領域、編集可能オプション領域としてマークできます。

レスポンシブなプロジェクトで使用できるナビゲーションやコンテナ、ドロップダウンなどを提供するために、Bootstrap のコンポーネントが含まれます。

jQuery Mobile を使用するサイトを作成するためのボタンがあります。

アコーディオン、スライダー、ボタンなどの jQuery UI エレメントを挿入できます。

挿入パネルの最もよく使用するボタンをグループ化して整理することができます。

オブジェクトの挿入

挿入パネルを使用してオブジェクトを挿入するには：

挿入パネルの環境設定の編集

挿入パネルの「お気に入り」カテゴリーでの項目の追加、削除、または管理

ファイルパネルの概要

ファイルパネルでは、作成している Dreamweaver サイトのファイルの表示と管理を行います。

ファイルパネルでは、ファイルやフォルダーの表示、Dreamweaver サイトに関連しているかどうかの確認、ファイルを開く、移動するなどの一般的なファイル管理作業ができます。

また、ファイルパネルでは、ファイルの管理やリモートサーバーとのファイルのやり取りもできます。

ファイルパネルで可能なすべての操作について詳しくは、ファイルとフォルダーの管理を参照してください。

CSS デザイナー

CSS デザイナーパネル（Windows／CSS デザイナー）は、CSS スタイル、ファイル、設定済みプロパティ、メディアクエリーを「視覚的」に作成できる CSS プロパティインスペクターです。

CSS デザイナーで実行するすべての操作は、取り消したり（Ctrl/Command+Z）、やり直す（Ctrl/Command+Y）ことができます。ライブビューの変更は自動的に反映され、関連する CSS ファイルも更新されます。関連ファイルが変更されたことを知らせるために、影響を受けるファイルのタブがしばらくの間、強調表示されます（約 8 秒）。

CSS デザイナーパネルは、次のペインとオプションで構成されています。

すべて：現在のドキュメントに関連付けられたすべての CSS、メディアクエリー、セレクターを一覧表示します。必要な CSS ルールをフィルター処理したり、プロパティを変更したりすることができます。このモードを使用して、セレクターまたはメディアクエリーの作成を開始することもできます。

このモードは、選択内容とは無関係です。つまり、ページでセレクターを選択しても、関連するセレクター、メディアクエリー、CSS は CSS デザイナーでハイライト表示されません。

現在：現在のドキュメントの、デザインまたはライブビューで選択したすべてのエレメントの計算されたスタイルを一覧表示します。このモードをコードビュー内の CSS ファイルで使用すると、フォーカスされたセレクターのすべてのプロパティが表示されます。

このモードは状況依存型です。このモードを使用して、ドキュメントで選択したエレメントに関連付けられたセレクターのプロパティを編集できます。

ソース：ドキュメントに関連付けられているすべての CSS スタイルシートが一覧表示されます。このペインを使用して、CSS を作成してドキュメントに添付したり、ドキュメント内でスタイルを定義したりできます。

@Media：ソースペインで選択したソースのすべてのメディアクエリーが一覧表示されます。特定の CSS を選択しない場合は、ドキュメントに関連付けられているすべてのメディアクエリーが表示されます。

セレクター：ソースペインで選択したソースのすべてのセレクターが一覧表示されます。メディアクエリーも選択した場合は、そのメディアクエリーのセレクターだけが一覧表示されます。CSS もメディアクエリーも選択しない場合は、ドキュメントのすべてのセレクターが表示されます。

@Media ペインで「グローバル」を選択すると、選択されたソースのメディアクエリーに含まれていないすべてのセレクターが表示されます。

プロパティ：指定したセレクターに設定できるプロパティが表示されます。詳しくは、設定済みプロパティを参照してください。

CSS デザイナーでペインを折りたたむまたは展開した場合、ペインのサイズがセッションで記憶されます。サイズを再度変更するまで、ソースおよびメディアペインのカスタマイズされたサイズが維持されます。

注意：ページエレメントを選択すると、最も適したセレクターがセレクターペインで選択されます。特定のセレクターのプロパティを表示するには、ペイン内のセレクターの名前をクリックします。

すべてのセレクターを表示するには、ソースペインで「すべてのソース」を選択します。選択されたソースのどのメディアクエリーにも属さないセレクターを表示するには、@Media ペインの「グローバル」をクリックします。

ビジュアルガイドの概要

Dreamweaver は、ドキュメントをデザインするために、またドキュメントがブラウザーでどのように表示されるか予測するために使用可能な、数種類のビジュアルガイドを備えています。次の操作が可能です。

• ドキュメントウィンドウを必要なウィンドウサイズにすばやく吸着させ、エレメントがページにどのように収まるか確認します。

• トレーシングイメージをページの背景として使用すると、Adobe® Photoshop® や Adobe® Fireworks® などのイラストレーションまたはイメージの編集アプリケーションで作成されたデザインを簡単に複製できます。

• ルーラーとガイドを使用すると、ページエレメントの正確な配置とサイズ変更のための視覚的な手がかりが表示されます。

• グリッドを使用して、絶対位置のエレメント（AP エレメント）の配置とサイズ変更を正確に行います。

  ページ上にグリッドが表示されていると、AP エレメントを整列しやすくなります。また、吸着が有効の場合に AP エレメントを移動またはサイズ変更すると、AP エレメントが最も近いグリッドポイントに自動的に吸着します（イメージや段落など、その他のオブジェクトはグリッドに吸着しません）。吸着は、グリッドが表示されているかどうかにかかわらず機能します。

ページのズームインとズームアウト

Dreamweaver では、ドキュメントウィンドウで表示倍率（ズームイン）を拡大することにより、グラフィックのピクセルの正確さの確認、小さい項目のより簡単な選択、小さいテキストを使用したページのデザイン、大きいページのデザインなどをおこなうことができます。

ページをズームインまたはズームアウトするには、表示／デザインビューのオプション／倍率を選択した後、使用可能な倍率オプションを選択します。

様々な倍率オプションから選択できます。また、次を選択することもできます。

• 選択オブジェクト - オブジェクトまたはテキストを選択して、このオプションを選択すると、ドキュメントウィンドウにこの選択内容が反映されます。
• ドキュメント全体 - ドキュメントウィンドウにページ全体を拡大表示します。
• 幅を合わせる - ドキュメントウィンドウにページ幅全体を拡大表示します。

Dreamweaver の一般環境設定の設定

Dreamweaver のドキュメントに対するフォント環境設定

ドキュメントのエンコードによって、ドキュメントがブラウザーにどのように表示されるかが決まります。Dreamweaver のフォントの環境設定を使用すると、指定したエンコード方法で特定のフォントおよびサイズを使用した場合の表示を確認できます。ただし、フォントの環境設定ダイアログボックスで選択したフォントは、Dreamweaver でのフォントの表示方法に影響するだけで、ユーザーのブラウザーでドキュメントを表示する方法には影響しません。ブラウザーでのフォントの表示方法を変更するには、プロパティインスペクターを使用するか、CSS 規則を適用してテキストを変更する必要があります。

新規ドキュメントの初期設定のエンコードを指定する方法について詳しくは、ドキュメントを作成して開くを参照してください。

Dreamweaver のハイライトカラーのカスタマイズ

「ハイライト」環境設定では、テンプレートの領域、ライブラリ項目、サードパーティタグ、レイアウトエレメント、およびコードの識別用に Dreamweaver で使用されるカラーをカスタマイズできます。