プロが教えるわが家の防犯対策術！

Dreamweaverでレイヤーを使うと画像がずれる？？

解決済

  • 質問者：tsunacan
  • 質問日時：
  • 回答数：3件

イメージの挿入で、イラストレーターで作った画像を配置して、その画像の上にレイヤーを使ってGIFアニメを配置させました。
Dreamweaver上ではちゃんと配置されているのに、ブラウザでプレビューしてみるとレイヤーの画像だけが、左に大幅にずれてしまっています。
どうしてずれてしまうのでしょうか？？

もしくは、レイヤーを使わないで、重なる画像を配置させる方法はあるのでしょうか。
ＨＰを作るのは初めてで、本を読みながらやっているのですが、レイヤーのことなどあまり詳しく書いてなくてよくわかりません。

どうかよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： yayopix
  • 回答日時：

こんにちは！



イラレのバージョンはいくつでしょうか？

イラレ１０ であればスライスすることで、可能です。

例えばイラレで作ったベースとなる画像を

■■■
■□■
■■■

このように分割します。
分割した画像をDreamweaver上で９×９のテーブルを用意して、それぞれセルに入れてあげます。
そして、白い四角の部分にアニメを入れてあげます。

そのままではつながりが崩れる可能性がありますので、手作業で作る場合はちょっとした知識が必要ですが、画像をスライス出来るソフトをお持ちでしたら、簡単に出来ると思います。

Photoshop かFirrworks があれば一番簡単なのですが・・。

レイヤーで作る場合は、ご自分の環境でプレビューしたときにちゃんと見える位置に設定したとしても他のPCで見たときにブラウザやOSの種類や見る人の環境によってどうしてもずれてしまいます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
現在イラストレーター１０を使っているのですが、今までずっと８を使っていたので、スライスという機能があるのを知りませんでした。
わかりやすい説明で感謝しています。
ありがとうございました。

通報する
お礼日時：2003/07/27 18:50

No.3

  • 回答者： mat-21
  • 回答日時：

この場合のレイヤーとは、スタイルシートで指定する<div style="position:absolute;～">の事ですよね？


POSITIONは、配置方法を設定するプロパティで、[staic][relative][absolute][fixed]の4設定ありますが、[static]は通常(何も設定されていない場合の事)の設定値です。つまり<div>～</div>の場合、何も記述されていないので[static]状態にあります。
それと、[fixed]は、まだ対応ブラウザが少ないため、この設定はなるべく避けましょう。よって[fixed]の説明は省きます。
さて、問題は、[relative]と[absolute]の違いですが、[relative]は、通常の状態で配置される位置から相対位置で配置設定するようになっています。私もDreamwaverMXでPOSITIONはよく使うのですが、[relative]の設定は、Dreamwaverの配置が上手く配置されません。どうしても[relative]で設定しなければならない所は仕方なく使用しますが、なるべく[absolute]でしています。
さて、次に[absolute]ですが、これは、他のレイアウトととは別に独立して配置指定できます。親ボックスに対しての配置となります。つまり、<body><div style="position:absolute;～">～</div></body>の場合、<body>が親ボックスになります。もっと詳しく説明すると、<body style="margin;0px;"><div style="position:absolute;top:100px;left:100px;">あいうえお</div></body>と設定するとブラウザの画面では左上からx軸100px、y軸-100pxの位置に「あいうえお」が配置されます。 しかしながら、<body>が親ボックスの場合は問題は無いのですが、<div id="a"><div id="b" style="position:absolute;～">～</div></div>のように入れ子で<div>の中に<div>でPOSITION指定している場合は<div id="a">が親ボックスになります。が、<div id="a">がレイヤー状態でない[static]状態の場合は、さらにその前の親ボックスに対して[absolute]状態になります。つまり、さらにその前の親ボックスが<body>の場合、<body>からの[absolute]配置になるわけです。
[abosolute]指定されているボックス（例えば<body><div style="position:absolute;～">～～</div></body>）のように親ボックスが<body>の場合、入れ子にならない状態であれば、この<div style="position:absolute;～">～～</div>のタグは<body>～～～～～～</body>の中ならソース上どこの位置でもその位置に配置されます（表示順の問題はありますが）。
よって、よく勘違いされる場合は、例えば、
<table width=400 align=center><tr><td>
<div>テーブルの中</div>
<div style="position:absolute;top:50px;left:50px">どこに配置されるの？</div>
</td></tr></table>
のように、[absolute]設定が<td>の中にあります。テーブルの中に対して上から50px、左から50pxと思うかもしれませんが、間違いです。確かにこの場合の親ボックスは、<td>ですが、その親ボックスは、[relative]もしくは[absolute]のレイヤー設定になっていないので、さらにその前の親ボックス<body>に対して上から50px、左から50pxに配置されてしまいます。
よって、長々と記述しましたが、このあたりが原因ではないでしょうか？
補足：最新のブラウザIE6などではボックス(<div>など)のwidth幅を決めてセンタリング(margin-right:auto;margin-left:auto)できますが、その前のバージョンでは、対応していないため、[absolute]を使ってブラウザに対し左右センターに配置するには、かなりのスタイルシートによる論理知識でコツがいります。よって世間のレイヤーを使ったサイトは左詰めのレイアウトが多いですね(^o^)特に、リンクの所にマウスオーバーするとリンクリストがレイヤーで出てきたりするやつとか....。レイヤーの応用でなっています。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
「ツール」の「レイヤーを描く」というのでレイヤーを描いてその中に画像をいれたのですが、
それがスタイルシートというものなのでしょうか？
大変親切に詳しく書いていただいたのに、なんども読み返したのですが
勉強不足でなかなか理解できないのが申し訳ないです（＾＿＾；
ありがとうございました。

通報する
お礼日時：2003/07/27 19:00

No.1

  • 回答者： natsuki_tk
  • 回答日時：

DW上のレイヤーの位置は、あくまでも参考程度のものです。


ですので、実際の表示を確かめながらDW上でも微調整が必要です。


>レイヤーを使わないで、重なる画像を配置

基本的に無理です。
例外として、片方を背景にしてしまえばできますけれども。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
画像は重ねられないのですね。ＨＰ作りを始めたばかりでわからないことだらけです（笑）
勉強になります。ありがとうございました。

通報する
お礼日時：2003/07/27 18:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報