ページ全体をセンタリングさせよう

サンプル

前回はナビゲーションメニュー周りのリンクの設定をしました。 ですが、上記の画像のように今のままではページ全体が左に寄ってしまっています。

そこで今回は最後の仕上げとして、ページ全体を常にブラウザの中央に表示(センタリング)させるようにしましょう。

marginを使用してページ全体をセンタリングする

margin:autoの解説

ページ全体をセンタリングするには、marginプロパティを使用します。 marginプロパティはボックス要素のマージン(余白)を設定するためのプロパティですが、値に「auto」を設定すると状況に応じてマージンのサイズが自動的に調整されるようになります。

例えば、左右のmarginをautoに設定すると左右のマージンは同じサイズになります。 ということは、結果としてそのボックス要素がセンタリングされることになります。

まあ、簡単にいうとページ全体を囲んでいるボックス(この場合div)に対して「margin: 0 auto」を設定してあげると、ページ全体の左右のマージンが同じサイズになり、結果的に中央表示されるようになるというわけです。 ちなみに「margin: 0 auto」となっていますが、左の「0」の部分は上下のマージンです。 横の「auto」が左右のマージンとなっています。 なのでこの場合「0」でなくても大丈夫です。

あと左右のマージンが「auto」になっているので、ブラウザ(ウィンドウ)がどんなサイズになっても常にページ全体は中央表示(センタリング)されます。 では実際に記述してみましょう。

左右のマージンをautoにする

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<title>html・css入門!初心者でも見るだけで自由自在に</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="page">

<header>
<p>まずは簡単なwebページを実際に<span class="br">作って見ましょう!!</span></p>
</header>
<div id="menu">
<ul>
   <li><a href="sample.html">ホーム</a></li>
   <li><a href="sample1.html">遊び</a></li>
   <li><a href="sample2.html">仕事</a></li>
   <li><a href="sample3.html">パソコン</a></li>
   <li><a href="sample4.html">アフィリエイト</a></li>
 </ul>
</div>
<div id="main_contents">
<h1>「2016年07月」一覧</h1>

<div class="text-img">
 <div class="text-right">
   <h2>狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ</h2>
     <p class="text">スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
     この記事ではスマホ</p>
 </div>
 <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">
</div>

<!-- 途中省略 -->

</div>
<footer>
<p>Copyrightc 安月給さよなら!本当に稼げるのか実験記 All Rights Reserved.</p>  
</footer>

</div>

</body>
</html>

上記のhtmlソースでは、id名「page」が付いているdivでページ全体を囲んでいます。 ですのでこの部分に「margin:auto」を設定してあげるとページ全体が中央表示されるようになります。

ではcssファイルに下記のように記述してみましょう!

#page {
  width: 800px;
  margin: 0 auto;
}

※このページはホームページ作成ガイドの「ホームページ作成講座【CSS実践編】」の続きです。

記述したら内容を保存して、ブラウザで表示してみましょう。

センタリングされた例

上記のようにページ全体がセンタリングされるのが確認できます。

おまけ

サンプル

一応これで終了なんですが、以前掲載した完成イメージのサンプルとちょっと違いますよね。 ヘッダーの下とフッターの上に余白が空いてませんし。

なので細かい設定を少し紹介していきますね。

まずヘッダーの下とフッターの上の余白なんですが、単純にheaderにmargin-bottomを設定してあげれば余白は空きます。 ですがfooterにmargin-topと設定しても余白を空ける事はおそらくできません。

これはマージンの相殺というものが起きているからです。

※マージンの相殺についてはmarginの使い方のページのマージンの相殺の部分を参照下さい。

説明すると長くなるので省略しますが、これを回避するためにまずdivでfloatを使用した部分(ナビゲーションとメインコンテンツ)を囲みます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<title>html・css入門!初心者でも見るだけで自由自在に</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="page">

<header>
<p>まずは簡単なwebページを実際に<span class="br">作って見ましょう!!</span></p>
</header>

<div id="main">

<div id="menu">
<ul>
   <li><a href="sample.html">ホーム</a></li>
   <li><a href="sample1.html">遊び</a></li>
   <li><a href="sample2.html">仕事</a></li>
   <li><a href="sample3.html">パソコン</a></li>
   <li><a href="sample4.html">アフィリエイト</a></li>
 </ul>
</div>
<div id="main_contents">
<h1>「2016年07月」一覧</h1>

<div class="text-img">
 <div class="text-right">
   <h2>狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ</h2>
     <p class="text">スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
     この記事ではスマホ</p>
 </div>
 <img class="img-left" src="mint160820.jpg" width="120" height="80" alt="">
</div>

<!-- 途中省略 -->

</div>

</div>

<footer>
<p>Copyrightc 安月給さよなら!本当に稼げるのか実験記 All Rights Reserved.</p>  
</footer>

</div>

</body>
</html>

そしてそのdivに対して下記のように記述します。

#main:after{
  content:"";
  clear:both;
  display:block;
}

これでマージンの相殺が起きなくなりますので、しっかりと余白を空ける事ができます。 そして新たにdivを追加したので、わざわざフッターとヘッダーに対してmarginを設定しなくても、追加したdiv部分にmarginを設定すれば余白が空きます。

#main{
  margin:40px 0;
}

/*フッター下に余白が空く場合は下記を指定*/
footer p{margin:0;}
完成例

ブラウザで確認して見ると、上記のようになります。 これで一応完成です!!

実際作って見てどうでしたでしょうか?? 「余裕だった!」って言って頂けると嬉しいんですが、実際所々わけわかんなくなりますよね。 でも誰でも最初はそんな感じなので、まずは部分的にcssでデザインを変えてみたりしてはどうでしょうか??

実際に触ってみることでドンドン慣れていくので、是非やってみて下さいね(^^♪

次回からはHTML5に対応したホームページ作成方法を紹介していきますね!