HTML，ページの中央表示と，CSSの「display」の意味

HTMLでコンテンツをページの中央に配置する際に，私はよく

lang
1<body>
2<table align="center">
3    <tr>
4        <td>コンテンツ</td>
5    </tr>
6</table>
7</body>

といった感じで書いていましたが，HTML5のこの時代，おそらくこの書き方は時代遅れでしょう．
Webでサンプルを探していると，divなどで中央寄せにすると書いてあるサイト様が有りますが，これはどのようにしているのでしょうか？

デザイン的には，以下の様な形にしたいのです．
中央の白い背景の部分に，上から左寄せで文字や画像などのコンテンツが並びます．

![![イメージ説明]WIDTH:600

さらにここで，CSSの「display」について．
私が最初に思いついたのが，「ああ，CSSにdisplayがあって，その要素に『table』があるじゃん！」と思い，

lang
1<div style="display: table; width: 80%; background-color: #F6FFF6">
2   <div style="display: table-cell; background-color: #fff">
3     コンテンツ
4   </div>
5</div>

のようにしてみたのですが，これまたうまく行きません．

上記のイメージ画像の様にdivなどでHTMLを組む方法はあるのか，
また，それはどのように行うのか．
cssのdisplay要素は一体何なのか？
どのように，どのようなときに使えばいいのか．

ご存じの方がいらっしゃいましたら，ご教授願います．
よろしくお願いいたします．

行動規範の内容に同意します

回答3件

ベストアンサー

display:tableは書いてあるそのままの意味で言うと
とある要素をテーブル要素として扱いますよ～という意味で、
レイアウトを中央に合わせるためのものではありません。

lang
1ソースA
2<div style="display: table; width: 80%; background-color: #F6FFF6">
3  <div style="display: table-cell; background-color: #fff; width: 50%;">
4    あああ
5  </div>
6</div>

こちらは以下（ソースB）と同じ意味になります。

lang
1ソースB
2<table style="width: 80%; background-color: #F6FFF6">
3  <tr>
4    <td style="background-color: #fff; width: 50%;">
5      あああ
6    </td>
7  </tr>
8</table>

※ソースBで黒い枠線が出るのは
cellpadding、cellspacingが設定されていないからです。

なので書き方の正解としては前の方々のいうとおり、

lang
1<div style="background-color: #F6FFF6;">
2  <div style="background-color: #fff; width: 50%; margin: 0 auto;">
3    あああ
4  </div>
5</div>

となります。

autoが「自動で計算」のというのは、
上のソースで言うと、ウィンドウ幅に対して50%幅のdiv要素があり、残り50%の余白ができます。
margin-right: auto だけ書くと、50%全てがそのままmarginにあたるので、
右に50%の余白を取る＝左寄せ

同じく
margin-left: auto だけ書くと、
左に50%の余白を取る＝右寄せ

両方書くと、半分ずつ余白を取るので
左右に25%ずつ余白を取る＝中央寄せとなるのです。

またdisplayの存在意義ですが、
これは、本来の要素の表示形式を変更するために存在します。

状況により本来インライン要素であるタグ（<a><span>など）をブロック要素に変えたり
その逆にブロック要素（<div><p><li>など）をインライン要素行ったりします。
こうすることでHTMLの表記基準（W3C）を逸脱せずに自由なレイアウトを実現しやすくなります。

lang
1例）横並びのメニューを実現
2<ul>
3  <li style="display:inline; margin-right: 1em;">メニュー1</li>
4  <li style="display:inline; margin-right: 1em;">メニュー2</li>
5  <li style="display:inline;">メニュー3</li>
6</ul>
7
8例）ブロックを丸ごとリンクにする（テキストと画像をaタグでラップする）
9<a href="#" style="display:block; width:150px; height: 50px;">
10  <span style="display:block; width: 150px; height: 20px; background: #ff0">リンク</span>
11  <img src="sample.jpg" width="150" height="30px" style="display: block;">
12</a>

わかりづらい説明で恐縮ですが、参考になればと思います。

投稿2015/04/27 09:09

Yoh

総合スコア94

nnahito

2015/04/28 08:04

ご回答有難うございます．お二方の回答を綺麗にまとめていただき，ありがとうございました．とてもわかり易かったです．

行動規範の内容に同意します

以下にコードを例示します。
marginのautoについてよく調べることをお勧めします。
(指定の仕方によって大きく振舞いが変化します)

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>SAMPLE</title>
6</head>
7<body>
8	<div id="wrapper">
9		<div id="header">
10			<h1>SAMPLE</h1>
11		</div>
12	</div>
13	<style>
14		body {
15			text-align : center;
16		}
17		#wrapper {
18			width : 1200px;
19			height : auto;
20			margin : 20px auto 0px;
21			padding : 10px;
22			text-align : left;
23			background : #cccccc;
24		}
25	</style>
26</body>
27</html>

display : table;
に関してはリンク先の説明そのままではないかと思うのですがどうなのでしょう。
振る舞いをtableと同等のものにすると考えるべきでしょう。

投稿2015/04/24 12:33

Cf_cwd

