CSSのボックスが縦に並ばない？解決方法を教えてください！

2012/07/27 10:56

このQ&Aのポイント

ホームページで大きな四角の枠で囲まれた要素を作成している際に、外枠の下に空白を入れる方法を教えてください。
特定の要素の下に適当なボックスを描いたりマージンを調整する方法についてわかりません。背景色の画像を使用することも考えていますが、一般的にはどのような方法を使うのでしょうか？
ホームページを縦にスクロールしたときに外枠の底がブラウザの一番下とくっつくのが気に入らないため、外枠の下に空白を作りたいです。どのような方法があるのか教えてください。

sakuran99
お礼率41% (59/143)

CSS
回答数4
ありがとう数2

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

質問者が選んだベストアンサー

ベストアンサー

outbrave
ベストアンサー率60% (231/380)

2012/07/27 13:09 回答No.1

外枠に margin-bottom を設定するだけでいいと思いますけど。 <!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"> #mainbox { width:800px; margin:auto; border:solid 1px; height:1200px; margin-bottom:150px; } </style> <title></title> </head> <body> <div id="mainbox"> </div> </body> </html>

質問者

お礼 2012/07/27 16:58

回答ありがとうございました。解決せずに締切りますが、一番最初に頂いたのでベストアンサーにさせて頂きます。

質問者

補足 2012/07/27 14:10

なぜだかわからないですが、外枠のボックスに margin-bottom: 100px; を足しでも、何もかわらないんです・・・。

その他の回答 (3)

outbrave
ベストアンサー率60% (231/380)

2012/07/27 16:41 回答No.4

>どうやら外枠のボックスを絶対位置指定して中央に表示させているからではないか... 後出しでは絶対解決しません！回答者をばかにするような質問ですな。

質問者

お礼 2012/07/27 16:57

お手数をお掛けしすみあせん。ありがとうございます。書いてある通り回答を待っている間調べたなりの推測なので、後出しだとキレられても少し困りました。

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

2012/07/27 15:44 回答No.3

No.2です。 HTMLに間違いがありました。64行目</p>が重複しています。63行目の</p>を除いてください。 No.1さんのmargin-bottomで下に余白ができないのは、「その下に何も内容がない」からです。内容がないときは、ないことを明示しなければならない--ユーザビリティ上---ことの必然です。　もしあなたが他のサイトを見ていたとき、スクロールバーを見てまだ表示されていない部分があると判断したら下までスクロールしてみるでしょう。　contentプロパティで内容を追加すればよい--この場合\Aと改行(HTMLでいう改行コード)を追加していますが、そのままでは空白類 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 ) にしたがって無視されますから、white-spaceプロパティでHTMLで言うところの<pre>にしておかなければならないのです。 white-space ( http://www.w3.org/TR/CSS2/text.html#propdef-white-space ) content ( http://www.w3.org/TR/CSS2/generate.html#content ) 　上記はCSS2.1です。(邦訳がないので)、この二つのプロパティはCSS2.1で変更された部分です。 ★ただし、何度も言いますが、誤った方法です。できるということと、それが良い方法かは別問題です。

質問者

補足 2012/07/27 16:07

大変残念ですが私の知識では回答を理解できている気がしません・・・。「contentプロパティで内容を追加」とありますが、外枠の<div～>のしたになにかを記述すると、画面で言う左上に表示されてしまうんです。色々検索してたのですが、どうやら外枠のボックスを絶対位置指定して中央に表示させているからではないかと予想しました。外枠の下にボックスを記述し、こちらも絶対位置を指定すれば空行はとりあえずできましたが、無理矢理な感じが・・・調べるのもつかれてきたのでしばらくしたら質問も締め切ろうと思います。

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

2012/07/27 15:02 回答No.2

HTMLをまずきちんと身につけたほうが良いです。　HTMLは文書構造を記述するもので、それをどのようにプレゼンテーションするかはスタイルシートに任せます。この文書構造とプレゼンテーションの分離はHTML4.01以降極めて重要なスタンスとなっています。　それさえできていれば、今も将来もどのようにも自由自在にデザインできます。(サンプルにデザイン要素は入っていませんから、どのようにもデザインできます。後から内容を変更するのも楽、検索エンジンも正しく内容を理解してくれます。) 　さて、枠の外に余白をとる方法ですが、・contentプロパティで内容を追加するのが、質問の趣旨に対する率直な方法です。　しかし、サンプル内に書いたように、薦められる方法ではありません。・本来は一番下になにか書くべきです。　サンプルは二通りの方法を示しています。 [例]HTML4.01strict + CSS2.1 です。 ★ソース中のタブは、＿に置換してあるので戻してください。 ★プロパティやセレクタの書き方は説明しません。自身で調べてください。そのほうが身につく。 ★HTML自体もサンプルになるように書いてあります。リンク先でもないのに余分なid--特に文書構造ではないものは書いてはなりません。複雑にしてしまうだけです。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より　HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を参考にclass名をつけると良いです。将来、<div class="section">を<section>に変更するだけでHTML5になります。 <!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> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<div class="section" id="question"> ＿＿＿<h2> CSSのボックスが縦に並ばない・・・</h2> ＿＿＿<p>質問させて下さい。</p> ＿＿＿<p>大きな四角の枠で囲まれたようなホームページを作っています。</p> ＿＿＿<p>下記のような感じなのですが</p> ＿＿＿<pre><body> 　<div id="mainbox">（大きな外枠）　　あああああああ　　<div id="gazou">　＊＊＊＊＊＊＊＊　　</div> 　</div> </body></pre> ＿＿＿<p>この外枠の下に何行か空白を入れたいんです。</p> ＿＿＿<p>※ホームページを縦にスクロールしたときに、外枠の底がブラウザの一番下とくっつくのが気に入らないので。</p> ＿＿＿<p><div id="mainbox"></div>の下に適当なボックスを描いても、なんだか横にいったり、空白のマージンが調整できなかったりなんだかよくわかりません。最悪背景色の画像でも放り込めばよさそうな気もしますが・・・</p> ＿＿＿<p> ＿＿＿＿普通はこういうときはどうするのでしょうか？ </p> ＿＿＿</p> ＿＿</div> ＿＿<div class="section" id="answer"> ＿＿＿<h2>本来はfooterに何か書いてmarginをとるべき</h2> ＿＿＿<p> ＿＿＿＿本来はこのサンプルのようにfooter内の要素をマージンをとって配置すべきですが、薦められる方法ではありませんが、contentプロパティを用いて内容を追加する方法もあります。＿＿＿</p> ＿＿＿<p> ＿＿＿＿<strong>ユーザーにとってスクロールバーは現在の表示範囲と表示されていない部分を示す重要な目印ですから、ユーザビリティの観点から薦められないのです。</strong> ＿＿＿</p> ＿＿＿<pre>/* ここから質問の回答--いずれか一行--- */ div.footer address{margin-top:4em;}/* 最後の要素の上を開ける */ div.footer:after{content:"\A\A\A";white-space:pre;}/* 内容の追加 */</pre> ＿＿</div> ＿＿<div id="contentTable"> ＿＿＿<ul> ＿＿＿＿<li><a href="#question">質問</a></li> ＿＿＿＿<li><a href="#answer">回答</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>