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

サイト全体センタリング方法

投稿日 更新日

by Chiharu Morita

今、あなたのホームページはブラウザの左側に配置された状態ですね？

もう大丈夫です。すぐに解決します。

以下にホームページ全体を中央に配置する方法を説明します。

このCSSを使います。

margin:0 auto;

下コードのHTMLを例に説明します。




	

		～内容は省略～

上のHTMLをご自分の環境と合わせてください。

つぎに、CSSの記述です。


body{
  width:100%; /*ページ全体の幅は100%と指定する*/	
  text-align:center; /*ページ全体を中央揃えにする*/
}
#wrap{ 
  width: 960px;	   /*全体の幅を指定する*/  
  margin: 0 auto;    /*マージンの指定をする、ブラウザ対策*/
  text-align:left;   /*全体を左揃えにする。*/
}

marginやpaddingがよくわからない方やCSSによる配置がよくわからない方はちょっと難しいかもしれませんがこちらの記事をみてください。

「CSSのボックスによる配置方法の基本」

上記コードの説明

まず、bodyにtext-align:centerを指定する。次に<div>タグで作ったボックスにtext-align:leftを指定するとホームページが中央に配置されます。

しかし、ブラウザによって処理の仕方が違います。margin（マージン)による指定をすると確実に中央に配置できます。

そこでmargin: 0 auto;を書くことで、中央に配置することができます。

もう少し詳しく説明すると、
#wrappでwidthを指定した<div id=”wrapp”>を中央に配置させたいのだから、このボックスにCSSを適用して、中央配置にします。

margin:0 auto;とはこのボックスの上下左右のスペースのことです。

margin-left: auto;
margin-right: auto;

と、書いても良いです。

この記述をすることで、ほとんどのブラウザに対応することが出来ます。よくわからない方は「CSSボックスによる配置方法の基本」をご覧ください。

完成イメージ

完成すると左右のスペースが同じ幅で、中央に配置されます。
サイトセンタリング方法

応用編2カラムの配置方法

２カラムにしてみましょう。




  

    

      〜内容は省略〜
    

    

      〜内容は省略〜
    
		
  





body{
  width:100%; /*ページ全体の幅は100%と指定する*/	
  text-align:center; /*ページ全体を中央揃えにする*/
}
#wrap{ 
  width: 960px;	   /*全体の幅を指定する*/  
  margin: 0 auto;    /*マージンの指定をする、ブラウザ対策*/
  text-align:left;   /*全体を左揃えにする。*/
}
#wrap .left{
  width:300px;
  float:left;
}
#wrap .right{
  width:660px;
  float:right;
}

センタリングした#wrapの中に<div></div>を作り、CSSの「float:left;」「float:right;」で左右にコンテンツエリアを配置します。

あとは「border」を入れたり、「background-color」で配色したり、「width」でコンテンツの幅を変えたり、CSSで装飾していきます。

当サイト内には初心者向けの制作記事がありますので、参考にしてください。

カテゴリー ホームページ作成テクニック