上部の余白を画面サイズから割り出したい。

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： Nico ： 2005/02/16 14:31
初めて投稿します。よろしくお願いします。

要は、画面の中央にテーブルを表示したいのですが、ふつうにテーブルの入れ子にしてしまうと、こちらが文字サイズを「中」を想定して作成した場合に、見る人が文字サイズを「大」などにした場合、始まりの位置がバラバラになってしまうのを防ぎたいのです。

自分が考えたのは、

<script Language="JavaScript">
<!--
h = 480;
y = (screen.height - h) / 2;
// -->
</script>

で、この「y」をspace.gif="y"として代入し、高さ480のテーブルの上に挿入するやり方だったのですが、ダメなようです（yのサイズ、無視されてしまいます）。

なんとかなりませんでしょうか？
1   名前： Nico ： 2005/02/16 14:40
すいません、ちょっとわかりづらかったかもしれません。

＞こちらが文字サイズを「中」を想定して作成した場合に、見る人が文字サイズを「大」などにした場合、始まりの位置がバラバラになってしまう

というのは、文字サイズ「中」で高さ480のテーブルで文字がいっぱいなので、「大」で見ると多少下に押し出されてしまいます。
その分だけタテの高さがページによってバラつき、全くの中央配置だと、統一感がなくなってしまうのを防ぎたいのです。つまり、始まりの位置にメニューがあるので、それだけは揃えたいので苦労しています。

どうか、親切な方教えてくださると助かります。
2   名前： カヅサツ ： 2005/02/16 17:03
まだイマイチわかりずらいので、そういうときは、図とかを交えると案配良いのではないでしょうか。
3   名前： Nico ： 2005/02/16 19:47
すいません、説明、やっぱりわかりにくかったでしょうか。
仰せのとおり、簡単なページをつくってみました。

http://abc916.nobody.jp/tamesi/index.htmlとhttp://abc916.nobody.jp/tamesi/2.htmでは、IEの「表示」における「文字のサイズ」が「中」では色のついたテーブルの高さは同じ。でも、「大」にすると、2.htmの高さが大きくなり、揃えたい緑色のメニューにあたる位置がまちまちになることがわかると思います（外側のテーブルは、わかりやすくするためボーダーに色をつけてます）。

そこで、http://abc916.nobody.jp/tamesi/3.htmのspase.gif（わかりやすく赤にしている）をもって位置を調節すれば、文字の大小ゆえにテーブルの大きさが変わっても緑色のメニューの位置は変わらないですよね？　で、そこを割り出すJavaScriptを知りたいのですが･･･。

ご理解いただけましたでしょうか？
4   名前： カヅサツ ： 2005/02/17 17:18
要は、青色のブロックの上部が (screen.height - 480) / 2 なら良いのですね？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
html,body{
height: 100%;
margin: 0px;
padding: 0px;
}
div#all{
color: #FFFFFF;
background-color: #9966FF;
width: 720px;
height: 480px;
margin: 0% auto 0% auto;
padding: 3px;
}
div#menu{
color: inherit;
background-color: #669933;
width: 50%;
height: 20px;
}
</style>
</head>
<body>
<div id="all">
<div id="menu">
<p>メニュー</p>
</div>
<div id="main">
<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
</div>
</div>
<script type="text/javascript">
var topmargin = (screen.height - 480) / 2;
var allabj = document.getElementById('all');
if(topmargin > 0){
allabj.style.marginTop = topmargin;
}
</script>
</body>
</html>
5   名前： Nico ： 2005/02/18 22:25
どうも、ありがとうございます。
これを解析しようとしてるのですが、ちょっと時間がかかりそうなので（プログラム関係はあまり強くない）、先にお礼だけ言っておきます。
わざわざすみませんでした。
6   名前： Nico ： 2005/02/19 19:41
すいません、度々で申し訳ないのですが、

>var allabj = document.getElementById('all');
と、
>allabj.style.marginTop = topmargin;

にはどんな意味であるがのでしょうか？　リファレンスでもなかったので…。
よろしければお教えください。
7   名前： arc ： 2005/02/20 01:22
根本的に関係なかったら恐縮ですが、文字の大きさを絶対指定するだけでは解決できないのでしょうか。
8   名前： カヅサツ ： 2005/02/20 23:35
>var allabj = document.getElementById('all');

変数 allabj に、id属性値が all である要素（サンプルの場合、<div id="all">〜</div>）を代入します。

> allabj.style.marginTop = topmargin;

上記、allabj の外部上部余白を、変数 topmargin と同じ値にします。

> 文字の大きさを絶対指定するだけでは

そうすると、今度はその文字サイズが小さすぎたり大きすぎたりと感じる閲覧者に対して不親切なページになります。まぁユーザスタイルシートなどでどうにでもなりますが。
9   名前： Nico ： 2005/02/21 08:29
なるほど。ボックス全体自体を変数としての扱い、のことですね（日本語ヘンかな？）。

わかりました。ありがとうございました。
一覧へ戻る