中央揃えのJavascript！

質問

Dreamweaver8を使っていたためposition:absoluteでサイトを作ってしまいました。ページを中央揃えで表示したいのですがどうにもうまくいきません。positionを変更して位置を指定し直すのは大変なので…

ウィンドウサイズを取得してページを中央揃えにするjavascriptをご存知の方はいらっしゃいませんか？
もしくは何か解決策をいただけると助かります。
よろしくお願い致します。<(_ _)>

回答No.4

MAN_MA_RUI

難しいから簡単な方法に、ではなくて多少は面倒でもなるべくユーザビリティに配慮すべきです。
人に見てもらうためのものなのだからどこまでも自分の都合で動いちゃいけない。
絶対に自分の都合で動いてはいけない、と言うわけではなくバランスを取ってほしいと言うことですね。
修正箇所の多い作業もある程度規則的な作業ならば一括置換ソフトと言う手段があります。

そういう理由からのCSSを使ってセンタリングしましょうよ、と言うわけだったんですが…、
でもまぁそこを敢えてJavaScriptにするのならばなるべく互換性とか何とか配慮してくださいね。
ウインドウサイズを小さくしたとき横スクロールバーが出るのは注意ですよ！^^;

回答No.3

MAN_MA_RUI

えーっと、一応言いたかったのはですね、position:abusoluteを使ったということはCSSでページデザインをしていたのだからそれの問題を修正するのにはJavaScriptよりもCSSが適切でないかと言うことです。
というかCSSを使うのが嫌いと言う人はそうそういないでしょうがJavaScriptを使うのが嫌いな人は結構います。
CSSを無効にする人よりもJavaScriptを無効にする人のほうが比率はそれなりに高いでしょう。
と言うか人によってはCSSで出来ることをわざわざJavaScriptでやられるのを快く思わない人だっているかもしれません。
だからCSSではダメなのかと尋ねたわけなのですが、そこのところは同なのか、また特別な事情などあればそれを説明していただきたかったなと感じています。

補足

ページ自体は中央揃えでなくとも十分見れる状態なのですが、できれば中央揃えにしたい、と。しかしCSSをいじるとなるとかなり手間がかかってしまう作りなのです。ですからJavaScriptを入れている人だけでも中央揃えになるようにとのことを考えてのことでした。説明不足失礼しました。

回答No.2

leap_day

こんにちは

javascriptならこんな感じ？

p.s.
IEではstylesheetでbodyを100％にしていないと高さはセンタリングできません。
Operaではborderをつくってると左上に残像が残ることがあります
位置決めはブラウザの幅からコンテンツの幅を引いて半分にする感じです
あとIE,Operaでは全体の大きさが少し大きくなります（スクロールバーが出ます）
別の方法で
x = screen.width/2-200;
y = screen.height/2-200;
でもできますがこちらは画面サイズでのセンタリングになり、後ろの数値に微妙な調整が必要になります(下記とは違い、位置固定）

<script language="javascript">
<!--
window.onload=function() {
x = (window.innerWidth==undefined ? document.body.clientWidth : window.innerWidth)/2-100;
y = (window.innerHeight==undefined ? document.body.clientHeight : window.innerHeight)/2-100;

document.getElementById("main").style.left = ""+x+"px";
document.getElementById("main").style.top = ""+y+"px";
}

//-->
</script>

<style type="text/css">
#main {
position:absolute;
width:200px;
height:200px;
border:1px solid;
}
body {
width:100%;
height:100%
}
</style>

<div id="main">main contents</div>

まぁ、stylesheetで
div { margin:auto; width:***px; }や
body { text-align:center; }などで
センタリングするのが確実だとは思いますけど・・・

お礼

Script、詳しい説明ともにありがとうございます。
大変参考になりました！

回答No.1

MAN_MA_RUI

CSSでセンタリングできると思いますけどJavaScriptでないとダメなんですか？
http://www.mozilla.gr.jp/standards/webtips0004.html

お礼

情報ありがとうございます。
JavaScriptで外部化すると楽かなぁと…。