Dreamweaver ワークスペース、ユーザーが使用できる各種のビューとワークスペース、および Dreamweaver の様々なパネルとツールバーについて説明します。

オンボード Dreamweaver

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

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

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

注意:

上記のワークスペース環境設定は、後で編集/環境設定ダイアログを使用して、いつでも変更できます。

スタート画面の操作

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

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

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

Dreamweaver のスタートワークスペース
Dreamweaver のスタートワークスペース

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

最近使用したファイル

最近使用したファイルのリストから、最近開いたファイルを開きます。

CC ファイル

CC ライブラリクラウドにある最近開いたファイルを開きます。

クイックスタート

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

スターターテンプレート

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

この画面上に「Work(作業)」タブと「Learn(ラーニング)」タブが表示されます。「Work(作業)」タブをクリックすると、作業した最近使用したファイルにアクセスできます。最近使用したファイルがない場合は、このタブは空になります。

「Learn(ラーニング)」タブをクリックすると、この画面から Dreamweaver チュートリアルにすばやくアクセスできます。

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

注意:

このスタート画面が有効になっており、デフォルトで開きます。

このスタート画面が不要の場合は、環境設定/一般ダイアログボックスで「起動画面を表示」をオフにします。

Dreamweaver でドキュメントを作成したり、開いたりする方法については、ファイルの作成およびオープンを参照してください。

ワークスペースの概要

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

Dreamweaver ワークスペース(CC)
Dreamweaver ワークスペース

A. アプリケーションバー B. ドキュメントツールバー C. ドキュメントウィンドウ D. ワークスペース切り替えコントロール E. パネル F. コードビュー G. ステータスバー H. タグセレクター I. ライブビュー J. ツールバー 

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

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

アプリケーションバー

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

ドキュメントツールバー

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

標準ツールバー

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

ツールバー

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

ドキュメントウィンドウ

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

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

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

タグセレクター

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

パネル

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

Extract パネル

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

挿入パネル

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

ファイルパネル

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

スニペットパネル

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

CSS デザイナーパネル

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

注意:

Dreamweaver には、他にも多くのパネル、インスペクター、およびウィンドウがあります。ウィンドウ、インスペクター、およびパネルを開くには、ウィンドウメニューを使用します。

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

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

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

ライブビュー

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

デザインビュー

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

コードビュー

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

コード - コード

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

コード - ライブ

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

コード - デザイン

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

ライブコード

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

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

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

表示の切り替え

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ドキュメントのサイズ変更オプション
ドキュメントのサイズ変更オプション

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

注意:

大まかにサイズを変更する場合は、ウィンドウの右下隅をドラッグするなど、オペレーティングシステムの標準の方法でウィンドウのサイズを変更します。

注意:

(Windows のみ)ドキュメントウィンドウ内のドキュメントは初期設定で最大化表示されます。最大化されているドキュメントのサイズ変更はできません。最大化表示を解除するには、ドキュメントの右上隅にある最大化解除ボタンをクリックします。

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

  1. ウィンドウサイズポップアップメニューの「サイズの編集」を選択します。

  2. ウィンドウサイズリストで幅または高さの値をクリックし、新しい値を入力します。ドキュメントウィンドウの幅のみを調整するには(高さは未変更のまま)、高さの値を選択して削除します。

  3. 「詳細」ボックスをクリックし、サイズに関する説明を入力します。

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

  1. ウィンドウサイズポップアップメニューの「サイズの編集」を選択します。

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

  2. 「幅」列の最終値の下の空白をクリックします。

  3. 「幅」と「高さ」の値を入力します。

    「幅」または「高さ」のいずれか一方を設定するには、一方のフィールドを空白にしておきます。

  4. 「詳細」フィールドをクリックし、追加したサイズに関する説明を入力します。

    例えば、「SVGA」または「通常の PC」という説明を 800 x 600 ピクセルモニターのエントリの隣に入力し、「17 インチ Mac」という説明を 832 x 624 ピクセルモニターのエントリの隣に入力します。ほとんどのモニターは、ピクセル単位で調整することができます。

  5. 「適用」をクリックして、ダイアログボックスを閉じます。

    新しいウィンドウサイズがウィンドウサイズポップアップメニューで使用できるようになりました。

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

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

ドキュメントツールバー(CC)
ドキュメントツールバー

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

コードビュー

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

分割ビュー

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

ライブビュー

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

デザインビュー

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

標準ツールバーの概要

標準ツールバー

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

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

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

ブラウザーナビゲーションツールバー(CC)
ブラウザーナビゲーションツールバー

A. ブラウザーコントロール B. アドレスボックス 

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

ツールバーの概要

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

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

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

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

  1. ツールバーの  をクリックし、ツールバーをカスタマイズダイアログボックスを開きます。

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

  2. 必要に応じてツールバーのメニューオプションを選択または選択解除し、「終了」をクリックしてツールバーを保存します。

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

