締切済み

背景とブロック要素をブラウザの中央に配置するには？

2011/09/27 00:59

ウインドウサイズを変更させても、背景画像とブロック要素の中心を基点として合わせておくことは、CSSだけで可能でしょうか？（添付画像参照）あるいは2つのブロック要素を、中央でなく中心を基点として揃えることはできるでしょうか？

freakale
お礼率60% (14/23)

CSS
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/27 09:40 回答No.3

とても簡単に出来ます。　そのためには、前提としてHTMLが正統なものである必要があります。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからメモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )］より　すなわち、HTMLはあくまで文書構造をマークアップするためのメタ言語で、どのように表示するか--プレゼンテーション---はスタイルシートに任せることが基本です。 14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 基本的には、background-positionなどの背景指定、左右マージンはautoを使います。 ★下記で検証済みです。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) [下記は利用環境に合わせて調整すること] 　あとは、自身の目でよく調べて理解してください。(勉強ですから) ★背景画像が繰り返しがない一枚なのか、左右に敷き詰めてよいかで指定が変わります。 ★利用者のウィンドウ幅の80%が表示区域ですが、ウィンドウ幅に追随して最小450px,最大900pxで伸縮します。 ★ブロック要素には解りやすくするためボーダーがつけてあります。 ※タブは＿に、<pre></pre>中の半角スペースは・に置換してあります。必ず戻してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<div id="abstruct"> ＿＿＿<p> ＿＿＿＿ウィンドウ中心に背景や画像を配置する。＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>背景とブロック要素をブラウザの中央に配置するには？</h2> ＿＿<p> ＿＿＿ウインドウサイズを変更させても、背景画像とブロック要素の中心を基点として合わせておくことは、CSSだけで可能でしょうか？（添付画像参照）＿＿</p> ＿＿<p> ＿＿＿あるいは2つのブロック要素を、中央でなく中心を基点として揃えることはできるでしょうか？＿＿</p> ＿</div> ＿<div class="section answer"> ＿＿<h2>背景の指定はbackground-position、ブロックの配置には、CSS2のサイズプロパティのautoを使います。</h2> ＿＿<pre>html{margin:0;padding:0;background-color:black;} body{ ・・border:aqua 1px solid; ・・width:80%;min-width:450px;max-width:900px; ・・margin:0 auto; ・・background:aqua url(./images/background/sky.jpg) ・・ 50% 0 repeat-y; } div.header,div.section,div.footer{ ・・margin:0 auto 10px auto; ・・width:80%; ・・border:solid 1px green; } p{text-indent:1em;margin:0 1em;line-height:1.6em;} div.answer{ ・・width:70%; ・・border:solid red 1px; } div.answer pre{ ・・background-color:white;padding:1em; ・・margin:0.5em 1em; }</pre> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>

質問者

お礼 2011/09/27 12:41

これだとウインドウサイズ変更すると、背景画像とずれてしまいます。なんとか自己解決しました。お手数おかけしました。

naokita
ベストアンサー率57% (1008/1745)

2011/09/27 09:16 回答No.2

body { margin:0; padding:0; height:1080px;} #box1{ padding: 240px 0; background: url(画像) no-repeat 50% 50%;} #box2{ margin:auto; width:598px; height:598px; border:1px solid gray; overflow:hidden;} <body> <div id="box1"><div id="box2"> <p>縦座標：0基点で計算、横座標：50%基点<br /> 例：このBOXが600pxだとして、padding: 240px 0;　positionでも可能</p> </div></div> </body>

質問者

お礼 2011/09/27 14:09

シンプルで良い感じなのですが、bodyの下側に空白ができてしまいます。背景画像をbodyと同じ高さにしてもダメでした。

4017B
ベストアンサー率73% (1338/1816)

2011/09/27 03:04 回答No.1

基本的には以下の様な感じで記述します。 ━ ココから ━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>TEST</title> <style type="text/css"></style> </head> <body> <div id="main">あああ</div> </body> </html> ━ ココまで ━━━━━━━━━━━━━━━━━━━━━━━━ ～で、重要なポイントが幾つか。・CSS＋HTMLでは、どうやっても“縦方向”の中央揃えは出来ない。・必ずドキュメントタイプ（<!DOCTYPE～>）を宣言する。以上の2点です。＞縦方向の中央揃えは無理 CSSを使えば何でも出来ると思っている人も多いのですが。HTMLの仕様で、ブロック要素を縦方向に中央に揃える事は出来ないし、そもそも考え方としても有り得ない。何故ならHTMLはあくまでも文書を見せるためのマークアップ言語なので、横方向の中央揃えはあり得るけど。縦方向に幾ら揃えようとしても、文書量が増えてしまえば、あるいは閲覧者側の画面が小さければ文書が溢れてしまうので。自動的に縦にスクロールさせるバーが表示される事になり、コンテンツを縦方向の中央揃えにする必要性が最初から皆無であるため。～というW3Cの考え方みたいです。＞ドキュメントタイプの宣言実はこれが非常に重要でして…。良くある「IEとChromeで表示が違う！」とか言うほとんどの理由は、このドキュメントタイプ宣言が無いか、間違った書き方をしているために、主にIEが強制的に「Quirksモード（後方互換モード）」と呼ばれる状態で作動してしまっている事に起因します。 HTMLのドキュメントタイプは何種類かありますが。とりあえずは例文の通りに書いておけば間違い無い(笑)！まあ暇を見て勉強してみて下さい。 P.S. もう一つの「2つのブロック要素を～」は、言ってる意味が分らないのでパス。

質問者

お礼 2011/09/27 12:39

ブロック要素の上下左右センタリング（http://css-eblog.com/csstechnique/block-centering.html）と、背景画像を中央に配置 body { margin:0; padding:0; background-repeat: no-repeat; background-position: center center; background-image:url(../image.jpg) background-attachment:fixed; } で出来ました。わざわざご教授ありがとうございました。

背景とブロック要素をブラウザの中央に配置するには？