総合スコア730

Cf_cwd

2015/04/24 16:36

補足 Sampleのためstyleタグを使用していますが基本的にはCSSを別ファイルにしてくださいね

nnahito

2015/04/25 04:52

ご回答有難うございます． >display : table; >に関してはリンク先の説明そのままではないかと思うのですがどうなのでしょう。 >振る舞いをtableと同等のものにすると考えるべきでしょう。私もそう思っていたのですが，ではなぜ <div style="display: table; width: 80%; background-color: #F6FFF6"> <div style="display: table-cell; background-color: #fff; width: 50%;"> あああ </div> </div> のようにすると，背景が真っ白になるのでしょうか？テーブルの背景は#F6FFF6で，セルの背景は#fffという感覚で書いていますが，それがうまく行きませんので，質問させて頂いております．

Cf_cwd

2015/04/25 12:06

当方で確認した限りではそのようにはなりませんが……。

Cf_cwd

2015/04/25 12:11

追加で補足しますが bodyにtext-align : center; #wrapperにtext-align : left; を入れるのはバージョンの古いIE対策です。 calc()はIE9以下未対応。 display:table-cell;はIE7以下で使用できませんのでご注意ください。

nnahito

2015/04/28 08:02

ご回答，補足ありがとうございます．申し訳ありません，全体にかけていたCSSで一部文法ミスが有り，その影響でした．お騒がせしてしまい，申し訳ありませんでした．

行動規範の内容に同意します

知識不足のため、display要素の説明は省略させていただきます。へたな回答をしたら責任が持てないので、要素の中央寄せについて重点的に解答させていただくことを、予めご了承ください。
また、初回答のため失礼がありましたら、そのときはごめんなさい。

まず、divタグでマークアップした要素を中央に寄せる場合、そのdiv要素に対して以下のCSSを適用します。

div{
width:○○px;
margin-left:auto;
margin-right:auto;
}

上記のように、まず幅を設定しましょう。そうしないと、後述の
margin-left:auto;
margin-right:auto;
の記述で、左右のmargin(余白)がオートで算出できないからです。
以上の説明でお分かりいただけたかと思いますが、
margin-left:auto;
margin-right:auto;
という記述をすることによって、自動で要素をセンタリングしてくれます。
これが今最もメジャーなのではないでしょうか。
ちなみに、
margin-left:auto;
とだけ記述した場合は、要素に対して左の余白が自動的に算出され、右寄せになります。
margin-right:auto;
とだけ記述した場合は要素が左寄せになります。

しかし、上記の方法だとあまりスマートではありません。なぜならば、そもそもdivタグでマークアップする必要がないからです。
なにか要素をテーブルと一緒にセンタリングしたい場合は、その要素とテーブルをdivでマークアップしてセンタリングする上記の方法は有効ですが、テーブル要素自体が、含有する文字列によって自動的に幅を持っており、下記のようにテーブルに直接センタリングのCSSを施したほうが、divのようにいちいち幅を指定してセンタリングする手間がありません。

table{
margin-left:auto;
margin-right:auto;
}

参考になれば幸いです。

投稿2015/04/24 12:15

chikushi_hikaru

総合スコア11

nnahito

2015/04/25 04:38

ご回答有難うございます． margin-left:auto; margin-right:auto; こんなものがあるのですね……知りませんでした．しかし，autoとは……自動計算と言われると，なんだか気持ち悪い気もしますね＾＾；（JavaでいうString型のような……GC的な？）でも，そういったものが一般的に使われているので，やはり便利ですし慣れていかないといけないのですね…… ありがとうございます！

chikushi_hikaru

2015/04/25 05:18

どうしてもautoが気持ち悪いのであれば、calc関数を値に使用することもできます。まず、テーブルに直接CSSを適用し、且つテーブルの横幅が500pxだとすると、 table{ width:500px; margin-left:Calc(50% - 250px); } 上記のCSSは、まずテーブルの横幅を500pxに設定し、次にmargin-leftでセンタリングしています。センタリングに使用しているCalc関数ですが、これは単に値を指定する方法とは違い、パーセンテージ指定とピクセル指定の計算を行うことができます。上記の方法では、まず50％の位置に要素をもってきていますね。そうすると、ブラウザの横幅の50％の位置から要素が表示されるのですが、これではセンターから250px分ずれて表示されてしまいます(500pxの1/2の値である、250pxの位置がセンターに来なければいけないためです)。なので、横幅である500pxの1/2の値である、250pxを50％から引いてあげます。こうすることにより、autoを使わずセンタリングすることができます。古いバージョンのブラウザーを使用している方のために、Calc関数にはベンダープレフィックスをつけるとよいかもしれません。ベンダープレフィックスに関してはご自身で調べてみてください。

nnahito

2015/04/28 08:00

ご返信有難うございます． calcなるものがあるのですね！しかし，使ってみてSafari,FireFox,Chromeで動作確認をしたところ， margin:auto;がしっかりと動作（当たり前か＾＾；）していたので，こちらと併用させていただきたいと思います！ありがとうございます

行動規範の内容に同意します

あなたの回答