CSSで中央配置(センターリング)する方法

CSSで中央配置(センターリング)する方法

CSSで中央配置の仕方をちゃんと理解していない人って案外いるみたいなので、詳しく解説しようかなーって思います。

div要素のようなブロックレベル要素をセンタリングするには「text-align」は使いません。「text-align」プロパティはインライン要素の位置揃えを指定するためのものですよ。

…ここからが続き

正しいセンタリング方法

XHTML

<div class="main">
	<div>
	<h2>ブロックレベル要素をセンタリング</h2>
	<p>ブロックレベル要素</p>
	</div>
</div>

CSS

.main {
	width: 100%;
	border: 1px solid #000;
}
.main div	{
	width: 80%;
	border: 1px solid #FF0000;
	margin: 0 auto;
}

センターリングしたい要素に「margin: 0 auto;」と指定するのが正しい方法です。
※上記ソースでborderを使っているのは分かりやすくする為だけです。

IEへの対策

IE5.5やIE5ではautoが対応になっていないので、対応させる為に下記ソースの用にします。

CSS

.main {
	width: 100%;
	border: 1px solid #000;
	text-align: center;
}
.main div	{
	width: 80%;
	border: 1px solid #FF0000;
	margin: 0 auto;
	text-align: left;
}

これをしておけば全てのブラウザでセンタリング表示出来ます。IE5.5やIE5の事はもう考えなくていいと思いますが、今はまだ指定しておいてもよいと思います。

サイト全体を中央に配置にする

最近Webサイトがセンタリングされているのって凄く多いと思うんですが、せっかくここまで解説したのでその例でも作っておきます。

サイト全体を包んでいるdiv要素のwrapperと言うidで包んだとして説明したいと思います。

XHTML

<body>
<div id="wrapper">
<h1>サイト全体を中央に配置にする</h1>
<p>サイト全体を中央に配置にする為のテキスト</p>
<!--/ #wrapper--></div>
</body>

CSS

body {
	text-align: center;
}
div#wrapper	{
	width: 800px;
	margin: 0 auto;
	text-align: left;
	border: 1px solid #FF0000;
}

Track Back

中小企業のWEB作成実験

サイト全体を中央配置

CSS LectureというMIYAさんのブログにCSSでサイト全体を中央配置する方法が乗っていたので、参考にしてやってみた。

by 中小企業のWEB作成実験  

Comments

studioはっち

studioはっち

とても参考になりました。
これからもっとCSSについて勉強しようと思えました。

2010年05月17日 12:08

kazu

kazu

簡潔に書いてあり、非常に分かりやすくて参考になりました。ありがとうございます。

2010年03月05日 20:59

MIYA

MIYA

akamotoさん。ありがとうございます!今後も参考になれるような記事をかけるように頑張りたいと思います!

2009年09月14日 10:39

akamoto

akamoto

大変参考になりました。
cssによるセンタリングを色々と調べましたがこちらのサイトによる解説が一番分かりやすかったです。

2009年09月14日 01:19

KEISUKE

KEISUKE

MIYAさん
度々有難うございました。
まずはCSSの部分を基礎からもう少し確り勉強したいと思います。
今後も当サイトを参考にさせていただきます。

2009年06月12日 12:20

MIYA

MIYA

そういう現象は聞いた事がないのではっきりとは言えませんが、自分は原因個所をひとつ、ひとつ、探しますね。

#my_body 内に書いてある要素を全部消して検証し、中央に配置されるか試して、そこで中央に配置されるなら、内部の要素に原因がある事が分かるので、一つ、一つ試しては原因をつきとめるしかないですね…

こういうバグを探す事も自分は勉強だと思うので頑張って下さい。

2009年06月11日 21:12

KEISUKE

KEISUKE

MIYAさん、回答ありがとうございます。
基本的にはサイトの中央に配置されるようになりました。
しかし、画面の大きさと解像度で左に寄ったり、左右に伸びたりしてしまいます???
ネットカフェでチェックしたところ、
そこのブラウザはIE8で
Dispは19インチワイドのWXGA(1440x900)です。
基本的に左右に伸びて表示されてしまい(画像も含めて)
解像度1024x768だと中央に配置されますが、
解像度1152x864に上げると左のほうに寄ります。
他のサイトは中央に配置されているのに???
なぜなんでしょう?
ご迷惑をおかけし、申し訳ありません。
ぜひアドバイスお願いします。

2009年06月11日 15:46

MIYA

MIYA

KEISUKEさん。

body 要素に text-align: center; をつけたらサイト全体をセンタリングする事が出来ますよ。
その際サイト全体を包んでいる #my_body に text-align: left; をを付けておいて下さいね。

2009年06月10日 21:52

KEISUKE

KEISUKE

ウェブ制作初心者です。
理解力がなくてすみません。。
現在制作中のサイトのCSSを以下のように書いてます。
現在は左側に寄ってますが、
サイト全体をセンタリングするのには、どのようにすればよろしいでしょうか?

#my_bodyでサイト全体を包んでます。

body {
margin: 0px;
padding: 0px;
}
#my_body {
margin:0 auto;
width:850px;
_width:900px;
}
div.title {
float: left;
width: 150px;
_width: 200px;
padding: 16px;
}

div.intro {
margin: 0px 0px 0px 182px;
_margin: 0px 0px 0px 232px;
padding: 32px 8px 8px 8px;
_padding: 8px;
}

div.intro h1 {
font-size: 70%;
font-family: "verdana",sans-serif;
font-weight: normal;
color: #660000;
}

div.shikiri {
clear: both;
}

・・・・・・・

すみませんが、是非教えてください。

2009年06月10日 15:52

MIYA

MIYA

木村さん

わざわざコメントを頂きありがとうございます^^
今後とも参考になれる記事をかけるように頑張りたいと思います!

2009年04月09日 02:15

木村

木村

たいへん参考になりました。
うまくセンタリングできました。
ありがとうございます。

2009年04月08日 15:26

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