- ベストアンサー
ホームページの位置のずれについて
- 最近開設したばかりのHP内にある「サイトマップ」の、夢殿から八方に文字が広がる部分を「中央揃え」に設定すると、レイヤーで作ったこの部分だけが追従せず位置がずれてしまいます。
- レイヤーを使っていないページは「中央揃い」にしても問題ありませんが、レイヤーを使ったこの部分だけ、ページ全体とレイヤーの位置がずれるのです。
- 具体的に、どうすればよいのかが分かりません。良い方法をご存知の方がおられましたら、お教え頂ければ幸いです。
- 2413ryo930
- お礼率53% (7/13)
- ホームページ作成ソフト
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ANo.1-3です。補足を拝見しました。 > 私なりに色々と試行錯誤してみましたが、やはりうまく行きませんでした。Abril様が検証して下さっているのに、 誤解されているといけないのでここで言っておきますが、私が実際に行ったのは、Layer10に関してのみです。Layer10は「動かない（表示位置が固定）」レイヤーですので、あれだけの調整で望む位置に移動ができますが、他のレイヤー群はJavaScriptと絡んで「（表示位置が）動く」様になっているので、head内のスタイル部分だけを調整してもだめです。ぱっと見る限り、各レイヤー群の値の再計算は ・head内のstyle部分（#Layer数字 {～}）の値 ・body内の各divのマークアップでstyle属性で直接かかれた（例えば<div id="Layer2" style="top: 717px; left: 394px;">）部分の値 ・head内のJavaScript部分に書かれた値 の3箇所全部の辻褄が合う様に調整しないとだめだと思われます。以前から申し上げております様にそこまではこちらでは検証はしません。 > 試みた手順を書かせて頂きますので、もう一度だけ確認して頂けませんか。 > （1） > Aの場合（省略） OKです。ただし、前回書きました様にこの方法（tdを基点とする）だと環境（ブラウザの種類など）によって解釈が違う場合がある様ですので、こちらは不採用にして下さい。 > Bの場合（省略） > <div id=”hoge”> この後、<div id=”hoge”>が各レイヤー群を内包した状態できちんと閉じている（正しい位置でこれの閉じタグ</div>が挿入）のであれば、OKです。 > （２）（省略） > （３）（省略） OKです。 > （４）次に、その下に記述されているレイヤー群のtopとleftの値を、レイアウトセルの左上端から計測した値に修正する。 ここまではOKです。ですが、先程も申し上げた通り、 > 一応Layer10のtopを236px、 leftを134px、 Layer10に関してはそこだけの調整で良いのですが、 > Layer2~9のtopを313px、 leftを210px、Layer90のtopを462px、 leftを248pxと修正 これらの他の「JavaScriptによって動きの与えられた」レイヤー群に関しては、ここを調整しただけでは不足、という事です。 おそらく…質問者様の今の状態でこれを調整するにはかなり苦労されるかもしれません。JavaScriptの中味もCSSとの絡みも理解してカスタマイズしなければならない作業ですので。
その他の回答 (3)
- abril
- ベストアンサー率69% (388/560)
ANo.1-2です。レスを拝見しました。 ですが… > と入力しました。最後の笠のレイヤーだけ、入力項目が違うようですが、そのまま入力しました。 「入力」？とか「入力項目が違う」？の意味がよくわかりません。ANo.2でのアドバイスは、オリジナルのソースではbodyの直下にあるレイヤー群をそのまま所定の場所へ移動（つまり、カット＆ペースト、です）して下さいとだけ申し上げた筈です。 それから、私は基本Dreamweaverをメイン・ツールとしては使用しておりませんので、Dreamweaverの具体的な操作方法で質問されても正直ピンときません。勿論、大概の操作方法は順を追って見ていけばわかるとは思いますが、基本、Dreamweaverだろうと何だろうとコードを直接編集する人間ですので、私のアドバイスは全てその観点からしかできません。 なので、下記の様な： > DreamWeaverのレイヤーパネルを見ると、「Layer10」[Layer10]というように、同じレイヤーが二つずつ表示されましたが、 …という様な質問をされてもお答えする（操作方法を自分で把握して検証する時間を取る）事はできません。そういう事に関しては他の方の回答をお待ち下さい。ただ、「同じレイヤーが二つずつ」という文面から推測する感じでは、レイヤーがだぶって指定されている様に受け取れます。前回のアドバイス通り、「移動」させましたか？もしかしてオリジナルの部分を残したまま二重にレイヤー群を設定してしまっているのでは？ とりあえず、tdを基点にすると上手く行かなかった様ですから、後者の方法（既存のレイヤー群を囲む親要素divを設け、そこをid="hoge"とする）に切り替えてみて下さい。一応、質問者様のサイトマップをそのまま参照ファイルごとコピペしてローカル上で検証してみた所、IEでもFirefoxでもページ全体をセンタリングにしてもこの方法で常に<div id="hoge">を基点として相対的になりますので、後は前回申し上げた通り、各レイヤー群やJavaScript内の値を地道に計算し直して書き換えて行って下さい。 ※ちなみに、その方法で移動させたものをDreamweaver上の「レイヤーパネル」で見ても、だぶって表示、という様な現象は起こりませんでした。 もしもそれが難しい様でしたら、センタリングするのを諦めるか、現在の様な複雑なJavaScriptとCSSを調整しなければならない「仕掛け」を使う事を諦めて下さい。スタイルや仕掛けをカスタマイズするには、「それが何故、どういう理屈でこうなっているのか」という事を理解していない限り、困難を極めても仕方のない事です。色々な事に手を出すのは基礎が理解できる様になってからの方が賢明だと思います。
補足
Abril様、レイヤー群を移動する意味を誤解していました。カット＆ペーストでよかったのですね。わざわざ＜hr align=”center” width=”430”/>の後に、レイヤー10からレイヤー90までのdiv idを記述していました。それでダブったのだと思いますが、コードの意味も仕組みも分かっていない素人は、これだから困ります（汗）。頓珍漢な質問をして、申し訳ありません。 ご回答頂いた後、私なりに色々と試行錯誤してみましたが、やはりうまく行きませんでした。Abril様が検証して下さっているのに、そうならないのは、コードの書き方が間違っているか、書き込む箇所が間違っているかだと思いますが、私には原因が分かりません。 試みた手順を書かせて頂きますので、もう一度だけ確認して頂けませんか。これで駄目ならセンタリングは諦めます。お手を煩わせますが、よろしくお願いします。tdにidを振るケースをA, divで囲んでidを振るケースをBとします。 （1） Aの場合 <td id=”hoge” width="506" height="792" valign="top"><p align="center"><br /><img src="../images/moji/1.sakura/saitmap.gif" width="142" height="19" /></p><hr align="center" width="430" /> Bの場合 <td width="506" height="792" valign="top"><p align="center"><br /><img src="../images/moji/1.sakura/saitmap.gif" width="142" height="19" /></p> <hr align="center" width="430" /> <div id=”hoge”> （２） この後へ、A、Bとも、<body onlordの下の方にある<div id="Layer10"><img src="../images/layer/yumedono-kairou.gif" name="Image1" width="250" height="250" align="absmiddle" /></div> から <div id="Layer90" style="left: 433px; top: 682px;"><img src="../images/layer/kasa.gif" width="24" height="24" /></div><div></div> までを丸ごとカットしてペーストする。 （３）次に <style type="text/css"> <!-- body,td,th { color: #000000; } の下に、Aの場合は、 td#hoge { position: relative; } と追加し、Bの場合は、 div#hoge { position: relaitive; } と追加する。 （４）次に、その下に記述されているレイヤー群のtopとleftの値を、レイアウトセルの左上端から計測した値に修正する。 一応Layer10のtopを236px、 leftを134px、Layer2~9のtopを313px、 leftを210px、Layer90のtopを462px、 leftを248pxと修正しましたが、ブラウザで確認すると、夢殿のイラストは中央に来ているのに、八つのボタンと笠は、そこから右下の方にズレていて駄目でした。 説明が分かりにくいかも知れませんが、よろしくお願いします。
- abril
- ベストアンサー率69% (388/560)
ANo.1です。補足を拝見しました。 > 「<td」の後ろに半角スペースを入れてみました。すると、色々なタグの種類が表示され、その中に「id」というのがあったので、それを選択しますと、「id=""」というのが表示され、 tdに対して適用するのであれば、id属性はそこに入ります。つまり、 <td width="506" height="792" valign="top" id="hoge">でも、 <td id="hoge" width="506" height="792" valign="top">でも、 属性の順番は問いません。要は、適用対象の要素の中にid属性が書かれていれば良いのです。 > 更に「Layer1」から「Layer90」までのLayerの番号が表示されました。 それは既に同じHTMLファイル中にid属性を付けられたものがあるので、単にそのリストを自動的に表示しているだけです。 これから別の用途の為に新しいidを振ろうとしているのですから、既存の候補から選択する事はありません。 というわけで、 > tdタグにidを振るとおっしゃる意味は、夢殿の「Layer10」を選ぶという意味でいいのでしょうか。 違います。idとは「一意」という事です。IDカード、はどんなに沢山の人が居ても、”ただ一人の”身分証明となるものですよね？それと全く同じ事で、同一ファイル中では同じidを与えられた要素が複数登場してはいけないという決まりがある性質のものです。「Layer10」というidは、夢殿のイラストに対して与えられた身分証明です。今回はそれら既存のレイヤー群を子要素とする為の、親要素に対してidを与えなければならないのですから、親要素用の”新たな身分証明”を発行しなければならない、という事です。ですから、同一ファイル中で参照されていない新しい名前でidを付けます。 idの名称にはいくつかルールがあるのですが、 ・半角英数といくつかの記号のみ使える（※使用可能な記号には色々あるのですが、一般的には安全性を考えてアンダーバー"_"やハイフン"-"程度に留めます） ・半角英字の大文字小文字は区別される（"Hoge"と"hoge"は別物として扱われる、という事です） ・条件によっては数字を先頭にすると無効になる場合があるので、数字を先頭にしない方がいい 程度は抑えておいて下さい。 前回の回答や今回の文中では、仮にその新しいidを"hoge"（この"hoge"という名称は仮のネーミングを表す時によく使われる慣用句の様なものだと思っておいて下さい）という名称にして説明していますが、既存のものと被らず且つ上記のルールを満たしているなら任意で付けて良いです。ここでは便宜上、"hoge"で話を進めますが。 で、もう一つのご質問の方ですが、かなり理解が難しかった様ですね… > <td width="506" height="792" valign="top">と > <p align="center"><br /> > <img src="../images/moji/1.sakura/saitmap.gif" width="142" height="19" /></p> > <hr align="center" width="430" /> > の間に、td#hoge {position: relative; }と入力し、「position: relative; 」の後ろのスペースに、idを振ったレアイウトセルの左と上からの距離を、各Layerごとに計測し、夢殿であれば、＜td#hoge {position: relative; left: 132px; top: 237px; }/td＞、八つの扉であれば、＜td#hoge { position: relative; left: 207px; top: 312px; }/td＞、笠であれば、＜td#hoge {position: relative; left: 245px; top: 461px; }/td＞という様に、px単位で入力するという意味でしょうか。 すみませんが、正しくないです。 まず、前者の場合／後者の場合と書いたのは、複数の方法が考えられるが選択するのはどちらか一方、という意味です。混乱されている様ですので、ここから先は前者の方法を採用した場合のみに絞ってご説明させて頂きます。前述した様に、上記のtdの部分を親要素としてidを与える事にします。 ---------------------------------------------------------------------- <td id="hoge" width="506" height="792" valign="top"> ---------------------------------------------------------------------- 次に、現在はbodyのすぐ下に置かれているレイヤー群の記述を上記の子要素となるべく移動させます（下記中では途中を省略していますが、丸ごとです）。 ---------------------------------------------------------------------- <td id="hoge" width="506" height="792" valign="top"> <p align="center"><br /> <img src="../images/moji/1.sakura/saitmap.gif" width="142" height="19" /></p> <hr align="center" width="430" /> <!-- レイヤー群ここから始まり --> <div id="Layer10"><img src="../images/layer/yumedono-kairou.gif" name="Image1" width="250" height="250" align="absmiddle" /></div> （省略） <div id="Layer90" style="left: 433px; top: 682px;"><img src="../images/layer/kasa.gif" width="24" height="24" /></div> <div></div> <!-- レイヤー群ここで終わり --> ---------------------------------------------------------------------- で、実は「td#hoge {position: relative; }と入力し、「position: relative; 」の後ろのスペースに、idを振ったレアイウトセルの左と上からの距離を、各Layerごとに計測し」という部分は一部は正解なのです。ただ、それを適用するべき対象を間違っているというか。 ”td#hoge {～}”と書いた部分は、(X)HTML本文中でのマークアップの事ではなく、CSSに記述すべき<td id="hoge"～>に適用されるスタイルの設定です。質問者様の場合は各スタイルの設定を外部CSSファイルとして参照するのではなく、head内で<style type="text/css">～</style>に記述している様ですので、その中に、<td id="hoge"～>用のスタイルを追加してあげる、という事です。 ---------------------------------------------------------------------- <style type="text/css"> <!-- （省略） td#hoge { position: relative; } （省略） --> </style> ---------------------------------------------------------------------- …と、これだけ追加すれば済みます。 そしたら今度は、同様にhead内で”既に記述されている”各Layer群のtopとleftプロパティの値を計算し直して修正します。各Layer群のpositionプロパティの値は現在のabsoluteのままです。これらをrelativeに変えてしまったら何の意味もなくなってしまいます。 各レイヤーの値の修正は頑張って頂くとして、一つだけ考え方を。夢殿のイラストであるLayer10ですが、現状と比較すると、topは200px以上ぐらいでしょうね。手前にpやhrなど高さが可変の要素が入っているのでここはだいたいの位置しか指定できません。leftの値は、親要素のセルの長さが506pxと指定されていますから、 (506px（セルの長さ）- 250px（イラストの長さ）)÷2（左右センタリングの位置にする為、余白を均等に）＝128px となります。 #Layer10 { position: absolute; left: 128px; top: 200px; width: 250px; height: 250px; z-index: 1; } ※現状ではwidthとheightの値の単位を入れてない様ですが、省略しない方がいいです。
補足
とても丁寧で的確なアドバイスを頂き、有り難うございました。手順が間違っているかも知れませんが、一応次の様に入力しましす。 １、先ず<td id="hoge" width="506" height="792" valign="top">とtdにidを付けました。 ２、続いて、 <hr align="center" width="430" /> の後に、 <div id="Layer10"><img src="../images/layer/yumedono-kairou.gif" name="Image1" width="250" height="250" align="absmiddle" /></div> <div id>="Layer2"><img src="../images/layer/yumedono-button01-start.gif" name="Image2" width="100" height="100" align="absmiddle"/></div> （省略） <div id="Layer90" style="left: 433px; top: 682px;"><img src="../images/layer/kasa.gif" width="24" height="24"/></div> <div></div> と入力しました。最後の笠のレイヤーだけ、入力項目が違うようですが、そのまま入力しました。 この時点で、DreamWeaverのレイヤーパネルを見ると、「Layer10」[Layer10]というように、同じレイヤーが二つずつ表示されましたが、一つの方をクリックしてコードを見ると、いま入力した箇所が表示され、二つ目をクリックすると、<div id="Layer10"><img src="../images/layer/yumedono-kairou.gif" alt="夢殿" name="Image1" width="250" height="250" align="absmiddle" /></div>という箇所が表示されました。 DreamWeaver上には、各レイヤーが二つずつ表示されていましたが、この部分を削除してよいかどうか分からなかったので、そのままにして作業を進めました。 ３、次にレイヤー群の前に <style type="text/css"> <!-- body,td,th { color: #000000; } とありましたので、この後に td#hoge { position: relative; } と入力しました。 ４、レイヤー群のコードを見ると、widthとheightが250pxのレイヤーが、1と10の2個、widthとheightが100pxのレイヤーが、２から9、11、14、16～22、64～84までと、38個もありましたので、Layer番号を見て、Layer10とLayer２から９まで、そしてLayer90にのみ計測したレイアウトーセル（width506pxのセルです）のleftとtopからの距離を入力しました。 ５、ご指摘頂いたwidthとheightの値が欠落しているレイヤーについては、PXを入力しました。 以上が大体の手順ですが、結果をご報告しますと、DreamWeaverで見ると、レイヤー全体がレイアウトセルを外れて、ちょうど先ほど入力したレイアウトセルからのleftとtopの距離の所まで移動しました。 念のため、IE6、Firefox3.07,Opera9.21で確認しましたが、いずれもDreamWeaver上の配置とほぼ同じでした。 ただ、IE６だけが、移動したレイアウト群とは別に、もう一つのレイアウト群を表示されていまして、しかも、そのレイアウト群はレイアウトセルの中心にあって、ホームページを左右に動かしても、同じ様に追従するのです。 しかし、このレイヤー群は、DreamWeaver上には見えていません。 以上が、現在の状況ですが、どこか間違っているのでしょうか。お世話をかけますが、よろしくお願いします。
- abril
- ベストアンサー率69% (388/560)
ソースをざっと見る限りでは、問題のレイヤー群の配置が全て"position: absolute;"での絶対値での位置指定になっています。一方、レイヤーの親要素にはpositionの指定が何もありません。そうなるとこの場合、各レイヤーでtop、leftで指定しているpxでの値の基点は画面（ウィンドウ）の左上端となる為、他の要素の位置に関係なく常に画面の左上端からの値で描画される事になります。そしてレイヤー以外の箇所の位置関係は「その要素が本来描画される通常通りの位置に配置」となります。 その為、全体のレイアウトを左寄せ（常に画面左上端から配置）ではなく、左右センタリングになる様にすると、レイヤー以外の箇所はウィンドウサイズに対して成り行きで中央に描画されるのに対し、レイヤー部分は関係なく常に左上端からの絶対値で描画されるので、その結果が、 > レイヤーは常に左端から同じ距離を保っているのに対し、全体の枠組みは、左端からの距離ではなく、常に画面全体の中央を維持しようとするために位置がずれているのが分かります …です。 この様な複雑なレイヤー群の重ね合わせをしたいのであれば、直近の親要素を基点とした配置にしておく方がコンテンツ全体のレイアウト変更には左右されなくなるので効率が良いです。つまり、親要素【A】を"position: relative;"としておけば、子要素のレイヤー群の"position: absolute;"によるtopやleftの値はその親要素を基準に計算される様になる、という事です。 この場合、レイヤー群の親要素としては、 <!--DWLayoutTable--> <tr> <td width="506" height="792" valign="top">←このtdにidを振るか、 <p align="center"><br /> <img src="../images/moji/1.sakura/saitmap.gif" width="142" height="19" /></p> <hr align="center" width="430" /> ←ここにレイヤー全体の親要素としてdivで囲ってidを振るかして、 子要素のレイヤー群のマークアップ部分をその中へ移動 <p align="center"><br /></p> </td> </tr> …とでもするのが適切でしょうか。ちょっとソースが必要以上にごちゃごちゃしているのでわかりにくいかもしれませんが。 前者のマークアップであれば、 td#hoge { position: relative; } 後者のマークアップであれば、 div#hoge { position: relative; } という様にCSSに指定を追加します。こうなると当然ですが、親要素hogeからの位置を基点として各レイヤーのtopとleftの値（それぞれ今よりも小さい値になるでしょう）を改めて計算し直す事も必要です。 ただ、問題の箇所はJavaScriptでああいったアニメーションの様な仕掛けを与えているので、JavaScript側での位置指定との兼ね合いも再調整しないと望む結果は得られない様に思われます。その点は検証しませんので、悪しからず。
補足
Abrilさん、御回答を頂き、有り難うございます。素人ですので、見当違いの質問をしているかも知れませんが、お許し下さい。 <td width="506" height="792" valign="top">←このtdにidを振るという事ですが、どの箇所に、どの様に振るのか分かりませんでしたので、一応「<td」の後ろに半角スペースを入れてみました。すると、色々なタグの種類が表示され、その中に「id」というのがあったので、それを選択しますと、「id=""」というのが表示され、更に「Layer1」から「Layer90」までのLayerの番号が表示されました。 夢殿のイラストは「Layer10」、八つの扉のイラストは「Layer2」から「Layer9」、そして夢殿の回廊を廻る笠が「Layer90」ですが、tdタグにidを振るとおっしゃる意味は、夢殿の「layea10」を選ぶという意味でいいのでしょうか。全く見当はずれの事をしているようにも思うのですが、意味が分からないので、お教え下さい。 もう一つお聞きしたいのは、 「子要素のレイヤー群のマークアップ部分をその中へ移動し、<p align="center"><br /></p></td></tr>…とでもするのが適切でしょうか」と言う部分と、「前者のマークアップであれば、td#hoge {position: relative; }という様にCSSに指定を追加します」という部分ですが、これは、 <td width="506" height="792" valign="top">と <p align="center"><br /> <img src="../images/moji/1.sakura/saitmap.gif" width="142" height="19" /></p> <hr align="center" width="430" /> の間に、td#hoge {position: relative; }と入力し、「position: relative; 」の後ろのスペースに、idを振ったレアイウトセルの左と上からの距離を、各Layerごとに計測し、夢殿であれば、＜td#hoge {position: relative; left: 132px; top: 237px; }/td＞、八つの扉であれば、＜td#hoge {position: relative; left: 207px; top: 312px; }/td＞、笠であれば、＜td#hoge {position: relative; left: 245px; top: 461px; }/td＞という様に、px単位で入力するという意味でしょうか。 素人の説明で、分かりにくいかも分かりませんが、よろしくお願いします。勝手なお願いですが、出来るだけ詳しくお教え頂ければ、有り難いです。
お礼
早速、丁寧なご説明を頂き、恐れ入ります。正直なところを言いますと、こちらの知恵袋に投稿させて頂くまでは、素人考えで簡単に出来るのではないかと希望的観測を持っていました。しかし、今の私にとって、それは、エベレルトに登頂するくらい大変な作業である事がようやく納得出来ました。変な言い方かも知れませんが、お陰様で、ようやくセンター揃えを諦める決心がつきました。 これまで私のような素人にお付き合い頂き、本当に感謝しております。また今回、ホームページ作りの奥深さと大変さも、実感出来たように思います。これからは、素人ながらに少しずつ勉強して、より多くの方々に見て頂けるホームページ作りを心がけていきたいと思っていますので、その節はまたお知恵をお貸し下さい。 本当に有難うございました。abril様の益々のご活躍をお祈りしております。