CSSでサイトを画面の中央にもってくる方法　|　楽してプロっぽいデザイン

Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

CSSでサイトを画面の中央にもってくる方法

例えば800×600ぐらいのサイトを作った時、1024×768の画面サイズでみるとほぼほぼ中央に位置し、見やすいですが、1280×1024の画面サイズで見ると上に詰まったような形になり、折角のサイトがこじんまりしてしまいます。ポートフォリオサイトhttp://forty-n-five.boy.jp/として私も1000×600のサイトがありますが、当初はこのような感じでした。が…、CSSを少し追加するだけで、どんな画面の大きさでも中央に配置することができ、随分見やすくなりました。ソースをご紹介します。

先日歯医者で歯石を取ってもらいました。かなり、がりがりやられて多少痛くて血も出ましたが、終わったら意外とすっきり。歯石は自分では取れないみたいなので定期的に行ったほうががいいみたいです。

CSSを以下のように修正

CSSでサイトを画面の中央にもってくる方法

.container {
position: absolute;
top:  50%;
left: 50%;
width:  800px;
height: 600px;
margin-left: -400px;
margin-top:  -300px;
 }

.container部分は任意です。メインのdivの
width:800px;やheight:600px;はご自身のサイトに合わせて調整してください。それに伴ってmargin-left、margin-topの値も変化します。margin-left、margin-topはwidth、heightの調度半分になるように設定します。これで完成です。

タグ:【　Tips　】

| パーマリンク | コメント (0) | トラックバック (0) |

楽してプロっぽいデザイン|Forty-N-Five Blog Trackbacks

このエントリーのトラックバックURL

CSSでサイトを画面の中央にもってくる方法の前後の記事

前の記事は「ブログ上にソースを記述する際、美しく表示する方法」

次の記事は「MTPaginate部分のページナビゲーションをCSSでカスタマイズする方法」

Name:
Mail:
URL:
	この情報を登録しますか?

Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。