CSSでWebサイトをセンタリングさせる方法

2010/07/30

1年以上前の記事です。内容が古い可能性があります。

まあ、今さら感漂いますが一応自分に対しての覚書としてちゃんと残しておくことにしました。

僕の作るサイトは大概ウインドウがある程度大きくなるとセンタリングして表示させるようなデザインになっています。
いろいろ理由はありますが、スペースの無駄が嫌いなのと、シンメトリーが好きなのが主な理由。
かつてはTABLEタグでレイアウトして大本のTABLEタグに「align=”center”」を入れれば済んだことなのですが今となってはTABLEでのレイアウトなんてありえない時代。
ただ、これをCSSで実現するにはちょっとコツがいります。
以下その方法を解説します。

WEB

サイト全体をセンタリングするレイアウトを考えます。
<body>タグ配下に<div>タグを配置し、任意のID（ここでは「naiyo」にした）を設定します。
こんなかんじ。

↑↑ここから上省略↑↑ <title>無題ドキュメント</title> </head> <body> <div id="naiyo">内容 </div> </body> </html>

「naiyo」に対してCSSの設定をします。
ポイントは右マージン「margin-right」及び左マージン「margin-left」を「auto」にするところ。
こんなかんじ。

#naiyo { padding: 0px; width: 950px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; }

「margin-right」と「margin-left」以外は任意です。
ただし、「width」の指定がないとセンタリングにはなりません。

で、この配下にデザインされたパーツを置いていけばOKということです。
念のため簡単に作ったものを置いておきます。

■ センタリングテスト

- デザイン, 覚え書き

Comment

kurihara より:

2012年9月12日 3:37 PM

こんにちは。只今自身のホームページ制作に苦戦中の栗原と申します。こちらのウェブを見て私のトップページのｈｔｍｌにＣＳＳの設定を書き加えてみたもののなかなか思うようにセンタリングできません。
例えばサンプルページとして以下の中に素材写真の一枚を張り込んでみるとｈｔｍｌ記載は以下の様になりますがそこのどこへＣＳＳの設定を書き込めば良いのか教えて頂ければ幸いです。
現在のところホームページ制作にはビルダー13を使って作っています。試しにサンプルページを作ってビルダーの中のツール→インターネットプラウザでセンタリングを確認しているのですがうまくいかないという状況です。
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

返信
のりさより:

2012年9月12日 6:46 PM

> kuriharaさん
DIVに直接style属性があるのでこちらを削除してみてください。
↓ここから
style=”top : 50px;left : 50px;
position : absolute;
z-index : 1;
”
↑ここまで

返信
kurihara より:

2012年9月13日 10:08 AM

早速のご教授をありがとうございます。教えて頂いた部分を削除してブラウザで確認してみましたがやはりページ全体をセンタリング出来ず左端によったままでした。こちらにアップしましたｈｔｍｌの記述はテストページとして白紙のページに写真一枚を張り込んだだけの単純なぺーじですが以下の部分はこの貼りこんだ写真の位置関係の記述の様に思われます。この部分を削除すればページ全体を移動させることができるのでしょうか？
style=”top : 50px;left : 50px;
position : absolute;
z-index : 1;
”

返信
のりさより:

2012年9月13日 10:45 PM

CSSは外部ファイルにして読み込ませるようにしてください。
直接DIVに記述するのであれば、
――――――――――――
style=”top : 50px;left : 50px;
position : absolute;
z-index : 1;
”
――――――――――――
の部分を
――――――――――――
style=”padding: 0px;
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
”
――――――――――――
に変えてみてください。
具体的なCSSのプロパティに関しては申し訳ありませんがご自身で調べてみてください。

返信