ボックスを上下左右画面中央に

08月04日（土）00:00

category: CSSテンプレート, レイアウト

ウィンドウを小さくした時に左上が見えなくなってしまうことに関する対処を追記しました。

何か、こういう立場のお仕事してる人とか、初心者のススメでFirefoxを使え！とかまずはFirefoxで確認すべしとか聞きますが、ボクはIE派です。
Firefoxに乗り換えようと頑張った時期もあったんすが、どーも合わない感じだったんすよね。
重さとかスクロールの仕方とかが、、、
だから確認もIEが先だったりします。
まーコレはボクのスタンスなんで、どーでもいいんすが。

ちなみにこのサイトのアクセス解析を見てると、IEとFirefoxの比がおおよそ、5:4っていう普通のサイトじゃありえない結果が出ます。こんなブログ書いてると当然っちゃ当然かもしれませんが（笑

さて本題にでも。
Tipsでも充実させたいと思ったので、特に目新しい内容ではございませんが、div要素とかのボックスを左右の中央、そして上下も中央にしたレイアウトのご紹介です。

使いどころがあんまり浮かびませんが、404ページとか、ログイン画面とか、内容が少ないページなどちょっとしたキャンペーンページとかで使えるかもわかりません。

では、追記にて詳細をば。

---- こっから続き

サンプルとダウンロード

せつめい

さっくり説明すると、positionでセンターにして、ボックスサイズの半分をmarginでずらしてあげるって感じです。
わっか本にも書いてある気がしますので、そちらをお読みになって頂くとこちらで読むより（ボクたちが）素敵だと思います。えぇ。

何はともあれ主要部分のCSSをば。

#contents {
	position:absolute;
	top:50%;
	left:50%;
	width:480px;
	height:140px;
	margin:-80px 0 0 -250px;
	padding:10px;
	background:#F6F6F6 url(bg_contents.gif) repeat-x;
	color:black;
	text-align:center;
}
body > #contents {
	height:auto;
	min-height:140px;
}

太字部分がとっても重要な部分で、後は装飾がメインです。
このテクニックをやる上で、ボックスのwidthとheightの指定は必須になってきます。
height指定せずにうまいこと出来たらかなり使い勝手もあがるかと思いますが…

なにはともあれ、positionの値を絶対配置を意味するabsoluteを指定。その後に、topプロパティとleftプロパティの値にそれぞれ50%を指定。
これで、ボックスの左上が画面中央に来るので、ちゃんと真ん中にするために、ボックスサイズの半分の値だけネガティブマージンを指定します。
今回はpaddingなんぞを指定しているのでその分を引いた値をwidthとheightに指定してますが、paddingを指定していなければ、widthの値は500px、heightの値は160pxとなりまする。

子セレクタを使って、heightの値をautoにしているのは、文字サイズをおっきくした時にはみ出さないようにしております。
min-heightは最小の高さを決めてる感じです。
IE6無視してたら、子セレクタとか使わずに、min-heightだけ#contentsに指定すればOKです。さすがに無視できませんが。。。

逆にボックスをかっちり固定したい場合は、子セレクタのとこは消して、#contentsにoverflow:auto;と指定することで、スクロールバーがheightで指定した値より大きい場合に出る感じになります。
どっちかというとこの使い方をしたいって人が多いかもわかりません。

↓こんな感じです。

#contents {
	position:absolute;
	top:50%;
	left:50%;
	width:480px;
	height:140px;
	margin:-80px 0 0 -250px;
	padding:10px;
	background:#F6F6F6 url(bg_contents.gif) repeat-x;
	color:black;
	text-align:center;
	overflow:auto;
}

だいたいこんな感じです。
個人的なご意見でございますが、小さなボックスを真ん中に配置して主要コンテンツを見せることはオススメ出来ません。
画面領域の狭さに苛っとさせ、スクロールバーにも苛っとする可能性が高いからです。

追記：VGA環境がベースラインに含まれている場合、この方法は使わない方が良いと思います。コメント2参照

ご利用は計画的に。

XHTMLに関しては、#contentsってid名のついたdiv要素があればXHTMLはさほど重要ではございませんが、主要部分のXHTMLソースは以下のように。

<div id="contents">
<h1>404 Not Found</h1>
<p>指定... </p>
<ul>
<li>URL...</li>
<li>指定...</li>
</ul>
<p class="pageBack"><a href="/">&laquo;&nbsp;CSS...</a></p>
<!-- / #contents --></div>

いつものサンプルに比べたらちょっとだけキレイなのは気のせい。深い意味は有りません。

あ、でもサンプルがキレイだと試してみたくなる可能性が高くなるから出来るだけサンプルもキレイなほうが良いよ。と誰かに言われたことがあります。
とはいえ、サンプルをキレイにするってことは、ソレを実現するには不要な指定を増やさないといけないのでいわゆるノイズが増えてしまう。
難しいところでは有るけど、出来るだけキレイにしたいっすね。（ってもデザイナーじゃないから本職にはかないませんが）

---
何か文字コードがおかしいような。。。サンプルをlint通すと化ける…なんでやー；

8/4 00:30頃の追記

こっから修正版です。

参照：CSS で画面中央表示のサンプル | [ VERSION510 ]

サンプルとダウンロード

せつめい

上記だけだと、ウィンドウを小さくした場合や、VGA環境での閲覧の際に左上が見えなくなってしまうという問題があるので、ソレの対応バージョンになります。

参照先でもそうですが、ボクも考えてみたもののIE6には対応できていません。
誰か、すんばらしーアイディアをください！

詳細に関しては参照先を読んでいただければ何ら問題ないのですが、ここでも一応説明を。

追加されたんは、body要素とhtml要素にheight:100%;を指定し、body要素にposition:relative;とmin-width、min-heightです。

以下にCSSをば

CSS

body {
	position:relative;
	height:100%;
	min-width:500px; 
	min-height:160px;
	background:white;
	font-size:74.5%;
	color:white;
	line-height:1.5;
}
 
html {
	height:100%;
	overflow-y:scroll;
}

例によって太字の部分が重要なポイントです。
#contentsの変更はありません。body要素とhtml要素の指定にごにょごにょっと追加した感じです。

では、良きCSSLifeを。

各種SBMに追加