サイト全体を上下中央配置にする方法
- Category ：
- CSS リファレンス
サイト全体を包む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;
}
- サイト全体の横、縦の幅を指定します。
- サイト全体を包むdiv要素にposition: absolute;をかけます。上記ソースで言うdiv#contentsです。
- top: 50%;とleft: 50%;で上と左の要素を中央配置にしています。
- 右の要素と左の要素を中央にする為に、コンテツの幅、高さの半分の値だけネガティブマージンを指定します。（この時padding領域も含めた値の半分にして下さい。）
これでサイト全体を上下中央配置に出来るので、中身の要素は好きにしてくれれば良いです。
Comments
この方法はブラウザの中央に配置させる為に、起点を中心にしている為今言われるようにウィンドウを小さくした際、中心が表示されてしまいます。
自分の知っている限りの知識ではarchmさんがおっしゃってるやり方は無理なような気がします…
力になれなくてすみません。
もしやり方が分かった際にはエントリーしたいと思います！
こんにちは〜
再度、詳しくご説明させて頂きます
Photo Galleyのサイトのデモページがありましたが、
http://www.css-lecture.com/template/2008/0804/
これでしたら、上下の巾をせまくしていきましたら、
Photo Galleyの文字等が消えていってしまいます...
（ノートパソコンの画面が小さい時を想定して下さい）
下部はかくれているだけで、スクロールバーで見る事が出来ますが
上部は消えて見えなくなってしまいます...
ですので、Photo Galleyの文字が画面上部の位置で止める事は
出来ませんでしょうか？
私の、HPは横に長いページを作っておりまして、
上下にたいして中央に配置をしたいと思っております
左右に対しては中央に配置は必要ありませんが、
御理解して頂けましたでしょうか？
では、よろしくお願いします
すみません…
やりたい事が理解出来ないのでアドバイスのしようがありません…
こんにちは
再度ご質問させていただきます
上下中央にのみ配置したいのですが
以下のタグのみでもいいでしょうか？
上下の巾を狭めていけば、上部が無くなってしまいますが、
上部に当たったら、上部のみ止まる様に出来ませんでしょうか？
よろしくお願いします
div#contents {
position: absolute;
top: 50%;
height: 540px;
margin-top: -270px;
}
ありがとうございます。
自分に答えられる範囲の事でしたら、答えていきたいと思いますので遠慮なく質問して下さい＾＾
ありがとうございます
まだまだ分からない事ばかりですが、
MIYA さんのサイトには、興味ある事がたくさん詰まっていて、
また分かりやすくて充実していますね...
これからも分からない事がありましらたご質問させていただいてよろしいでしょうか？
はじめまして＾＾
お褒めの言葉ありがとうございます☆
＞div はSEOにはあまり良くない…
こちらに関してなんですが、自分はSEO専門って事ではありませんので、はっきりした事は言えませんが、自分の経験と情報から言うと関係ないと思ってます。
divには任意の範囲・グループ化と言う意味合いもありますし、現にCSSレイアウトでdivを使わずにサイトを作っている人は殆どいないと思います。
divを使った所でもちろん検索にもひかかってきますしね。
だからそこまで気にする必要はないと思いますよ。
初めまして〜
サイト全体を上下中央配置にする方法...
参考にさせて頂きました
CSS ビギナー、CSS リファレンス、ともにわかりやすそうで
初心者にとって、大変勉強になりそうです...
少しお聞きしたいのですが、div はSEOにはあまり良くないとの事をあるサイトに書かれてましたが、どうなのでしょうか？
http://adp.daa.jp/archives/000309.html
別の方法で、上下中央配置にする方法...が出来るのでしょうか？
分かりましたらよろしくお願いします〜
ご役に立ててよかったです。
わざわざコメントを頂きありがとうございます。
ありがとうございました。
フレームを使いたくなかったので、ご紹介いただいた方法を使い、完全に問題が解決しました。
助かりました。