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要素は一体何なのか?
どのように,どのようなときに使えばいいのか.
ご存じの方がいらっしゃいましたら,ご教授願います.
よろしくお願いいたします.
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
ベストアンサー
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
総合スコア94
0
以下にコードを例示します。
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
総合スコア730
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/25 04:52
2015/04/25 12:06
2015/04/25 12:11
2015/04/28 08:02
0
知識不足のため、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
総合スコア11
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/25 04:38
2015/04/25 05:18
2015/04/28 08:00
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/28 08:04