ページ表示の縮小・拡大を自動で行なえる方法はありますか？

お世話になります。

【現状】
現在、写真サイトを作成しております。
構成として、テーブルで３×３の９マスを作成し、
そのなかに写真を収めています。
また、各ページへのリンクを配したフッターを設置しています。

【課題】
閲覧者のPC画面サイズに影響を受けることなく、
ウィンドウを最大化した際に、
写真とフッターがすべて画面内に収まるようにしたいです。

つまり、デスクトップの大きめの画面で見ても、
ノートPCで見ても、スクロールバーが出ることなく、
一画面内に収まる形です。

画面サイズに合わせて全体を縮小・拡大するような方法がありましたら、
ぜひご教授頂けると嬉しいです。
どうぞよろしくお願いいたします。

No.2 ベストアンサー 回答者： Yohjira 回答日時： 2008/09/01 00:17

もっといい方法があるのかなぁ、と思いつつ・・・

画面を読み込んだ時（bodyのonLoad）と、
ウィンドウサイズが変更された時（bodyのonResize）で、
画像サイズを変更する処理を起動させる。

画像サイズを変更する処理は、
ウィンドウサイズを取得して（bodyのclientHeightなど）、
それを元に設定すべき画像のサイズを計算して設定する。
tableタグは高さ等指定しなければ、画像サイズに合わせて変わりそうですが、
もしかしたらtableのサイズも画像サイズと一緒に設定したほうがいいのかもしれませんね。

こんな感じでどうでしょうか。

この回答へのお礼

サイズを随時、取得しながら、
tableサイズと画像サイズの双方を設定するように、
処理を組み込めばいいんですね。

ようやく見えてきました。
ありがとうございます。

お礼日時：2008/09/02 23:35

No.3 回答者： fujillin 回答日時： 2008/09/01 21:38

テーブルのタイトルを固定して、tbody部分を「横スクロールなし・縦スクロールは可」を実現しようとして、同じようなことをしたことがあります。

CSSでできそうなものですがうまくいかないので、JavaScriptを用いて、ほぼ　ANo2さんが回答されている方法で行いました。

heightやwidthに関する値が、ブラウザによって若干違っていたのでどの値を用いるかいろいろ試行錯誤した記憶があります。
（IE限定という環境でしたので、適当に切り上げましたが・・・）
ウインドウサイズ変更時の「onResize」の発生タイミングが、ブラウザ側での再表示の前だったと記憶しています。もしも、表示内容（レイアウト）を読み取って計算することが必要な場合は、一度Scriptから解放してあげる必要がでてきます。
ご質問のケースでは、フッターがどのように作成されているか不明ですが、テキストで作成されているとすると、その表示高さをブラウザのレイアウトから読み取る必要がありそうなので（幅によっては行数が変わるので）、同様のことが起きるのではと思います。（違っていたら必要ないですね）

この回答へのお礼

CSSでPOSITONを使えばうまくいきそうな気はしたんですが、なかなか。。。

フッターはテキストをulタグ、liタグを使用して、2行で整理しています。
幅によって行数が変わる可能性があるので、
このフッターの高さも考慮する必要がありそうですね。

ありがとうございます。

お礼日時：2008/09/02 23:42

No.1 回答者： Yohjira 回答日時： 2008/08/30 23:55

> 閲覧者のPC画面サイズに影響を受けることなく

と
> 画面サイズに合わせて全体を縮小・拡大
のつながりがよくわからないので、全然違う理解をしているかもしれませんが、
画面サイズを取得して、画像を縮小・拡大すると言うことでしょうか。

JavaScriptでonLoadやonResizeのタイミングで画面サイズを取得して、
それにあわせて画像のサイズを変更してやればいいと思います。

この回答への補足

アドバイスありがとうございます。

Javascriptで動的に画面サイズを取得して、
画像サイズを変更できるとは知りませんでした。
勉強させていただきました。


私の説明が拙なくて、
お伝えしたいことが充分に伝わらなかったようなので、
補足いたします。

結論から述べますと、
ページ中の９マステーブルとそのマス内に組み込んでいる写真、および、フッターを、
デスクトップの大きめな画面で見ても、ノートPCの小さめな画面で見ても、
スクロールバーを発生させることなく、
サイトを開いた際に表示される画面内(ブラウザを全画面表示している前提)にすべて収まるようにしたいのです。


Yohjiraさんから頂いたアドバイスをもとに考えると、
画面サイズを取得したうえで、
テーブルとテーブル内に組み込んでいる画像サイズを
変更すればよいという感じになるのでしょうか？

補足日時：2008/08/31 19:42