対応するルーラーからドラッグします。
最終更新日 :
2021年4月27日
Dreamweaver では、ルーターの設定、レイアウトガイドの設定、テンプレートでのガイドの使用、レイアウトグリッドの使用、トレーシングイメージの使用など、レイアウト用ビジュアルエイドを使用します。
ルーラーの設定
定規は、測定、整理、レイアウトのプラン作成に役立ちます。ルーラーはページの左側と上端に表示することができ、ピクセル、インチ、またはセンチメートルで目盛りが付けられます。
- ルーラーのオンとオフを切り替えるには、表示／デザインビューのオプション／ルーラー／表示／非表示を選択します。
- 原点を変更するには、ドキュメントウィンドウのデザインビューの左上にあるルーラーの原点アイコン
をページ上の任意の場所にドラッグします。 - ルーラーを初期設定の位置にリセットするには、表示／デザインビューのオプション／ルーラー／初期設定に戻すを選択します。
- 測定単位を変更するには、表示／ルーラーを選択し、次に「ピクセル」、「インチ」、または「センチ」を選択します。
レイアウトガイドの設定
Guidesは、ルーラーからドキュメントにドラッグする線です。ガイドを使用すると、オブジェクトをより正確に配置および整列できます。また、Guidesを使用してページ要素のサイズを測定したり、Webブラウザーのfolds（表示エリア）をエミュレートしたりできます。
要素のアラインメントを支援するために、要素をGuidesにスナップしたり、Guidesを要素にスナップしたりできます。（スナップ機能を動作させるには、要素が絶対位置に配置されている必要があります。）また、Guidesをロックして、他のユーザーが誤って移動することを防ぐこともできます。
水平または垂直ガイドを作成
ドキュメントウィンドウでガイドを配置し、マウスボタンを離します（ガイドを再度ドラッグして位置を変更します）。
メモ
デフォルトでは、ガイドはドキュメントの上または左側からの絶対ピクセル測定値として記録され、ルーラーの原点を基準として表示されます。ガイドをパーセンテージとして記録するには、ガイドを作成または移動するときにShiftキーを押します。
ガイドの表示と非表示の切り替え
表示／ガイド／ガイドを表示を選択します。
エレメントをガイドに吸着
- エレメントをガイドに吸着するには、表示／デザインビューのオプション／ガイド／ガイドに吸着を選択します。
- ガイドをエレメントに吸着するには、表示／デザインビューのオプション／ガイド／ガイドをエレメントに吸着を選択します。
メモ
絶対位置のエレメント（AP エレメント）、テーブル、イメージなどのエレメントのサイズを変更すると、サイズ変更されたエレメントはガイドに吸着します。
すべてのガイドをロックまたはロック解除
表示／デザインビューのオプション／ガイド／ガイドをロックを選択します。
ガイドを表示して特定の位置に移動
マウスポインターをガイドの上に置くと、その位置が表示されます。
ガイドをダブルクリックします。
ガイドを移動ダイアログボックスで新しい位置を入力し、「OK」をクリックします。
ガイド間の距離の表示
Control（Windows）またはCommand（Macintosh）を押しながら、2つのガイドの間の任意の場所にマウスポインターを置きます。
メモ
測定単位は、ルーラーに使用されている測定単位と同じです。
webブラウザーのfold（表示エリア）をエミュレート
表示／デザインビューのオプション／ガイドを選択し、メニューから既存のブラウザーサイズを選択します。
ガイドの削除
ドキュメントから外にガイドをドラッグします。
ガイド設定の変更
表示／デザインビューのオプション／ガイド／ガイドの編集を選択し、以下のオプションを設定して「OK」をクリックします。
ガイドカラー
ガイドラインのカラーを指定します。 カラースウォッチをクリックして、カラーピッカーから色を選択するか、テキストボックスに16進数を入力します。
距離線の色
ガイド間でマウスポインターを置いたときに距離インジケーターとして表示される線の色を指定します。カラースウォッチをクリックして、カラーピッカーから色を選択するか、テキストボックスに16進数を入力します。
ガイドを表示
デザインビューにガイドが表示されます。
ガイドに吸着
ページ内で要素を移動するときに、ページ要素をガイドにスナップします。
ガイドのロック
ガイドが所定の位置にロックされます。
ガイドをエレメントに吸着
ガイドをドラッグするときに、ガイドがページ上のエレメントに吸着されます。
すべてクリア
ページからすべてのガイドがクリアされます。
テンプレートでのガイドの使用
ガイドがDreamweaverテンプレートに追加されると、テンプレートのすべてのインスタンスがガイドを継承します。テンプレートインスタンスのガイドは編集可能な地域として扱われるため、ユーザーが変更できます。テンプレートインスタンスで変更されたガイドは、インスタンスがマスターテンプレートで更新されるたびに元の位置に復元されます。
独自のガイドをテンプレートのインスタンスに追加できます。 この方法で追加されたガイドは、テンプレートインスタンスがマスターテンプレートで更新されても上書きされません。
レイアウトグリッドの使用
グリッドは、ドキュメントウィンドウに水平線と垂直線を表示します。オブジェクトを正確に配置するのに便利です。絶対配置されたページ要素を移動する際に自動的にグリッドにスナップさせることができ、グリッド設定を指定してグリッドを変更したりスナップ動作をコントロールしたりできます。スナップはグリッドが表示されているかどうかに関係なく機能します。
グリッドの表示と非表示の切り替え
表示／デザインビューのオプション／グリッドを表示を選択します。
吸着機能の有効と無効の切り替え
表示／デザインビューのオプション／グリッドに吸着を選択します。
グリッド設定の変更
表示／デザインビューのオプション／グリッド設定を選択します。
以下のオプションを選択し、「OK」をクリックして変更を適用します。
カラー
グリッドラインのカラーを指定します。 カラースウォッチをクリックしてカラーピッカーから色を選択するか、テキストボックスに16進数を入力してください。
グリッドを表示
デザインビューにグリッドが表示されます。
グリッドに吸着
ページエレメントがグリッドのラインに吸着されます。
間隔
グリッドラインの間隔を制御します。 数値を入力し、メニューからピクセル、インチ、またはセンチメートルを選択してください。
表示
グリッドラインを実線または点線のどちらで表示するかを指定します。
メモ
「グリッドを表示」が選択されていない場合、グリッドはドキュメントに表示されず、変更は表示されません。
トレーシングイメージの使用
トレーシングイメージは、Adobe FreehandやFireworksなどのグラフィックアプリケーションで作成されたページデザインを再作成するためのガイドとして使用できます。
トレーシングイメージは、ドキュメントウィンドウの背景に配置されるJPEG、GIF、またはPNG画像です。画像を非表示にしたり、不透明度を設定したり、位置を変更したりできます。
トレーシングイメージはDreamweaverでのみ表示され、ブラウザーでページを表示する際には表示されません。トレーシングイメージが表示されている場合、ページの実際の背景画像と色はドキュメントウィンドウでは表示されませんが、ページをブラウザーで表示すると背景画像と色が表示されます。
ドキュメントウィンドウにトレーシングイメージを配置する
次のいずれかの操作を実行します。
表示／デザインビューのオプション／トレーシングイメージ／読み込みを選択します。
ファイル／ページプロパティを選択し、「トレーシングイメージ」カテゴリーで、「参照」をクリックします（「トレーシングイメージ」テキストボックスの横）。
イメージファイルに移動し、「OK」をクリックします。
ページプロパティダイアログボックスで、画像透明度スライダーをドラッグして画像の透明度を指定し、OKをクリックしてください。
別のトレーシングイメージに切り替える場合や、現在のトレーシングイメージの透明度を変更する場合は、ファイル／ページプロパティを選択します。
トレーシングイメージの表示と非表示の切り替え
表示／デザインビューのオプション／トレーシングイメージ／表示を選択します。
トレーシングイメージの位置を変更
表示／デザインビューのオプション／トレーシングイメージ／位置の調整を選択します。
トレーシングイメージの位置を正確に指定するには、XとYテキストボックスに座標値を入力してください。
画像を1ピクセルずつ移動するには、矢印キーを使用してください。
画像を5ピクセルずつ移動するには、Shiftキーを押しながら矢印キーを押してください。
トレーシングイメージの位置をリセット
表示／デザインビューのオプション／トレーシングイメージ／位置のリセットを選択します。
トレーシングイメージはドキュメントウィンドウの左上角（0,0）に戻ります。
トレーシングイメージを選択した要素に合わせる
ドキュメントウィンドウで要素を選択してください。
表示／デザインビューのオプション／トレーシングイメージ／選択範囲にイメージを整列を選択します。
トレーシングイメージの左上角が選択した要素の左上角に合わせられます。
トレーシングイメージのプロパティを設定
トレーシングイメージ（ページのデザインでガイドとして使用する画像ファイル）のプロパティを設定します。
次のいずれかの操作を実行します。
- ファイル／ページプロパティをクリックします。
- ウィンドウ／プロパティをクリックし、テキストのプロパティインスペクターの「ページプロパティ」をクリックします。
ページプロパティダイアログボックスで、「トレーシングイメージ」を選択します。 このパネルから、次のオプションを設定できます。
- トレーシングイメージ：デザインをコピーするためのガイドとして使用する画像を指定します。このイメージは、リファレンス専用です。また、ドキュメントがブラウザーに表示されるときには表示されません。
- 透明度：トレーシングイメージの不透明度を、完全に透明から完全に不透明まで設定します。
