ホームページの位置のずれについて

Question

最近開設したばかりのHP(http://www.takanoyama-houtokuji.com/)内にある「サイトマップ」の、夢殿から八方に文字が広がる部分を、DreamWeaver8のレイアウトモードで作ったのですが、行揃えを「左揃え」から「中央揃え」にして、ホームページ全体をブラウザの中央に来るよう設定すると、全体の枠組みは中央に移動するのですが、レイヤーで作った夢殿から八方に広がる部分だけが追従せず位置がずれてしまいます。レイヤーを使っていないページは「中央揃い」にしても問題ありませんが、レイヤーを使ったこの部分だけ、ページ全体とレイヤーの位置がずれるのです。よく見ると、レイヤーは常に左端から同じ距離を保っているのに対し、全体の枠組みは、左端からの距離ではなく、常に画面全体の中央を維持しようとするために位置がずれているのが分かりますが、具体的に、どうすればよいのかが分かりません。
良い方法をご存知の方がおられましたら、お教え頂ければ幸いです。

abril · Accepted Answer

ANo.1-3です。補足を拝見しました。 > 私なりに色々と試行錯誤してみましたが、やはりうまく行きませんでした。Abril様が検証して下さっているのに、誤解されているといけないのでここで言っておきますが、私が実際に行ったのは、Layer10に関してのみです。Layer10は「動かない（表示位置が固定）」レイヤーですので、あれだけの調整で望む位置に移動ができますが、他のレイヤー群はJavaScriptと絡んで「（表示位置が）動く」様になっているので、head内のスタイル部分だけを調整してもだめです。ぱっと見る限り、各レイヤー群の値の再計算は・head内のstyle部分（#Layer数字 {～}）の値・body内の各divのマークアップでstyle属性で直接かかれた（例えば

）部分の値・head内のJavaScript部分に書かれた値の3箇所全部の辻褄が合う様に調整しないとだめだと思われます。以前から申し上げております様にそこまではこちらでは検証はしません。 > 試みた手順を書かせて頂きますので、もう一度だけ確認して頂けませんか。 > （1） > Aの場合（省略） OKです。ただし、前回書きました様にこの方法（tdを基点とする）だと環境（ブラウザの種類など）によって解釈が違う場合がある様ですので、こちらは不採用にして下さい。 > Bの場合（省略） >

この後、

が各レイヤー群を内包した状態できちんと閉じている（正しい位置でこれの閉じタグ

が挿入）のであれば、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との絡みも理解してカスタマイズしなければならない作業ですので。

abril · Answer

ANo.1-2です。レスを拝見しました。ですが… > と入力しました。最後の笠のレイヤーだけ、入力項目が違うようですが、そのまま入力しました。「入力」？とか「入力項目が違う」？の意味がよくわかりません。ANo.2でのアドバイスは、オリジナルのソースではbodyの直下にあるレイヤー群をそのまま所定の場所へ移動（つまり、カット＆ペースト、です）して下さいとだけ申し上げた筈です。それから、私は基本Dreamweaverをメイン・ツールとしては使用しておりませんので、Dreamweaverの具体的な操作方法で質問されても正直ピンときません。勿論、大概の操作方法は順を追って見ていけばわかるとは思いますが、基本、Dreamweaverだろうと何だろうとコードを直接編集する人間ですので、私のアドバイスは全てその観点からしかできません。なので、下記の様な： > DreamWeaverのレイヤーパネルを見ると、「Layer10」[Layer10]というように、同じレイヤーが二つずつ表示されましたが、 …という様な質問をされてもお答えする（操作方法を自分で把握して検証する時間を取る）事はできません。そういう事に関しては他の方の回答をお待ち下さい。ただ、「同じレイヤーが二つずつ」という文面から推測する感じでは、レイヤーがだぶって指定されている様に受け取れます。前回のアドバイス通り、「移動」させましたか？もしかしてオリジナルの部分を残したまま二重にレイヤー群を設定してしまっているのでは？とりあえず、tdを基点にすると上手く行かなかった様ですから、後者の方法（既存のレイヤー群を囲む親要素divを設け、そこをid="hoge"とする）に切り替えてみて下さい。一応、質問者様のサイトマップをそのまま参照ファイルごとコピペしてローカル上で検証してみた所、IEでもFirefoxでもページ全体をセンタリングにしてもこの方法で常に

を基点として相対的になりますので、後は前回申し上げた通り、各レイヤー群やJavaScript内の値を地道に計算し直して書き換えて行って下さい。 ※ちなみに、その方法で移動させたものをDreamweaver上の「レイヤーパネル」で見ても、だぶって表示、という様な現象は起こりませんでした。もしもそれが難しい様でしたら、センタリングするのを諦めるか、現在の様な複雑なJavaScriptとCSSを調整しなければならない「仕掛け」を使う事を諦めて下さい。スタイルや仕掛けをカスタマイズするには、「それが何故、どういう理屈でこうなっているのか」という事を理解していない限り、困難を極めても仕方のない事です。色々な事に手を出すのは基礎が理解できる様になってからの方が賢明だと思います。

abril · Answer

ANo.1です。補足を拝見しました。 > 「でも、でも、属性の順番は問いません。要は、適用対象の要素の中に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#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を与える事にします。 ---------------------------------------------------------------------- ---------------------------------------------------------------------- 次に、現在はbodyのすぐ下に置かれているレイヤー群の記述を上記の子要素となるべく移動させます（下記中では途中を省略していますが、丸ごとです）。 ----------------------------------------------------------------------

（省略）

---------------------------------------------------------------------- で、実は「td#hoge {position: relative;　　　　　}と入力し、「position: relative;　」の後ろのスペースに、idを振ったレアイウトセルの左と上からの距離を、各Layerごとに計測し」という部分は一部は正解なのです。ただ、それを適用するべき対象を間違っているというか。 ”td#hoge {～}”と書いた部分は、(X)HTML本文中でのマークアップの事ではなく、CSSに記述すべきに適用されるスタイルの設定です。質問者様の場合は各スタイルの設定を外部CSSファイルとして参照するのではなく、head内でに記述している様ですので、その中に、用のスタイルを追加してあげる、という事です。 ---------------------------------------------------------------------- ---------------------------------------------------------------------- …と、これだけ追加すれば済みます。そしたら今度は、同様に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の値の単位を入れてない様ですが、省略しない方がいいです。

abril · Answer

ソースをざっと見る限りでは、問題のレイヤー群の配置が全て"position: absolute;"での絶対値での位置指定になっています。一方、レイヤーの親要素にはpositionの指定が何もありません。そうなるとこの場合、各レイヤーでtop、leftで指定しているpxでの値の基点は画面（ウィンドウ）の左上端となる為、他の要素の位置に関係なく常に画面の左上端からの値で描画される事になります。そしてレイヤー以外の箇所の位置関係は「その要素が本来描画される通常通りの位置に配置」となります。その為、全体のレイアウトを左寄せ（常に画面左上端から配置）ではなく、左右センタリングになる様にすると、レイヤー以外の箇所はウィンドウサイズに対して成り行きで中央に描画されるのに対し、レイヤー部分は関係なく常に左上端からの絶対値で描画されるので、その結果が、 > レイヤーは常に左端から同じ距離を保っているのに対し、全体の枠組みは、左端からの距離ではなく、常に画面全体の中央を維持しようとするために位置がずれているのが分かります …です。この様な複雑なレイヤー群の重ね合わせをしたいのであれば、直近の親要素を基点とした配置にしておく方がコンテンツ全体のレイアウト変更には左右されなくなるので効率が良いです。つまり、親要素【A】を"position: relative;"としておけば、子要素のレイヤー群の"position: absolute;"によるtopやleftの値はその親要素を基準に計算される様になる、という事です。この場合、レイヤー群の親要素としては、 ←このtdにidを振るか、

←ここにレイヤー全体の親要素としてdivで囲ってidを振るかして、子要素のレイヤー群のマークアップ部分をその中へ移動

…とでもするのが適切でしょうか。ちょっとソースが必要以上にごちゃごちゃしているのでわかりにくいかもしれませんが。前者のマークアップであれば、 td#hoge { position: relative; } 後者のマークアップであれば、 div#hoge { position: relative; } という様にCSSに指定を追加します。こうなると当然ですが、親要素hogeからの位置を基点として各レイヤーのtopとleftの値（それぞれ今よりも小さい値になるでしょう）を改めて計算し直す事も必要です。ただ、問題の箇所はJavaScriptでああいったアニメーションの様な仕掛けを与えているので、JavaScript側での位置指定との兼ね合いも再調整しないと望む結果は得られない様に思われます。その点は検証しませんので、悪しからず。

ホームページの位置のずれについて

ANo.1-3です。

ANo.1-2です。

この回答への補足

ANo.1です。

この回答への補足

ソースをざっと見る限りでは、問題のレイヤー群の配置が全て"position: absolute;"での絶対値での位置指定になっています。

この回答への補足

似たような質問が見つかりました

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

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

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