- ベストアンサー
Dreamweaverでレイヤーを使うと画像がずれる？？
イメージの挿入で、イラストレーターで作った画像を配置して、その画像の上にレイヤーを使ってGIFアニメを配置させました。 Dreamweaver上ではちゃんと配置されているのに、ブラウザでプレビューしてみるとレイヤーの画像だけが、左に大幅にずれてしまっています。 どうしてずれてしまうのでしょうか？？ もしくは、レイヤーを使わないで、重なる画像を配置させる方法はあるのでしょうか。 ＨＰを作るのは初めてで、本を読みながらやっているのですが、レイヤーのことなどあまり詳しく書いてなくてよくわかりません。 どうかよろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんにちは！ イラレのバージョンはいくつでしょうか？ イラレ１０ であればスライスすることで、可能です。 例えばイラレで作ったベースとなる画像を ■■■ ■□■ ■■■ このように分割します。 分割した画像をDreamweaver上で９×９のテーブルを用意して、それぞれセルに入れてあげます。 そして、白い四角の部分にアニメを入れてあげます。 そのままではつながりが崩れる可能性がありますので、手作業で作る場合はちょっとした知識が必要ですが、画像をスライス出来るソフトをお持ちでしたら、簡単に出来ると思います。 Photoshop かFirrworks があれば一番簡単なのですが・・。 レイヤーで作る場合は、ご自分の環境でプレビューしたときにちゃんと見える位置に設定したとしても他のPCで見たときにブラウザやOSの種類や見る人の環境によってどうしてもずれてしまいます。
その他の回答 (2)
- mat-21
- ベストアンサー率56% (91/162)
この場合のレイヤーとは、スタイルシートで指定する<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^)特に、リンクの所にマウスオーバーするとリンクリストがレイヤーで出てきたりするやつとか....。レイヤーの応用でなっています。
お礼
回答ありがとうございます。 「ツール」の「レイヤーを描く」というのでレイヤーを描いてその中に画像をいれたのですが、 それがスタイルシートというものなのでしょうか？ 大変親切に詳しく書いていただいたのに、なんども読み返したのですが 勉強不足でなかなか理解できないのが申し訳ないです（＾＿＾； ありがとうございました。
- natsuki_tk
- ベストアンサー率35% (99/279)
DW上のレイヤーの位置は、あくまでも参考程度のものです。 ですので、実際の表示を確かめながらDW上でも微調整が必要です。 >レイヤーを使わないで、重なる画像を配置 基本的に無理です。 例外として、片方を背景にしてしまえばできますけれども。
お礼
回答ありがとうございます。 画像は重ねられないのですね。ＨＰ作りを始めたばかりでわからないことだらけです（笑） 勉強になります。ありがとうございました。
お礼
回答ありがとうございます。 現在イラストレーター１０を使っているのですが、今までずっと８を使っていたので、スライスという機能があるのを知りませんでした。 わかりやすい説明で感謝しています。 ありがとうございました。