マニュアルキャンセル

レイアウト用ビジュアルエイドの使用

検索

最終更新日 : 2021年4月28日

Dreamweaver

アプリを開く

Dreamweaver では、ルーターの設定、レイアウトガイドの設定、テンプレートでのガイドの使用、レイアウトグリッドの使用、トレーシングイメージの使用など、レイアウト用ビジュアルエイドを使用します。

ルーラーの設定

ルーラーは、レイアウトの測定、整理、および計画に役立ちます。ルーラーは、ページの左および上のボーダー上に、ピクセル、インチ、またはセンチ単位で表示できます。

ルーラーのオンとオフを切り替えるには、表示／デザインビューのオプション／ルーラー／表示／非表示を選択します。
原点を変更するには、ドキュメントウィンドウのデザインビューの左上にあるルーラーの原点アイコンをページ上の任意の場所にドラッグします。
ルーラーを初期設定の位置にリセットするには、表示／デザインビューのオプション／ルーラー／初期設定に戻すを選択します。
測定単位を変更するには、表示／ルーラーを選択し、次に「ピクセル」、「インチ」、または「センチ」を選択します。

レイアウトガイドの設定

ガイドは、ルーラーからドキュメントにドラッグする線です。ガイドは、オブジェクトをより正確に配置および整列するために役立ちます。ガイドを使用してページエレメントのサイズを測定したり、Web ブラウザーの折り（表示可能領域）をエミュレートしたりすることもできます。

エレメントを整列するために、エレメントをガイドに吸着、またはガイドをエレメントに吸着することができます。吸着機能が動作するためには、エレメントが順に絶対位置指定されている必要があります。ガイドをロックして、他のユーザーが誤って移動しないようにすることもできます。

縦または横のガイドの作成

対応するルーラーからドラッグします。
ドキュメントウィンドウ内にガイドを配置し、マウスボタンを離します。ガイドを配置し直すには、ガイドを再度ドラッグします。

注意：

初期設定では、ガイドはドキュメントの上部または左側からの絶対ピクセル単位で記録され、ルーラーの原点に対して相対的に表示されます。ガイドを割合で記録するには、Shift キーを押しながらガイドを作成または移動します。

ガイドの表示と非表示の切り替え

表示／ガイド／ガイドを表示を選択します。

エレメントをガイドに吸着

エレメントをガイドに吸着するには、表示／デザインビューのオプション／ガイド／ガイドに吸着を選択します。
ガイドをエレメントに吸着するには、表示／デザインビューのオプション／ガイド／ガイドをエレメントに吸着を選択します。

注意：

絶対位置のエレメント（AP エレメント）、テーブル、イメージなどのエレメントのサイズを変更すると、サイズ変更されたエレメントはガイドに吸着します。

すべてのガイドをロックまたはロック解除

表示／デザインビューのオプション／ガイド／ガイドをロックを選択します。

ガイドの表示および特定の位置への移動

ガイド上にマウスポインターを置いて、ガイド位置を確認します。
ガイドをダブルクリックします。
ガイドの移動ダイアログボックスに新しい位置を入力し、「OK」をクリックします。

ガイド間の距離の表示

Ctrl キー（Windows）、または Command キー（Mac OS）を押しながら、2 つのガイド間の任意の部分の上にマウスポインターを置きます。

注意：

測定単位は、ルーラーに使用されている測定単位と同じです。

Web ブラウザーの折り（表示可能領域）のエミュレート

表示／デザインビューのオプション／ガイドを選択し、メニューから既存のブラウザーサイズを選択します。

ガイドの削除

ドキュメントから外にガイドをドラッグします。

ガイド設定の変更

表示／デザインビューのオプション／ガイド／ガイドの編集を選択し、以下のオプションを設定して「OK」をクリックします。

ガイドカラー

ガイドラインのカラーを指定します。色見本をクリックして、カラーピッカーからカラーを選択するか、テキストボックスに 16 進数値を入力します。

距離線の色

ガイド間にマウスポインターを置いたときに、距離のインジケーターとして表示されるラインのカラーを指定します。色見本をクリックして、カラーピッカーからカラーを選択するか、テキストボックスに 16 進数値を入力します。

ガイドを表示

デザインビューにガイドが表示されます。

ガイドに吸着

ページの周囲でページエレメントを動かすときに、ページエレメントがガイドに吸着されます。

ガイドのロック

ガイドが所定の位置にロックされます。

ガイドをエレメントに吸着

ガイドをドラッグするときに、ガイドがページ上のエレメントに吸着されます。

すべてクリア

ページからすべてのガイドがクリアされます。

