レイヤー・・・

質問

私はレイヤーを多用してＨＰ作成しているのですが
１０２８×７６８で作成し「出来た！」と思い
友達に見せると「なんかレイアウトおかしいで～」
といわれ確認すると彼は８００×６００の表示・・。
レイヤー位置がそのままなので８００×６００では
はみ出た部分が表示されなかったんです・・。

Dreamweaberだとレイヤーの位置が固定されて
しまってるんです・・。どうすれば解消されるで
しょうか・・・。教えて下さい・・

回答No.6

noname#61366

もう書き込んでも読んで貰えないかも知れませんが...
＃３のdolphinaです。

#4の方への補足の中で気になったので...
>「oweb」のHPを例びあげると・・・
> 回答一覧の右端の紫の線は縮小しても右端に
> ついてくるのはどういう技を使ってられるんでしょう・・・？？
> 上のご回答によるとレイヤーでもテーブル
> でもないというと・・・。何度もすいません・・。

私のも#4の方のも，落ち着いて読み直してみてください。
okwebはテーブルを使っています。
テーブルだけで，あのレイアウトをしています。
okwebのページを保存（「ファイル」→「名前を付けて保存」）して，
保存したファイルをDreamweaverで開いてみて下さい。

それから，htmlファイルの表示ウィンドウの「表示」を「コードとデザイン」にして下さい。
気になっている枠線辺りをクリックして，コードを見てみて下さい。
下記のようにtableのみを使用しているのが分かると思います。

もし分からなければ，下記の部分をご自身のページに貼り付けて，見てみて下さい。
<TABLE cellSpacing=0 cellPadding=0 width="98%" align=center border=0>
<TBODY>
<TR>
<TD bgColor=#6943fc>

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=right bgColor=#ffffff colSpan=6></TD></TR></TBODY></TABLE>

<TABLE cellSpacing=2 cellPadding=3 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap width="10%">
<DIV align=center><FONT
color=white><B>ANo.#1</B></FONT></DIV></TD>
<TD vAlign=center bgColor=#ffffff colSpan=2 rowSpan=3 wrap>回答の内容</TD></TR>
<TR>
<TD noWrap width="10%" bgColor=#ffffff>
<DIV align=right><FONT size=-1>ここは時間が入ってます</FONT><BR>
<A href="http://www.okweb.ne.jp/">回答者名</A></DIV></TD></TR>
<TR>
<TD width="10%" bgColor=#ffffff>
<DIV align=right><FONT color=#6943fc size=-1><B>一般人</B><BR><B>回答</B><BR><B>自信あり</B><BR></FONT>
<HR>
<FONT color=#ff3333 size=-1><B>良回答(10pt)</B></FONT></DIV></TD></TR>
<TR>
<TD bgColor=#ffffff colSpan=3>参考URL:</TD></TR>
<TR>
<TD width="10%" bgColor=#ff9900>
<DIV align=center><B><FONT color=#6633ff>補足</FONT></B></DIV></TD>
<TD bgColor=#ffcc66 colSpan=2><FONT size=-1>　( 補足は記入されていません )</FONT></TD></TR>
<TR>
<TD width="10%" bgColor=#ff9900>
<DIV align=center><B><FONT color=#6633ff>お礼</FONT></B></DIV></TD>
<TD bgColor=#ffcc66 colSpan=2><FONT size=-1>どうもありがとうございます。早速やってみます。</FONT></TD></TR>
</TBODY></TABLE>
</TD></TR></TBODY></TABLE>

回答No.5

onimotsu

今、見ている画面は最大化ですよね。

それでは画面右上の×の左側の□をクリックすると
画面が縮小されるでしょう。

そしたら縮小された画面の右辺にマウスポインタを持って行き
←→の矢印になったらドラッグして左側に持って行き
最大化の半分程度の画面にしてみてください。

このとき質問欄や解答欄はテーブルで作成され
かつ、文字で表示されているので
画面サイズに合わせて表示されていますよね。

しかし、質問欄の上のバナーを見てください。
バナーは画像で作成されているので
画面に合わせて縮小されていないでしょう。

もし、画像がテーブル内に入っていた場合も
画像が縮小されないので
必然的にテーブルも縮小しません。

テーブルが画面サイズに合わせて縮小されるのはなぜか。

それはテーブルの幅を指定していないからです。
逆にテーブルの幅を指定した場合はレイヤーと同じく
指定した幅で表示しますので画面サイズによっては
テーブルが画面からはみ出してしまうことになるのです。

この場合は画面に合わせて”縮小されない”。（800×600の画面では）

<TABLE border="1" width="900">
<TBODY>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE>

この場合は画面サイズに合わせて”テーブルが縮小される”。

<TABLE border="1">
<TBODY>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE>

お分かりですね　width="900"　でテーブルの幅を指定しています。

再度、説明しますが
上記の「この場合は画面サイズに合わせてテーブルが縮小される。」場合であっても
テーブル内に画面からはみ出るサイズの画像を使用した場合は
テーブルは縮小されずに画面からはみ出します。

回答No.4

onimotsu

既に＃3の回答にある通り
画像自体は自動的に800×600のサイズに収まるように幅は縮小されません。
また、レイヤー自体もスタイルシートを使用してサイズを設定していますから
800×600のサイズに収まるように幅は縮小されません。

レイヤー内に文字を使用した場合も幅を縮小することはありません。

テーブルを使用した場合でも
文字の場合には幅を縮小することはできますが
画像の場合には画像自体が縮小されないため
テーブルの幅が縮小されずに画面からはみ出すこととなります。

