Dreamweaver ワークスペース

オンボード Dreamweaver

Dreamweaverをインストールした後、アプリケーションを初めて起動すると、QuickStartメニューが画面に表示され、ニーズに応じてDreamweaver Workspaceをパーソナライズするのに役立つ3つの質問が表示されます。

これらの質問への回答に基づいて、DreamweaverはDeveloper workspace（最小限のコード重視のレイアウト）またはStandard workspace（ビジュアルツールとコーディング時のアプリ内プレビューが分かれたレイアウト）で開きます。 

ワークスペースを選択した後、使いやすいカラーテーマを選択します。 そこから開始できます。

改善されたホーム画面

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、およびその他あらゆる種類のコードを記述および編集するための手書きコーディング環境です。

Codeビューの分割バージョンで、ドキュメントの異なるセクションで同時に作業するためにスクロールできます。 

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

同一ドキュメントのCodeビューとDesignビューの両方を単一ウィンドウで表示します。

ブラウザーがページの実行に使用する実際のコードを表示し、Liveビューでページを操作すると動的に変更されます。

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

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

表示の切り替え

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

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

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

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

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

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

ドキュメントウィンドウをタイル表示するには：

• （Windows）ウィンドウ／整列／上下にタイル表示または左右にタイル表示を選択します。
• （Macintosh）ウィンドウ／整列／タイル表示を選択します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

webブラウザーでユーザーが表示する際のドキュメントの表現を表示します。 

標準ツールバーの概要

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

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

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

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

ツールバーの概要

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

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

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

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

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

ステータスバーの概要

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

タグセレクター

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

出力パネル

このアイコンをクリックすると、ドキュメント内のコーディングエラーを表示するアウトプットパネルが表示されます。

コードの色付け

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

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

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

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

コードビューで作業中に、挿入モードと上書きモードを切り替えることができます。

行番号と列番号

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

カーソルが配置されている行番号と列番号を表示します。

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

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

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

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

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

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

コンテキストメニュー

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

コンテキストメニューを開くには、コードビューのコードセクションを右クリック（Windows）またはCtrl+クリック（Mac）するか、LiveビューまたはDesignビューのオブジェクトをクリックします。

Dreamweaver のパネルの再配置

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

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

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

パネルの移動

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

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

パネルの追加と削除

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

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

パネルグループの操作

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

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

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

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

パネルのサイズ変更

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

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

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

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

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

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

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

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

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

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

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

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

ワークスペースの表示と切り替え

Document ツールバーの Workspace スイッチャーから Workspace を選択してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

Dreamweaver では、多数のパネルを操作します。 一般的に使用されるパネルの一部について説明します。

挿入パネルの概要

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

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

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

div タグや画像、テーブルなどのオブジェクトなど、最も一般的に使用される HTML 要素を作成して挿入できます。

フォームを作成し、検索、月、パスワードなどのフォーム要素を挿入するためのボタンが含まれています。

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

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

jQuery Mobile を使用するサイトを作成するためのボタンが含まれています。

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

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

オブジェクトの挿入

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

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

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

ファイルパネルの概要

Filesパネルを使用して、Dreamweaverサイトのファイルを表示および管理します。

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

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

Files パネルでできることすべての詳細については、ファイルとフォルダーの管理 を参照してください。

CSS Designer

CSS Designer パネル（Windows > CSS Designer）は、メディアクエリと併せて CSS スタイル、ファイル、プロパティの設定を「視覚的に」作成できる CSS Property Inspector です。

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

CSS Designer パネルは、次のペインとオプションで構成されています：

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

このモードは、選択内容とは無関係です。 これは、ページ上で要素を選択しても、関連するセレクター、メディアクエリ、または CSS が CSS Designer でハイライト表示されないことを意味します。

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

このモードは状況依存型です。 このオプションを使用して、ドキュメント内で選択された要素に関連するセレクターのプロパティを編集します。

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

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

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

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

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

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

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

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

ビジュアルガイドの概要

Dreamweaver にはさまざまな種類のビジュアルガイドが用意されており、ドキュメントをデザインし、ブラウザーでの表示を予測するのに役立ちます。次のいずれかを実行できます。

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

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

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

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

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

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

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

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

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

• 選択範囲に合わせる - オブジェクトまたはテキストを選択し、このオプションを選択してドキュメントウィンドウを選択範囲で埋めます。
• すべてに合わせる - ドキュメントウィンドウにページ全体を表示します
• 幅に合わせる - ドキュメントウィンドウにページの幅全体を表示します

Dreamweaver の一般環境設定の設定

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

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

新規ドキュメントのデフォルトエンコーディングの設定については、ドキュメントの作成と開くを参照してください。

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

強調表示設定を使用して、Dreamweaverでテンプレート領域、ライブラリ項目、サードパーティタグ、レイアウト要素、およびコードを識別する色をカスタマイズします。

その他の関連ヘルプ

• 関連ファイルを開く
• Dreamweaver でのコーディングに関する一般情報
• コーディングの環境設定
• ヘッドコンテンツの表示と編集
• レイアウト用ビジュアルエイドの使用
• ページのプレビュー
• ファイルパネルでのファイルの操作