質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.60%

  • HTML

    8682questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5589questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3881questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1987questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,091

nnahito

score 1689

HTMLでコンテンツをページの中央に配置する際に,私はよく
<body>
<table align="center">
    <tr>
        <td>コンテンツ</td>
    </tr>
</table>
</body>
といった感じで書いていましたが,HTML5のこの時代,おそらくこの書き方は時代遅れでしょう.
Webでサンプルを探していると,divなどで中央寄せにすると書いてあるサイト様が有りますが,これはどのようにしているのでしょうか?

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

![イメージ説明

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

<div style="display: table; width: 80%; background-color: #F6FFF6">
   <div style="display: table-cell; background-color: #fff">
     コンテンツ
   </div>
</div>
のようにしてみたのですが,これまたうまく行きません.


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

ご存じの方がいらっしゃいましたら,ご教授願います.
よろしくお願いいたします.
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

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

ソースA
<div style="display: table; width: 80%; background-color: #F6FFF6">
  <div style="display: table-cell; background-color: #fff; width: 50%;">
    あああ
  </div>
</div>
こちらは以下(ソースB)と同じ意味になります。
ソースB
<table style="width: 80%; background-color: #F6FFF6">
  <tr>
    <td style="background-color: #fff; width: 50%;">
      あああ
    </td>
  </tr>
</table>
※ソースBで黒い枠線が出るのは
cellpadding、cellspacingが設定されていないからです。

なので書き方の正解としては前の方々のいうとおり、
<div style="background-color: #F6FFF6;">
  <div style="background-color: #fff; width: 50%; margin: 0 auto;">
    あああ
  </div>
</div>
となります。

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

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

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

---------------------

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

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

例)横並びのメニューを実現
<ul>
  <li style="display:inline; margin-right: 1em;">メニュー1</li>
  <li style="display:inline; margin-right: 1em;">メニュー2</li>
  <li style="display:inline;">メニュー3</li>
</ul>

例)ブロックを丸ごとリンクにする(テキストと画像をaタグでラップする)
<a href="#" style="display:block; width:150px; height: 50px;">
  <span style="display:block; width: 150px; height: 20px; background: #ff0">リンク</span>
  <img src="sample.jpg" width="150" height="30px" style="display: block;">
</a>

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/28 17:04

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

    キャンセル

+1

知識不足のため、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/25 13:38

    ご回答有難うございます.

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

    こんなものがあるのですね……知りませんでした.
    しかし,autoとは……自動計算と言われると,なんだか気持ち悪い気もしますね^^;
    (JavaでいうString型のような……GC的な?)
    でも,そういったものが一般的に使われているので,やはり便利ですし慣れていかないといけないのですね……

    ありがとうございます!

    キャンセル

  • 2015/04/25 14: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関数にはベンダープレフィックスをつけるとよいかもしれません。
    ベンダープレフィックスに関してはご自身で調べてみてください。

    キャンセル

  • 2015/04/28 17:00

    ご返信有難うございます.

    calcなるものがあるのですね!
    しかし,使ってみてSafari,FireFox,Chromeで動作確認をしたところ,
    margin:auto;がしっかりと動作(当たり前か^^;)していたので,
    こちらと併用させていただきたいと思います!
    ありがとうございます

    キャンセル

+1

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>SAMPLE</title>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <h1>SAMPLE</h1>
        </div>
    </div>
    <style>
        body {
            text-align : center;
        }
        #wrapper {
            width : 1200px;
            height : auto;
            margin : 20px auto 0px;
            padding : 10px;
            text-align : left;
            background : #cccccc;
        }
    </style>
</body>
</html>

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/25 01:36

    補足

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

    キャンセル

  • 2015/04/25 13: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という感覚で書いていますが,
    それがうまく行きませんので,質問させて頂いております.

    キャンセル

  • 2015/04/25 21:06

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

    キャンセル

  • 2015/04/25 21:11

    追加で補足しますが
    bodyにtext-align : center;
    #wrapperにtext-align : left;
    を入れるのはバージョンの古いIE対策です。

    calc()はIE9以下未対応。
    display:table-cell;はIE7以下で使用できませんのでご注意ください。

    キャンセル

  • 2015/04/28 17:02

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    コンテンツの作成方法

    下記参考サイトの様に、 画像をマウスオーバーすると、 キャプションが現れるコンテンツを作成したいと考えております。 【 参考サイトURL 】 http://www.basicag

  • 受付中

    画像の配置に関して

    こちらの複数の様々なサイズの画像同士の隙間を 均等にしつつ、尚且つ画像やテーブルはウィンドウサイズによって 可変する様に作成したいと考えておりますが、 どのように作成すればいいかが

  • 解決済

    tableを使わないで位置を揃える方法

    簡単に説明すると 要素111 結果1 要素22 結果2 要素3 結果3 を 要素111  結果1 要素22    結果2 要素3       結果3 みたいにしたいです(ちょ

  • 受付中

    cssで「〇〇○    >」のようなボタンの作り方。もしくは作れるジェネレーター

    このようなボタンをcssで作りたいです。 現在、スマホ用のサイトを作っています。添付画像はフォトショップで作ったもので、これを幅100%の指定で貼り付けたところ、スマホでは綺麗に

  • 解決済

    CSSに関して

    皆様、質問がございます。よろしくお願い申し上げます。 現在下記のようにRubySearchやHomeをheaderに配置したいのですが、その方法がいまいちわかりません。 そのた

  • 解決済

    html、文字サイズを改行せずに変更、センタリング

    すごく初歩的かもしれませんが質問させていただきます。 ページ内で価格を表記する際に、(税込)の部分のみフォントのサイズを小さくしたいです。 WordPressで扱っているので、CS

  • 受付中

    伸縮する画像の上に位置がずれないよう伸縮するボタンを置きたい

    前提・実現したいことレスポンシブのコーディングを実現する上で、伸縮する画像の上に位置がずれないよう伸縮するボタンを置きたいです。 発生している問題・エラーメッセージ上に乗せるボタ

  • 解決済

    HTMLのレイアウトについて

    レイアウトが崩れてしまいます。 サイドバーの横に文字を打ちたいと思うのですがサイドバーの下にレイアウトが崩れる原因を教えてほしいです。 発生している問題・エラーメッセ

同じタグがついた質問を見る

  • HTML

    8682questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5589questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3881questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1987questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。