|
|
相対的な位置のコンテナに画像などを重ねる |
|
|
画像などの重ね合わせについて
相対的な位置を保ったまま、その要素の左上などに要素を重ねる方法の説明です。
|
|
 |
サンプル |
サンプル1
下の「あいうえお」と記載されたレイアウトコンテナは相対的な位置で配置されており、
画像が常に右下に重なって表示されます。
あいうえお
サンプル2
| 表のセル位置を基準に配置もできます |
| |
|
|
|
あ
あ
あ
あ
あ
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
レイアウトコンテナと画像の挿入 |
サンプル1の重ね方について説明を行なっていきます。
メニューから、
「挿入」→「その他」→「レイアウトコンテナ(DIV)」 を選択します。
挿入された枠を右クリックするか、メニューの「編集」から「スタイルの設定」を選択し、
「位置」タブをクリックして以下の赤枠の項目を指定します。
完了したら「OK」をクリックします。
備考
基準となるコンテナは高さなどが%やpxで指定されている必要がありますが、表のセルを基準に
配置する場合、これらを指定せず、セル内に配置される文章をコンテナに含めます。
サンプル2の「あ」という文字は、挿入したレイアウトコンテナの中にある状態です。
重なる画像は通常配置される文章などより上に来ますので、前後に文章がある場合、
文書の上に画像が重なる場合がありますので、このレイアウトコンテナの「レイアウト」から
上下のマージンが必要な場合もあります。
対象のレイアウトコンテナをクリックして 「挿入」→「画像ファイル」と辿り、画像を挿入するか、
レイアウトコンテナ内に画像をドロップして挿入します。
挿入した画像を右クリックするか、メニューの編集から「スタイルの設定」を選択し、
以下のように設定します。
前記のレイアウトコンテナと違い、位置が「絶対的」になっている点に注意して下さい。
備考
レイアウトコンテナの位置は「相対的」で、その中に配置する画像などを「絶対的」にすると、
配置した画像はレイアウトコンテナの位置を基準に自由な位置に配置できます。
レイアウトコンテナの位置が「指定しない」や、「固定」になっていると
正しい位置に配置されませんのでご注意下さい。
「配置」の右や、下などの数値は以下のようなイメージです。
それぞれ、マイナスの値を指定する事で、枠の外側にずれた位置で配置されます。
左 -30px
上 -30px
右 -30px
上 -30px
左 -30px
下 -30px
右 -30px
下 -30px
備考
今回は画像の幅、高さがそれぞれ60ピクセルでしたので、レイアウトコンテナの角に
画像の中心が来るよう、画像の半分の -30ピクセルを指定しました。
| |
プレビューで確認 |
上記のような配置をすると、ページ編集画面では確認出来ませんので、
「プレビュー」タブをクリックして確認してみましょう。
|
|
|
|
|
|
|