横スクロールや縦スクロールをしないで画面に表示させたい場合には
800×600程度がよろしいと思います。

>私の周りもこのサイズで閲覧されている方が多いので
>このサイズは必要かなと思うんですが、私の周りだけ
>でしょうか？？？（泣）いつもすいません・・。

dai204さんの周りの方だけに見せるものであれば
１０２８×７６８でよいかと思いますが
万人に見せたいということであれば
800×600がよいと思います。

ちなみに私は800×600ですから
dai204さんのレイヤー部分を見るのには
横と縦のスクロールをしなければならず
全体像が掴みにくいということになります。

補足

いつもご親切なご回答ありがとうございます！

「oweb」のHPを例びあげると・・・
回答一覧の右端の紫の線は縮小しても右端に
ついてくるのはどういう技を使ってられるんでしょう・・・？？上のご回答によるとレイヤーでもテーブル
でもないというと・・・。何度もすいません・・。

回答No.3

noname#61366

No.2の方への補足の最後に対してのコメントですが，
私はモニタの解像度こそ1280*1024にしていますが，
ブラウザは一画面で利用せず，複数のウィンドウを表示させるために
一つのウィンドウサイズはおよそ800*600にしか開きません。
そういうユーザも結構いると思いますよ？
（一つのサイトを読み込んでいる間に，別にサイトを読み込ませたり...）

B5サイズノートの方なんかは800*600くらいが見やすいのではないでしょうか？
「私の周りもこのサイズで閲覧されている方が多いのでこのサイズは必要かなと思うんですが」とありますが，
必要とは？　画面いっぱいいっぱい利用しなくてはならないってことはないと思うんですけど(^^)

参考にしたいWebサイトがあるのならば，IEならメニューバー「表示」→「ソース」を見てみて下さい。
OKWebのレイアウトはテーブルしか使用していないのが分かります。

dai204さんが作成したページ（テーブル）が縮小されないのは
大きな画像を張り込んでしまったのではないでしょうか？
画像は「自動的に縮小して表示」はされませんので，
画像の大きさ分だけテーブルの幅を必要とすることになります。

お礼

ご回答ありがとうございます！
これまた説明不足ですいません・・・。

この「okweb」のHPをを例にあげると・・
回答一覧の右の紫の線は横幅はウインドウを
縮小してもある一定のまでちゃんと右端に
線がついてきますよね？
1024×768でも800×600でもウインドウの端に
ついてきますよね？？ただそういうふうに
したいんです・・・。

やはり、これって特殊なんでしょうか・・？？

回答No.2

onimotsu

レイヤーでそんな大きなサイズで表示する意味があるのでしょうか。

再度、忠告しますが
レイヤーはスタイルを使用しているので
ブラウザによってはきちんと表示されません。
（この辺りが確認できないと原因がわかりません）

また、
>Dreamweaberだとレイヤーの位置が固定されて
とありますが
レイヤーは元々位置を固定するためにあると思いますよ。

画像を表示すると思いますが
ただ表示するだけでしたらレイヤーにこだわらなくても
いいのではないでしょうか。
（動的に処理したい場合はこの限りではありません。）

先の質問・回答にもありました通り、
テーブルを使ってもよろしいかと思います。

また、新しいウィンドウを開いて
画像だけを表示したほうがよいかもしれません。

補足

いつも回答して頂きありがとうございます。
私の説明不足知識不足でうまく伝え切れていなくて・・。

レイヤーを使った理由としてDreamweaverでは
自分の思ったところに簡単に文字や画像を貼り付け
できるということだけで使用していたので、
レイヤーを使用した意味は何もありません。
onimotsuさんの回答で私がレイヤーの使い方を
間違っていたことに気付きました、
ありがとうございます。

そして、本題に入りますと・・
この「OKWEB」のHPように1024×768から800×600に
しても回答一覧の横幅が縮まるだけできっちり
見えるように、ただそういうふうに設定したいだけ
なんです・・。このウインドウを縮小しても横幅が
ついてくる様に・・。ただ私が作ると（知識不足・・）
レイヤーで作成してもテーブルで作成しても
縮小されないので（横幅の位置が変わらないので）
800×600では見えないという訳です・・。

<レイヤーでそんな大きなサイズで表示する意味があるのでしょうか。

私の周りもこのサイズで閲覧されている方が多いので
このサイズは必要かなと思うんですが、私の周りだけ
でしょうか？？？（泣）いつもすいません・・。

回答No.1

madman

１．JAVASCRIPTを利用して、windowのインナーサイズ（表示領域）の縦横のサイズを取得し、希望の位置にレイアウトできるように表示位値を計算して設定する。
２．800*600で作る。
３．1028*768で見てもらうよう、アナウンスする。（トップページに書く）
４．レイヤーに対応していないソフトでは、画面が崩れることをアナウンスする。
５．レイヤーを使わないで表示するように変更する。

のいずれかです。
HTMLは全ての環境、全てのソフトやバージョンでまったく同じに見せることは出来ませんので、どこかであきらめてください。

補足

すいません・・。
説明不足でうまく伝えれるか不安ですが（泣）

この「OKWEB」のHPように1024×768から800×600に
しても回答一覧の横幅が縮まるだけできっちり
見えるように、ただそういうふうに設定したいだけ
なんです・・。このウインドウを縮小しても横幅が
ついてくる様に・・。ただ私が作ると（知識不足・・）
レイヤーで作成してもテーブルで作成しても
縮小されないので（横幅の位置が変わらないので）
見えないという訳です・・。

なので全てのブラウザ環境とかそういうスケールで
はないので何とかならないでしょうか・・・？？
回答１に値するのでしょうか・・