【CSS】コンテンツをど真ん中に置く方法。

かわんです。

Webサイトを作るとき、コンテンツを置く場所を考えますよね。

左詰めにするのか右詰めにするとか・・・。

ここで解説するのは、左右のマージンを同じにして表示させるという事です。

早速行ってみます。

HTMLから

まずはHTMLからです。

<article id="contents">
<h2>タイトル</h2>
<p>テキスト</p>
</article>

「id」は「contents」と名付けました。

「contents」は好きなモノでOKです。

ただ、「id」なので、他のモノと被ってはいけません。

CSS

次にCSSです。

#contents {
    width: 980px;
    margin: 0 auto;
  }

「width:」で幅を指定しています。ここでは「980px」にしています。

制作しているサイトの幅を指定します。

ここからがポイントです。

左右のマージンを同じにしてど真ん中に置きたいときは、これが重要です。

「margin: 0 auto;」

上下のマージンは0、左右はauto。これでど真ん中になります。

なお、「margin: 0 auto;」の意味は、

  • 0:上下のマージン
  • auto:左右のマージン

という意味です。

なお、例えば

margin:100px auto;

にしても大丈夫みたいです。

「そう言えば試したことなかったな」って思って、書いてみたらちゃんと大丈夫でした。

ちなみに、上下のマージンは100px、左右のマージンはautoですね。

注意点

今回は僕の環境でテストしたモノですので、みなさまにとっても上手く行くかは分かりません。

よって、作業する前にバックアップを取ってください。

何かあっても僕ではサポート出来ないので自己責任でお願います。

さいごに

今回は、ちょっと基本的なことをお話ししました。

左右のマージンを同じにしてど真ん中に置くデザインは割とされています。

もし、左右のマージンを同じにしたい場合はお試しください。