ステータスバーの概要

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

ステータスバー(CC)
ステータスバー

A. タグセレクター B. 出力パネル C. コードの色付け D. 挿入と上書きを切り替える E. 行番号と列番号 

タグセレクター

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

出力パネル

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

コードの色付け

(コードビューでのみ使用可能)

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

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

(コードビューでのみ使用可能)

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

行番号と列番号

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

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

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

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

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

プロパティインスペクター(CC)
プロパティインスペクター

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

注意:

特定のタグのプロパティに関連するすべての属性を表示および編集するには、タグインスペクターを使用します。

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

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

  1. ドキュメントウィンドウ内のページエレメントを選択します。

    必要な場合は、プロパティインスペクターを展開して、選択したエレメントのすべてのプロパティを表示します。

  2. プロパティインスペクターで、目的のプロパティを変更します。

    注意:

    特定のプロパティの情報については、ドキュメントウィンドウでエレメントを選択し、プロパティインスペクターの右上隅にあるヘルプアイコンをクリックします。

  3. 変更がドキュメントウィンドウでただちに適用されない場合は、以下のいずれかの方法で変更を適用します。

    • プロパティを編集しているテキストフィールドの外側をクリックします。
    • Enter キー(Windows)または Return キー(Mac OS)を押します。
    • Tab キーを押して別のプロパティに切り替えます。

コンテキストメニュー

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

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

Dreamweaver のパネルの再配置

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

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

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

パネルの移動

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

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

注意:

移動中のパネルがドッキングされないようにするには、移動中に Ctrl キー(Windows)または Command キー(Mac OS)を押します。操作を途中でキャンセルするには、Esc キーを押します。

