サイト全体を上下中央配置にする方法

上下中央配置

サイト全体を包むdiv要素を上下中央配置にしたい!って声をちょこちょこ聞きますので解説をしていきたいと思います。

でも個人的に普通のWebサイトを上下中央にするのは好まないですよね...

フルFlashのサイトかや写真をメインに見せたいようなフォトギャラリー系のサイトなら良いと思うので今回は以前にも解説をしたlightview.jsを使ったPhoto Galleyのサイトをデモページとして作ってみました。

…ここからが続き

上下中央配置の解説

XHTML

<body>
<div id="contents">
<h1>...</h1>
<ul>
...
</ul>
<address>Copyright...</address>
<!-- / #contents --></div>

</body>

CSS

div#contents {
	width: 920px;
	height: 580px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -310px 0 0 -480px;
	padding: 20px;
}
  1. サイト全体の横、縦の幅を指定します。
  2. サイト全体を包むdiv要素にposition: absolute;をかけます。上記ソースで言うdiv#contentsです。
  3. top: 50%;とleft: 50%;で上と左の要素を中央配置にしています。
  4. 右の要素と左の要素を中央にする為に、コンテツの幅、高さの半分の値だけネガティブマージンを指定します。(この時padding領域も含めた値の半分にして下さい。)

これでサイト全体を上下中央配置に出来るので、中身の要素は好きにしてくれれば良いです。

Domo Page

Comments

MIYA

MIYA

この方法はブラウザの中央に配置させる為に、起点を中心にしている為今言われるようにウィンドウを小さくした際、中心が表示されてしまいます。

自分の知っている限りの知識ではarchmさんがおっしゃってるやり方は無理なような気がします…

力になれなくてすみません。

もしやり方が分かった際にはエントリーしたいと思います!

2009年03月10日 16:19

archm

archm

こんにちは〜

再度、詳しくご説明させて頂きます

Photo Galleyのサイトのデモページがありましたが、
http://www.css-lecture.com/template/2008/0804/

これでしたら、上下の巾をせまくしていきましたら、
Photo Galleyの文字等が消えていってしまいます...
(ノートパソコンの画面が小さい時を想定して下さい)
下部はかくれているだけで、スクロールバーで見る事が出来ますが
上部は消えて見えなくなってしまいます...

ですので、Photo Galleyの文字が画面上部の位置で止める事は
出来ませんでしょうか?


私の、HPは横に長いページを作っておりまして、
上下にたいして中央に配置をしたいと思っております
左右に対しては中央に配置は必要ありませんが、
御理解して頂けましたでしょうか?

では、よろしくお願いします

2009年03月10日 09:19

MIYA

MIYA

すみません…

やりたい事が理解出来ないのでアドバイスのしようがありません…

2009年03月09日 20:23

archm

archm

こんにちは

再度ご質問させていただきます

上下中央にのみ配置したいのですが
以下のタグのみでもいいでしょうか?

上下の巾を狭めていけば、上部が無くなってしまいますが、
上部に当たったら、上部のみ止まる様に出来ませんでしょうか?

よろしくお願いします

div#contents {
position: absolute;
top: 50%;
height: 540px;
margin-top: -270px;
}

2009年03月09日 18:54

MIYA

MIYA

ありがとうございます。

自分に答えられる範囲の事でしたら、答えていきたいと思いますので遠慮なく質問して下さい^^

2009年02月13日 14:42

archm

archm

ありがとうございます

まだまだ分からない事ばかりですが、
MIYA さんのサイトには、興味ある事がたくさん詰まっていて、
また分かりやすくて充実していますね...

これからも分からない事がありましらたご質問させていただいてよろしいでしょうか?

2009年02月13日 09:58

MIYA

MIYA

はじめまして^^
お褒めの言葉ありがとうございます☆

>div はSEOにはあまり良くない…
こちらに関してなんですが、自分はSEO専門って事ではありませんので、はっきりした事は言えませんが、自分の経験と情報から言うと関係ないと思ってます。

divには任意の範囲・グループ化と言う意味合いもありますし、現にCSSレイアウトでdivを使わずにサイトを作っている人は殆どいないと思います。
divを使った所でもちろん検索にもひかかってきますしね。

だからそこまで気にする必要はないと思いますよ。

2009年02月11日 14:39

archm

archm

初めまして〜

サイト全体を上下中央配置にする方法...
参考にさせて頂きました

CSS ビギナー、CSS リファレンス、ともにわかりやすそうで
初心者にとって、大変勉強になりそうです...

少しお聞きしたいのですが、div はSEOにはあまり良くないとの事をあるサイトに書かれてましたが、どうなのでしょうか?
http://adp.daa.jp/archives/000309.html

別の方法で、上下中央配置にする方法...が出来るのでしょうか?

分かりましたらよろしくお願いします〜

2009年02月11日 12:59

MIYA

MIYA

ご役に立ててよかったです。

わざわざコメントを頂きありがとうございます。

2008年09月22日 20:27

そんた

そんた

ありがとうございました。

フレームを使いたくなかったので、ご紹介いただいた方法を使い、完全に問題が解決しました。
助かりました。

2008年09月19日 10:53

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article