dポイントプレゼントキャンペーン実施中！

CSSのボックスが縦に並ばない・・・

解決済

  • 質問者：sakuran99
  • 質問日時：
  • 回答数：4件

質問させて下さい。

大きな四角の枠で囲まれたようなホームページを作っています。

下記のような感じなのですが
----------------------------------------------
<body>
<div id="mainbox">（大きな外枠）

あああああああ
　<div id="gazou">　＊＊＊＊＊＊＊＊　　</div>

</div>
</body>
----------------------------------------------

この外枠の下に何行か空白を入れたいんです。
※ホームページを縦にスクロールしたときに、外枠の底がブラウザの一番下とくっつく
　のが気に入らないので。


<div id="mainbox"></div>の下に適当なボックスを描いても、なんだか横にいったり
空白のマージンが調整できなかったりなんだかよくわかりません。最悪背景色の画像でも放り込めばよさそうな気もしますが・・・
普通はこういうときはどうするのでしょうか？

※添付画像が削除されました。
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1ベストアンサー

  • 回答者： outbrave
  • 回答日時：

外枠に 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>

この回答への補足

なぜだかわからないですが、外枠のボックスに
margin-bottom: 100px;

を足しでも、何もかわらないんです・・・。

補足日時：2012/07/27 14:10
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2012/07/27 16:58

No.4

  • 回答者： outbrave
  • 回答日時：

>どうやら外枠のボックスを絶対位置指定して中央に表示させているからではないか...



後出しでは絶対解決しません！

回答者をばかにするような質問ですな。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お手数をお掛けしすみあせん。ありがとうございます。

書いてある通り回答を待っている間調べたなりの推測なので、後出しだとキレられても少し困りました。

通報する
お礼日時：2012/07/27 16:57

No.3

  • 回答者： ORUKA1951
  • 回答日時：

No.2です。


HTMLに間違いがありました。64行目</p>が重複しています。63行目の</p>を除いてください。

No.1さんのmargin-bottomで下に余白ができないのは、「その下に何も内容がない」からです。内容がないときは、ないことを明示しなければならない--ユーザビリティ上---ことの必然です。
　もしあなたが他のサイトを見ていたとき、スクロールバーを見てまだ表示されていない部分があると判断したら下までスクロールしてみるでしょう。

　contentプロパティで内容を追加すればよい--この場合\Aと改行(HTMLでいう改行コード)を追加していますが、そのままでは
空白類 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
にしたがって無視されますから、white-spaceプロパティでHTMLで言うところの<pre>にしておかなければならないのです。
white-space ( http://www.w3.org/TR/CSS2/text.html#propdef-whit … )
content ( http://www.w3.org/TR/CSS2/generate.html#content )
　上記はCSS2.1です。(邦訳がないので)、この二つのプロパティはCSS2.1で変更された部分です。

★ただし、何度も言いますが、誤った方法です。できるということと、それが良い方法かは別問題です。

この回答への補足

大変残念ですが私の知識では回答を理解できている気がしません・・・。

「contentプロパティで内容を追加」とありますが、外枠の<div～>のしたになにかを記述すると、画面で言う左上に表示されてしまうんです。
色々検索してたのですが、どうやら外枠のボックスを絶対位置指定して中央に表示させているからでは
ないかと予想しました。

外枠の下にボックスを記述し、こちらも絶対位置を指定すれば空行はとりあえずできましたが、無理矢理な感じが・・・

調べるのもつかれてきたのでしばらくしたら質問も締め切ろうと思います。

補足日時：2012/07/27 16:07
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

　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-html4 … )］より
　HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )を参考に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">
<!--
html,body{margin:0;padding:0;}
h1,h2,p{margin:0;line-height:1.5em;}
p{text-indent:1em;}
div.header,div.section,div.footer{
＿width:80%;min-width:640px;max-width:900px;
＿margin:0 auto;
＿padding:0;
}
div.section{
＿position:relative;
＿border:ridge 4px fuchsia;
＿background-color:rgb(222,222,222);
}
div.section div.section{
＿border:gray solid 1px;
＿margin:0.5em 5px 0.5em 20%;
＿width:auto;min-width:0;
}
div.section pre{
＿width:90%;margin:0.5em auto;
＿padding:0.5em 1em;
＿background-color:white;
}
#contentTable{position:absolute;top:0;left:1%;width:18%;}
div.footer h2,div.footer dl{display:none;}
/* ここから質問の回答--いずれか一行--- */
div.footer address{margin-top:4em;}
div.footer:after{content:"\A\A\A";white-space:pre;}
-->
＿</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>&lt;body&gt;
　&lt;div id="mainbox"&gt;（大きな外枠）
　　あああああああ
　　&lt;div id="gazou"&gt;　＊＊＊＊＊＊＊＊　　&lt;/div&gt;
　&lt;/div&gt;
&lt;/body&gt;</pre>
＿＿＿<p>この外枠の下に何行か空白を入れたいんです。</p>
＿＿＿<p>※ホームページを縦にスクロールしたときに、外枠の底がブラウザの一番下とくっつくのが気に入らないので。</p>
＿＿＿<p>&lt;div id="mainbox"&gt;&lt;/div&gt;の下に適当なボックスを描いても、なんだか横にいったり、空白のマージンが調整できなかったりなんだかよくわかりません。最悪背景色の画像でも放り込めばよさそうな気もしますが・・・</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>&copy; ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報