パネルの追加と削除

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

  • パネルを削除するには、パネルのタブを右クリック(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 では、多数のパネルを操作します。ここでは、よく使用されるパネルをいくつか説明します。

挿入パネルの概要

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

挿入パネル
挿入パネル

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

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

HTML

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

フォーム

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

テンプレート

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

Bootstrap のコンポーネント

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

jQuery Mobile

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

jQuery の UI

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

お気に入り

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

注意:

XML、JavaScript、Java、CSS などの特定のタイプのファイルで作業している場合、挿入パネルとデザインビューのオプションは淡色表示になっています。これは、これらのコードファイルには項目を挿入できないためです。

オブジェクトの挿入

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

  1. 挿入パネルのカテゴリーポップアップメニューから、該当するカテゴリーを選択します。

  2. 次のいずれかの操作を実行します。

    • オブジェクトボタンをクリックするか、ドキュメントウィンドウ(デザイン、ライブ、またはコードビュー)にボタンのアイコンをドラッグします。

    • ボタンの矢印をクリックし、メニューからオプションを選択します。

      オブジェクトによっては、対応するオブジェクト挿入ダイアログボックスが表示され、ファイルの参照、またはオブジェクトのパラメーターの指定を求めるメッセージが表示されます。あるいは、Dreamweaver によってコードがドキュメントに挿入されることや、コードの挿入前に情報を指定するようにタグエディターまたはパネルが表示されることもあります。

      オブジェクトによっては、デザインビューでオブジェクトを挿入した場合にダイアログボックスが表示されなくても、コードビューでオブジェクトを挿入した場合にはタグエディターが表示されることがあります。いくつかのオブジェクトでは、デザインビューにオブジェクトを挿入すると、オブジェクトを挿入する前に Dreamweaver がコードビューに切り替わります。

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

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。

  2. 環境設定ダイアログボックスの「一般」カテゴリーで、イメージ、テーブル、スクリプト、およびヘッドエレメントなどのオブジェクトを挿入するときにダイアログボックスが表示されないようにするには、「オブジェクト挿入中にダイアログを表示」をオフにするか、または Ctrl キー(Windows)または Option キー(Mac OS)を押したままオブジェクトを作成します。

注意:

このオプションをオフにしてオブジェクトを挿入すると、オブジェクトに初期設定の属性値が与えられます。オブジェクトの挿入後に、オブジェクトのプロパティを変更するには、プロパティインスペクターを使用します。

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

  1. 挿入パネル内の任意のカテゴリーを選択します。

  2. ボタンが表示される領域を右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、「お気に入りのカスタマイズ」を選択します。

  3. お気に入りオブジェクトのカスタマイズダイアログボックスで、必要に応じた変更を加え、「OK」をクリックします。

    オブジェクトを追加するには、左側の使用可能なオブジェクトペインでオブジェクトを選択して 2 つのペイン間の矢印をクリックするか、使用可能なオブジェクトペインのオブジェクトをダブルクリックします。

    挿入パネルのお気に入りのカスタマイズ
    挿入パネルのお気に入りのカスタマイズ

    注意:

    1 回の操作で 1 つのオブジェクトを追加できます。「一般」などのカテゴリー名を選択して、カテゴリー全体をお気に入りリストに追加することはできません。

    • オブジェクトまたは区切りを削除するには、右側のお気に入りオブジェクトペインでオブジェクトを選択し、ペインの上にある「お気に入りオブジェクトリストから選択したオブジェクトを削除します」ボタンをクリックします。
    • オブジェクトを移動するには、右側のお気に入りオブジェクトペインのオブジェクトを選択し、ペインの上にある上矢印または下矢印ボタンをクリックします。
    • オブジェクトの下に区切りを追加するには、右側のお気に入りオブジェクトペインのオブジェクトを選択し、ペインの下にある「区切りを追加」ボタンをクリックします。
  4. 挿入パネルの現在のカテゴリーが「お気に入り」ではない場合は、「お気に入り」カテゴリーを選択して変更を確認します。

ファイルパネルの概要

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

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

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

ファイルパネル
ファイルパネル

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

CSS デザイナー

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

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

CSS デザイナーパネル(CC)
CSS デザイナーパネル

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

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

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

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

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

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

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

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

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

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

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

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

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

ビジュアルガイドの概要

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

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

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

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

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

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

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

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

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

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

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

注意:

ズームツールを使用せずにズームインするには、Ctrl+=(Windows)または Command+=(Mac OS)を押します。ズームツールを使用せずにズームアウトするには、Ctrl+-(Windows)または Command+-(Mac OS)を押します。

Dreamweaver の一般環境設定の設定

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。

  2. 次のいずれかのオプションを設定します。

    タブを使用してドキュメントを開く:ドキュメント間を切り替えることができるタブを使用して、単一のウィンドウ内ですべてのドキュメントを開きます(Mac のみ)。

    起動画面を表示:ようこそ画面を表示します。Dreamweaver の起動時、または何もドキュメントが開いていないときに表示されます。

    起動時にドキュメントを開く:Dreamweaver を閉じるときに開いていたドキュメントを開きます。このオプションがオフの場合、Dreamweaver を起動すると、「「ようこそ」画面を表示」の設定に応じて、ようこそ画面と空白画面のいずれかが表示されます。

    読み取り専用ファイルを開く際に警告する:(ロックされている)読み取り専用ファイルを開いたときに、警告が表示されます。ファイルのロック解除およびチェックアウト、ファイルの表示、またはキャンセルから選択できます。

    関連するファイルを有効にする:現在のドキュメントに関連するファイル(CSS ファイルや JavaScript ファイルなど)を表示できます。Dreamweaver では、ドキュメントの上部に関連するファイルごとのボタンが表示され、このボタンをクリックしてファイルを開くことができます。

    動的関連ファイルの検索:動的関連ファイルを関連ファイルツールバーに自動的に表示するか、または手動操作の後で表示するかを選択できます。動的関連ファイルの検索を無効にすることもできます。

    ファイルを移動するときにリンクを更新する:サイト内でドキュメントの移動、名前の変更、または削除をおこなった場合の動作を決定します。この環境設定は、常にリンクを自動更新する、リンクを更新しない、および更新の実行を確認するのいずれかに設定できます(リンクの自動更新を参照)。

    オブジェクト挿入中にダイアログを表示:挿入パネルまたは挿入メニューを使用してイメージ、テーブル、Shockwave ムービー、およびその他のオブジェクトを挿入するときに、Dreamweaver が追加情報の入力を求めるかどうかを決定します。このオプションをオフにするとダイアログボックスが表示されず、プロパティインスペクターを使用してイメージのソースファイル、テーブルの行数などを指定する必要があります。ロールオーバーイメージおよび Fireworks HTML の場合は、このオプションの設定にかかわらず、オブジェクトを挿入するときに必ずダイアログボックスが表示されます。この設定を一時的に無効にするには、オブジェクトの作成および挿入時に Ctrl キー(Windows)または Command キー(Mac OS)を押しながらクリックします。

    ダブルバイトのインライン入力可:日本語の文字など、ダブルバイトのテキストを使う開発環境や言語キットを使用している場合、ドキュメントウィンドウに直接ダブルバイトのテキストを入力できるようにします。このオプションを無効にすると、ダブルバイトテキストの入力と変換をおこなうテキストの入力ウィンドウが表示されます。テキストが確定されると、ドキュメントウィンドウに表示されます。

    見出しの次の段落を標準スタイルに戻す:デザインビューまたはライブビューの見出し段落の終わりで Enter キー(Windows)または Return キー(Mac OS)を押したときに、p タグが付いた新しい段落が作成されます。(見出し段落とは、h1 や h2 などの見出しタグが付いている段落です)。オプションが無効になっている場合、見出し段落の終わりで Enter キーまたは Return キーを押すと、同じ見出しタグが付いている新しい段落が作成されます。続けて複数の見出しを入力し、戻って詳細を入力することもできます。

    連続するスペースを入力可能にする:デザインビューまたはライブビュー内で 2 つ以上のスペースを入力すると、区切りなしスペースが作成され、ブラウザー内に複数のスペースとして表示されます(例えば、タイプライターのように、行間をダブルスペースにすることができます)。このオプションは、ワードプロセッサーでの入力に慣れている人向けに用意されています。このオプションが無効になっている場合、複数のスペースは単一のスペースとして扱われます。これは、ブラウザーでは複数のスペースが 1 つのスペースとして扱われるためです。

    <b> と <i> の代わりに <strong> および <em> を使用:Dreamweaver によって、strong タグが、通常は b タグが適用される操作をおこなったときに適用されます。また、em タグも、通常は i タグが適用される操作をおこなったときに適用されます。例えば、HTML モードのテキストのプロパティインスペクターで、ボールドやイタリックのボタンをクリックしたときや、フォーマット/スタイル/ボールドまたはフォーマット/スタイル/イタリックを選択したときなどに、この処理がおこなわれます。b および i タグを使用する場合は、このオプションをオフにします。

    注意:World Wide Web Consortium は、b および i タグの使用を推奨していません。これは、strong および em タグは、b および i よりも詳細な意味情報を提供するためです。

    <p> または <h1> ~ <h6> タグ内に編集可能領域を配置する際に警告する:段落タグや見出しタグに編集可能領域がある Dreamweaver テンプレートを保存したときに、警告メッセージを表示するかどうかを指定します。このメッセージにより、その編集可能領域でそれ以上段落を作成できないことがわかります。初期設定では有効になっています。

    アクションの取り消しをアクティブなドキュメントまでに制限する:取り消し操作を編集中の現在のファイルに限定します。例えば、CSS ファイルを編集中の場合、CSS ファイルに対してのみ行われた変更を取り消すことができます。

    ただし、このチェックボックスをオフにした場合、HTML ソースと関連するすべての CSS ファイルは単一の取り消しヒストリーを利用するため、HTML コードを使用しているかどうか、また関連する CSS ファイルで作業しているかどうかに関係なく、操作を取り消すことができます。

    ヒストリーステップの最大数:Dreamweaver で記憶されるステップ数を設定します(初期設定値は、ほとんどのユーザーに適した設定である必要があります)。設定されている数を超えると、最も古いステップから消去されます。

    スペル辞書:使用可能なスペル辞書の一覧が表示されます。辞書に複数の方言やスペル規則(米語や英語など)がある場合は、スペル辞書ポップアップメニューに方言がそれぞれ表示されます。

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

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

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

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac)を選択します。

  2. 左のカテゴリーリストで「フォント」を選択します。

  3. フォント設定リストからエンコードの種類(「西ヨーロッパ言語」や「日本語」など)を選択します。

    注意:

    アジア言語を表示するには、ダブルバイトのフォントをサポートしているオペレーティングシステムを使用している必要があります。

  4. 選択したエンコードの各カテゴリーに使用するフォントとサイズを選択します。

    注意:

    コンピューターにインストールされていないフォントは、フォントポップアップメニューに表示されません。例えば、日本語のテキストを表示するには、日本語フォントがインストールされている必要があります。

    プロポーショナルフォント

    Dreamweaver が通常のテキスト(例えば、段落、見出し、およびテーブルのテキスト)の表示に使用するフォントです。初期設定は、システムにインストールされているフォントによって異なります。ほとんどの英語(U.S.)のシステムでは、Windows には「Times New Roman 12 pt (Medium)」、Mac OS には「Times 12 pt」が 初期設定されています。

    等幅フォント

    Dreamweaver が pre、code、および tt タグ内のテキストを表示するために使用するフォントです。初期設定は、システムにインストールされているフォントによって異なります。ほとんどの英語(U.S.)のシステムでは、Windows には「Courier New 10 pt (Small)」、Mac OS には「Monaco 12 pt」が 初期設定されています。日本語のシステムでは、Windows には「MS ゴシック 10pt(小)」、Mac OS には「Osaka-等幅 9pt(小)」が初期設定されています。

    コードビュー

    コードビューとコードインスペクターに表示されるすべてのテキストに使用されるフォントです。初期設定は、システムにインストールされているフォントによって異なります。

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

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

  1. 編集/環境設定を選択し、「ハイライト」カテゴリーを選択します。

  2. ハイライトカラーを変更するオブジェクトの横にあるカラーボックスをクリックし、カラーピッカーを使用して新しいカラーを選択するか、カラーの 16 進数値を入力します。

  3. 特定のオプションのハイライト表示を有効または無効にするには、「表示」オプションを選択または選択解除します。

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

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