iPentec.com  /  Doc  /  CSS

目次

コンテンツを表示する枠をページの中央に配置する - CSS

コンテンツを表示する枠をページの中央に配置するHTMLのコードを紹介します。

概要

Webページでコンテンツを表示する枠をページの中央に表示し左右にな痔だけの余白を取りたい場合があります。この記事では、コンテンツを表示する枠を中央に配置するコードを紹介します。

実装例1: 中央に枠を表示するシンプルな例

コード

下記のHTMLとCSSファイルを作成します。
CenteringFrame.css
body {
    background-color:#C0C0C0;
    text-align:center;
    margin:0 0 0 0;
    padding: 0 0 0 0;
}

.ContentsFrame {
    background-color:#FFFFFF;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}
CenteringFrame.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="CenteringFrame.css" />
</head>
<body>
  <div class="ContentsFrame">
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
    コンテンツです。<br />
  </div>
</body>
</html>

解説

max-width:プロパティを設定し、margin-left:auto, margin-right:auto を設定し上位のクラスで text-align:center を指定すると、わぃが中央に配置されます。max-widthプロパティが指定されている場合は、ウィンドウ幅がmax-widthプロパティの幅以下になると左右の余白が無くなり、ウィンドウ幅いっぱいに表示されます。max-widthではなくwidthプロパティを指定した場合、widthプロパティ以下になると左右方向のスクロールバーが表示されます。

上記のHTMLファイルを表示します。下図の画面が表示されます。max-widthプロパティで指定した幅より枠は広がらないため、左右に余白が開きます。


ウィンドウ幅を縮めると左右の余白が減っていきます。枠はページの中央に表示されていますので、左右の余白の幅は同じになります。


さらにウィンドウ幅を縮めると左右の余白が無くなります。


さらにウィンドウ幅を狭めるとコンテンツが表示されている枠自体の幅が狭まります。枠の幅が狭まるため横方向のスクロールバーは表示されません。

実装例2: 常に左右に指定した余白を表示する動作にする

先の実装で中央にコンテンツの枠を表示できましたが、ウィンドウ幅を狭くすると、左右の余白が無くなってしまします。ウィンドウ幅を狭くした場合でも左右の余白を表示するコードを紹介します。

コード

下記のHTML, CSSを作成します。
CenteringFrame2.css
body {
    background-color: #C0C0C0;
    text-align: center;
    margin: 0 0 0 0;
    padding-left: 5%;
    padding-right: 5%;
}

.ContentsFrame {
    max-width: 800px;
    margin-left:auto;
    margin-right:auto;
    padding: 0;
    padding: 0;
    text-align: left;
    background-color: #FFFFFF;
}
CenteringFrame2.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="CenteringFrame2.css" />
</head>
<body>
    <div class="ContentsFrame">
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
    </div>
</body>
</html>

解説

外側の枠となるbodyタグにpaddingプロパティを設定することで内側の枠との間に余白を開ける動作にします。今回の例ではpadding-left, padding-rightを5%に設定していますので、ウィンドウ幅が広い場合は中央にコンテンツの枠が表示され、ウィンドウ幅を狭めていき、ウィンドウ幅が800ピクセル以下になると左右に5%の余白を開けながら中央のコンテンツの枠が狭まる動作になります。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。




ウィンドウ幅が狭まると、左右に5%の余白が開いた状態で中央の枠が縮みます。


実装例3: 常に左右に指定した余白を表示する動作にする 入れ子にして3枠利用する場合

先の実装でウィンドウ幅を狭くした場合でも左右の余白を表示するコードを紹介しましたが、コンテンツの枠の設定をシンプルにしたい場合があります。ここでは3つのタグを入れ子にして実装する場合のコードを紹介します。

コード

下記のHTML, CSSを作成します。
CenteringFrame.css
body {
    background-color:#C0C0C0;
    text-align:center;
    margin:0 0 0 0;
    padding: 0 0 0 0;
}

.ContentsFrameOuter {
    max-width: calc(800px + 10%);
    padding-left: 5%;
    padding-right: 5%;
    margin-left: auto;
    margin-right: auto;
    /* background-color: #808080;*/
}

.ContentsFrame {
    padding: 0;
    padding: 0;
    text-align: left;
    background-color: #FFFFFF;
}
CenteringFrame.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="CenteringFrame.css" />
</head>
<body>

  <div class="ContentsFrameOuter">
    <div class="ContentsFrame">
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
      コンテンツです。<br />
    </div>
  </div>
</body>
</html>

解説

内側のdiv枠はmargin, paddingを設定せず、外側のdiv枠でpadingを指定します。marginはautoを指定することでページの中心に枠が表示されます。枠全体の幅は枠の幅にpaddingの幅を加えたものとなるため、今回の例では枠の幅800ピクセルに左右それぞれ5%の余白を足した、800px + 10% の幅を指定します。
cssでピクセルと%を計算するcalc関数についての詳細はこちらの記事を参照してください。

表示結果:動作確認

動作を確認するため、ContentsFrameOuter のbackground-colorを設定して、上記のHTMLファイルを表示します。下図の画面が表示されます。


ウィンドウ幅を狭くすると、左右の幅が縮まります。


さらに狭めると薄い灰色の余白が無くなります。


さらにウィンドウ幅を狭めても左右に余白が残ったままとなります。余白の横幅はウィンドウ幅の5%になります。



表示結果

動作の状況を分かりやすくするために、先の例では背景色を変更しましたが、背景色を変更しないと下図の見栄えになります。





ウィンドウ幅を狭くしても左右に余白が入ります。


著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

掲載日: 2019-01-13
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.