テンプレートでのガイドの使用

Dreamweaver テンプレートにガイドを追加すると、テンプレートのすべてのインスタンスはガイドを継承します。ただし、テンプレートインスタンス内のガイドは編集可能領域として扱われるので、ガイドは変更できます。テンプレートインスタンスの変更されたガイドは、マスターテンプレートを使用してインスタンスが更新されると、元の場所に復元されます。

独自のガイドをテンプレートのインスタンスに追加できます。この方法で追加されたガイドは、マスターテンプレートを使用してテンプレートインスタンスが更新されたときに上書きされません。

レイアウトグリッドの使用

ドキュメントウィンドウでは、グリッドに縦と横の線からなるシステムが表示されます。これは、正確にオブジェクト配置するために役立ちます。絶対位置指定されたページエレメントを移動するときに自動的にグリッドに吸着させることができます。グリッド設定を指定して、グリッドを変更したり、吸着の動作を制御したりすることもできます。吸着は、グリッドが表示されているかどうかには関係なく機能します。

グリッドの表示と非表示の切り替え

表示／デザインビューのオプション／グリッドを表示を選択します。

吸着機能の有効と無効の切り替え

表示／デザインビューのオプション／グリッドに吸着を選択します。

グリッド設定の変更

表示／デザインビューのオプション／グリッド設定を選択します。
以下のオプションを選択し、「OK」をクリックして変更を適用します。

カラー

グリッドラインのカラーを指定します。色見本をクリックして、カラーピッカーからカラーを選択するか、テキストボックスに 16 進数値を入力します。

グリッドを表示

デザインビューにグリッドが表示されます。

グリッドに吸着

ページエレメントがグリッドのラインに吸着されます。

間隔

グリッドラインの間隔を制御します。数値を入力し、メニューから「ピクセル」、「インチ」、または「センチ」を選択してください。

表示

グリッドラインを実線または点線のどちらで表示するかを指定します。

注意：

「グリッドの表示」を選択していなければ、ドキュメント内にグリッドが表示されず、変更結果も感じられません。

トレーシングイメージの使用

トレーシングイメージをガイドとして使用すると、Adobe Freehand や Fireworks などのグラフィックアプリケーションで作成されたページデザインを再現できます。

トレーシングイメージとは、ドキュメントウィンドウの背景に配置されている JPEG、GIF、または PNG イメージのことです。トレーシングイメージは、非表示、透明度の設定、および位置の変更が可能です。

トレーシングイメージは Dreamweaver 内にのみ表示されます。ページをブラウザーで表示するときに、トレーシングイメージが表示されることはありません。トレーシングイメージが表示されているときは、ページの実際の背景イメージと背景色はドキュメントウィンドウには表示されません。ページがブラウザーで表示される場合は、背景イメージと背景色も表示されます。

ドキュメントウィンドウにトレーシングイメージを配置

次のいずれかの操作を実行します。
- 表示／デザインビューのオプション／トレーシングイメージ／読み込みを選択します。
- ファイル／ページプロパティを選択し、「トレーシングイメージ」カテゴリーで、「参照」をクリックします（「トレーシングイメージ」テキストボックスの横）。
イメージファイルに移動し、「OK」をクリックします。
ページプロパティダイアログボックスで、イメージの透明度スライダーをドラッグしてイメージの透明度を指定し、「OK」をクリックします。

別のトレーシングイメージに切り替える場合や、現在のトレーシングイメージの透明度を変更する場合は、ファイル／ページプロパティを選択します。

トレーシングイメージの表示と非表示の切り替え

表示／デザインビューのオプション／トレーシングイメージ／表示を選択します。

トレーシングイメージ位置の変更

表示／デザインビューのオプション／トレーシングイメージ／位置の調整を選択します。
- トレーシングイメージの位置を正確に指定するには、「X」テキストボックスと「Y」テキストボックスに、座標値を入力します。
- トレーシングイメージを 1 ピクセルずつ移動するには、矢印キーを使用します。
- トレーシングイメージを 5 ピクセルずつ移動するには、Shift キーと矢印キーを押します。

トレーシングイメージ位置のリセット

表示／デザインビューのオプション／トレーシングイメージ／位置のリセットを選択します。

トレーシングイメージが、ドキュメントウィンドウの左上隅（0,0）に戻ります。

トレーシングイメージを選択したエレメントに整列

ドキュメントウィンドウでエレメントを選択します。
表示／デザインビューのオプション／トレーシングイメージ／選択範囲にイメージを整列を選択します。

トレーシングイメージの左上隅が、選択したエレメントの左上隅に揃います。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る