Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

 

レイヤーによるページデザイン
R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box
レイヤーを用いれば、異なるイメージを重ねるなど、レイアウトテーブル以上に自由にレイアウトをすることができます。ただし、ブラウザの種類によって微妙に表示位置がずれるため、ピクセル単位の精度が求められるような場合には向いていません。

■ レイヤーの描画

レイヤーとは、ドキュメント上に自由に配置できる透明な箱のようなもので、その内部にコンテンツを挿入してページレイアウトを行うことができます。
レイヤーを描画するには、【挿入】バーの【一般】タブから、【レイヤーを描く】ボタンをクリックし、ドキュメント上をドラッグします。サイズ、位置は後から自由に変更ができるので、おおよそのサイズのレイヤーを描画します。

■ レイヤー内へのコンテンツの配置

レイヤー内へは、テキスト・イメージ・その他WEBページに配置できるあらゆるコンテンツが挿入可能です。レイヤー内にカーソルを置いて、目的のコンテンツを挿入します。

■ レイヤーの移動・リサイズ

レイヤーを選択した状態で、レイヤー左上にある四角い選択ハンドルをドラッグすると、そのレイヤーをドキュメント上の好きな位置に移動することができます。
また、レイヤーの周囲に現れる枠の黒い点(サイズ変更ポイント)

をドラッグすると、レイヤーのサイズを自由に調節することができます。また、 サイズ変更ポイントが表示されている状態で、プロパティインスペクタに数値を入れて、詳細な設定をすることもできます。

■ レイヤーの重ね順

レイヤーは、自由に重ね合わせることができます。レイヤーの重なり順を表すのは、Zインデックスという値で、値が大きいほど前面に配置してあるということを意味しています。
通常、レイヤーは描いた順番にZインデックスが大きくなっていきますが、【レイヤー】パネルを使ってリストで対象のレイヤーをドラッグして上下を移動させたり、【Z】の列をクリックして直接重ね合わせ順を入力することもできますし、プロパティインスペクタを利用して数値を直接入力することで重ね順を変更することができます。
なお、【レイヤー】パネルで【オーバーラップ防止】のオプションが有効になっていると、ドキュメント上でレイヤー同士を重ねることができません。

■ レイヤーの整列とサイズの統一

Dreamweaverには、レイヤーによるページデザインの手助けをするための機能がいくつか搭載されています。
沢山のレイヤーを使用する場合、便利なのがレイヤーの整列機能です。【Shift】キーを押しながら、整列させたいレイヤーすべてを選択し、【修正】メニューから【行揃え】を選んで整列させたい方向を指定すると、最後に選択されたレイヤーを基準にして指定した方向に整列されます。
またこのとき、【行揃え】メニューから【幅の統一】【高さの統一】を選択すると、複数のレイヤーのサイズを統一することも可能です。

■ グリッドの活用

グリッドを表示し、ガイドとして活用すると、正確なレイアウトがより楽に行えるようになります。
グリッドを表示するには、【表示】メニューの【グリッド】-【グリッドの表示】を選択します。【グリッド】-【グリッドの吸着】を選択しておくと、グリッド線にレイヤーの左端が吸着するようになります。なお、グリッドの吸着が有効になるのはレイヤーに対してのみで、その他のオブジェクトは吸着しません。

■ ネストレイヤーの活用

レイヤーをネスト化すると、子レイヤーは親レイヤーを移動させたとき一緒に移動するようになります。つまり複数のレイヤーをグループ化して、一つのレイヤーのように操作することができるようになります。ボタンなどを個別のレイヤーに分けて配置する場合などに便利です。
【レイヤー】パネルで子レイヤーにしたいレイヤーを選択し、【CTRL】キーを押しながら親レイヤーとするレイヤー名にドラッグすると、レイヤーがネストされて、レイヤー名がツリー表示されます。ネストを解除する場合には、対象のレイヤー名を【CTRL】キーを押しながらツリーの外へドラッグします。